Connect AI assistants to your 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.

What you'll need

Before you start:

• Node.js version 22 or higher
• A zeroheight account with at least one styleguide
• Your zeroheight Client ID and Access Token
• One of: Claude Desktop, VS Code with GitHub Copilot, Cursor IDE, or Windsurf IDE

Get your API credentials

You'll need your Client ID and Access Token to connect to zeroheight.

1. Open your zeroheight account settings
2. Navigate to the API section
3. Generate a Client ID (starts with zhci_) and Access Token (starts with zhat_)

If you need help creating API credentials, see the API authentication guide.

Setup

Claude Desktop

1. Download and install Claude Desktop
2. Open Claude Desktop settings
3. Go to the Developer tab
4. Click "Edit Config"
5. Add this configuration:

{
  "mcpServers": {
    "zeroheight": {
      "command": "npx",
      "args": ["-y", "@zeroheight/mcp-server@latest"],
      "env": {
        "ZEROHEIGHT_ACCESS_TOKEN": "zhat_abc123",
        "ZEROHEIGHT_CLIENT_ID": "zhci_abc123"
      }
    }
  }
}

Replace the example tokens with your actual credentials.

6. Restart Claude Desktop
7. Look for the MCP indicator in the chat interface

VS Code with GitHub Copilot

1. Create .vscode/mcp.json in your workspace:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "zeroheight-token",
      "description": "Zeroheight Access Token",
      "password": true
    },
    {
      "type": "promptString", 
      "id": "zeroheight-client",
      "description": "Zeroheight Client ID",
      "password": true
    }
  ],
  "servers": {
    "zeroheight": {
      "command": "npx",
      "args": ["-y", "@zeroheight/mcp-server@latest"],
      "env": {
        "ZEROHEIGHT_ACCESS_TOKEN": "${input:zeroheight-token}",
        "ZEROHEIGHT_CLIENT_ID": "${input:zeroheight-client}"
      }
    }
  }
}

2. Open Command Palette (⇧⌘P on macOS, F1 on Windows) and run MCP: Add Server
3. Enter your credentials when prompted
4. Enable Agent Mode in GitHub Copilot Chat

Cursor IDE

1. Open Settings → MCP Servers
2. Click "Create New MCP Server"
3. Configure:
   • Name: zeroheight
   • Command: npx
   • Args: ["-y", "@zeroheight/mcp-server@latest"]
   • Environment variables:
     • ZEROHEIGHT_ACCESS_TOKEN: your token
     • ZEROHEIGHT_CLIENT_ID: your client ID
4. Save and restart Cursor

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

Troubleshooting

Server not appearing after setup?

1. Check Node.js version: node --version (needs 22+)
2. Verify your credentials are correct
3. Check JSON syntax in config file
4. Restart your client completely

"There are no accessible styleguides..." error?

1. Confirm your access token and client ID
2. Make sure your account has styleguide access
3. Check if credentials have expired

Server won't start?

1. Test manually: npx @zeroheight/mcp-server@latest
2. Check internet connection
3. Look for firewall issues

For more help, contact support@zeroheight.com or check the help center.