Skip to main content

  1. zeroheight
  2. Use zeroheight
  3. Use developer features

Using the remote zeroheight MCP server

Rab Rennie
Rab Rennie
  • Updated

Connect AI assistants to zeroheight styleguides using the Model Context Protocol.

This article covers installing and configuring the MCP server to work with Claude Desktop, VS Code, Cursor, and other MCP-compatible tools.

Check out this article to learn how to generate and share the MCP URL for your organisation.

Pre-requisites

Before you start, you'll need

  • Access to the remote MCP server. Learn more here
  • Access to an MCP client that works with remote MCP servers (e.g. Claude Desktop, VS Code with GitHub Copilot, Cursor IDE, Windsurf IDE)

About the MCP server

Once you've connected the MCP server to an AI assistant, you can ask questions about your styleguides:

  • "List my styleguides"
  • "Search buttons in my design system"
  • "Get the navigation structure for [styleguide name]"
  • "Find typography documentation"
  • "What's on the colors page?"

The MCP server provides these tools:

  • list-styleguides: Browse all accessible styleguides
  • get-styleguide-tree: Get navigation hierarchy for a styleguide
  • list-pages: Find pages in a styleguide (with search)

  • get-page: Retrieve page content in Markdown or JSON

    Note: embedded content (e.g. Figma designs, Storybook blocks) will be returned via a link to the image or original content.

  • search-pages: Search for pages in a styleguide by a search term

And these prompts (MCP prompts are a standardised way for MCP servers to expose prompt templates to AI assistants):

  • recommend-pages: provides a prompt for the AI assistant to generate the 5 most relevant URLs for a given topic
  • summarize-page: provides a prompt for then AI assistant to summarise a specific page

Releases

By default, the MCP will return information about the default release. If you want to use the list-pages or get-page tool (or summarise-page prompt) with a specific release you can provide the AI assistant with a release ID which can be retrieved from the styleguide URL when viewing a specific release.

For example, the styleguide with ID https://zeroheight.com/566553c22/v/57502/p/931c0c-design-system has the release ID 57502.

Setup

Claude desktop

  1. Copy your unique remote MCP URL from the Raw URL tab in the remote MCP details block
  2. Head to claude.ai or open Claude desktop

  3. Go to Settings → Connectors and click Add custom connector

  4. Enter a name and paste your remote MCP server URL
  5. Test the MCP connection by asking Claude a question about the styleguide

VS Code with GitHub Copilot

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

Cursor IDE

  1. Select the Cursor tab in the remote MCP details blocks

  2. Click the icon next to the URL and Cursor Tools and MCP settings will open with the name and URL pre-populated

    cursormcp.png
  3. Click Install

Claude Code / Codex

  1. Select the Claude Code or Codex tab in the remote MCP details blocks
  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 overview tab of the agent, ensure your agent’s model is set to a GPT-5 model 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 MCP details in the modal. The server URL should be your remote MCP url copied from your styleguide settings
    • Be aware that logging/analytics and access with be associated with the URL/user who retrieved the URL
  6. In the Add tool window, select Connection then Create new connection. Then click Add and configure to proceed.
  7. Click the settings button in the top right, then navigate to Connection Settings. Then click Connect.
  8. Return to the agent’s overview page and test the agent in the right hand side panel. Ask a question like ‘What components are available in my styleguide’

FAQs

How do I connect to multiple styleguides?

Each styleguide can be added as a separate server with a relevant name. You can either disable the ones you are not using in your client or specify which one should be used in your prompts
 

Share this article
Was this article helpful?