Skip to main content

Set up the remote MCP server

Rab Rennie
Rab Rennie
  • Updated
This feature is not available for Free or Starter plans. Want this and other premium features? Update your plan here.

This article covers everything needed to enable the remote MCP server for a styleguide, get connection URLs, connect AI tools, and share access with your team.

New to MCP? Read the zeroheight MCP overview first.

Enabling Remote MCP access in a styleguide

Styleguides created before 4th March 2026 have remote MCP disabled by default. Styleguides created after that date have it enabled by default.

  1. Head to your styleguide settings
  2. In the sidebar on the left select MCP and Markdown
  3. Under Remote MCP access toggle Enable remote MCP access on

Once enabled, you'll see your unique MCP connection details. You can also access it from your profile menu at zeroheight.com/settings/user/mcp.

Connecting to your AI tool

Select the tab in the panel that matches your tool, then follow the steps below.

Figma Make

If you're a user with editor or admin access to zeroheight, you can use the zeroheight partner connector for Figma Make. Otherwise, follow the instructions below to use the zeroheight remote MCP server with Figma Make.

  1. In Figma Make, click the + icon, choose Connectors, then Manage
  2. Go to the Personal tab and click + Create connector
  3. Give the connector a name — the name of your design system works well
  4. Add a description. The description influences how Figma Make uses the connector. You can use this:

    This connector helps Figma Make work from your design system documentation, so prototypes stay on track from the start. Build testable proofs of concept faster using documented components, rules, and patterns — with this connector as the source of truth.

     

  5. Click Next, paste your MCP URL into MCP server URL, and click Create
  6. Click Connect next to your new connector
  7. Optionally set each tool to Always run so Figma Make can use them without asking for confirmation each time.

Check out Figma's own documentation on custom connectors here.

Claude (claude.ai or Claude desktop)

  1. Copy your URL from the Raw URL tab in the remote MCP details block or from styleguide settings
  2. Go to Settings → Connectors and click Add custom connector
  3. Enter a name and paste your remote MCP URL

VS Code with GitHub Copilot

  1. Select the VS Code tab in the remote MCP details block
  2. Click the icon next to the URL — VS Code MCP settings will open with the name and URL pre-populated
  3. Click Install
  4. Enable Agent Mode in GitHub Copilot Chat

Cursor

  1. Select the Cursor tab in the remote MCP details block
  2. Click the icon next to the URL — Cursor Tools and MCP settings will open with the name and URL pre-populated
  3. Click Install

Claude Code / Codex

  1. Select the Claude Code or Codex tab in the remote MCP details block
  2. Copy the command
  3. Open a terminal, paste and run the command

Microsoft Copilot Studio

  1. Create an agent in Copilot Studio
  2. In the agent's overview tab, set the model to GPT-5 or a Claude model — avoid GPT-4.1
  3. Go to Tools and create a new tool
  4. Choose Model Context Protocol from the modal
  5. Enter your remote MCP URL — note that logging and access will be associated with the user who retrieved the URL
  6. Select Connection, then Create new connection, then Add and configure
  7. Go to Connection Settings and click Connect

v0

  1. Click the + icon under the chat and choose MCPs
  2. Click Add New
  3. Choose Custom MCP 
  4. Enter a name and paste your remote MCP URL

Share access with your team

If you want design system consumers to be able to connect to AI tools, add a Remote MCP details block to your documentation.

  1. Open the slash inserter on any page and select Remote MCP details
  2. The block renders each viewer's unique MCP URL automatically — they'll see their own URL, not yours
  3. Configure which client tabs are visible using the block's settings panel
  4. Optionally turn off Display help message if you're providing your own setup guidance

Note: Each viewer's URL is unique to them, so use the block — don't share your own URL.

You can also share the Connect your AI tool to a zeroheight design system article directly with your team.

You can turn off Display help message and you can configure which MCP client setup options are visible to viewers in the block.

What you can do with the MCP

Once connected, you can ask your AI tool:

  • "Search for pages about buttons"
  • "What are the typography rules?"
  • "Lint this code using the design system guidelines"
  • Append the following to your prompt for the AI tool to create something "adhere to the design system guidelines accessible via the [MCP name] MCP"

The MCP server provides the following tools:

  • list-styleguides — Browse accessible design systems
  • get-styleguide-tree — View the navigation hierarchy of a styleguide
  • list-pages — Find pages within a styleguide (supports search)
  • get-page — Retrieve a page's content, including usage notes and recommendations. Embedded content (e.g. Figma designs, Storybook) returns as a link.
  • get-page-images — Fetch images from a page as base64 content

And these MCP prompts:

  • recommend-pages — Returns the 5 most relevant page URLs for a given topic
  • summarize-page — Summarises a specific page

Working with releases

By default the MCP returns content from the default release. To target a specific release, provide the release ID to your AI tool. You can find the release ID in the styleguide URL when viewing that release.

Example: in https://zeroheight.com/566553c22/v/57502/p/931c0c-design-system, the release ID is 57502.

Connecting to multiple styleguides

Add each styleguide as a separate MCP server with a distinct name. Disable the ones you're not using in your client, or specify which one to use in your prompts.

Manage access

Disable remote MCP

Disabling remote MCP access:

  • Removes the Remote MCP details block from the viewer-facing release
  • Removes the remote MCP URL from styleguide settings and the editor view of the block
  • Immediately stops all existing MCP URLs from returning data

Re-enabling it later will restore access for previously generated URLs.

Revoke all URLs without disabling

Use Disconnect all current MCP sessions to permanently invalidate all existing MCP URLs. Remote MCP stays enabled, but anyone who needs access must fetch a new URL.

Share this article
Was this article helpful?