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.
What you'll need
Before you start:
- A remote MCP server URL, it will look like
https://mcp.zeroheight.com/mcp/... - One of: Claude Desktop, VS Code with GitHub Copilot, Cursor IDE, Windsurf IDE or another MCP client that works with remote MCP servers
Setup
Claude desktop
- Head to claude.ai or open Claude desktop
- Go to Settings → Connectors and click Add custom connector
- Enter a name and paste your remote MCP server URL
- Test the MCP connection by asking Claude a question about the styleguide
VS Code with GitHub Copilot
- Open the command palette - Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux)
- Search for MCP: Add Server
- For type choose HTTP
- Paste in the remote MCP server URL and enter a name when prompted
- Enable Agent Mode in GitHub Copilot Chat
Cursor IDE
- Open Cursor Settings → Tools & MCP
- Click New MCP Server or Add Custom MCP
-
Update the
mcp.jsonfile to include the following and save
(the name in this example is zeroheight but you can call it whatever you like, this is useful if you have multiple styleguides you want to refer to by name){ "mcpServers": { "zeroheight": { "url": "https://mcp.zeroheight.com/mcp/..." } } }
Usage
Once connected, you can ask questions about your styleguides:
- "List my styleguides"
- "Show pages about buttons"
- "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
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