@zeroheight/mcp-server

zeroheight MCP Server

MCP server for zeroheight

For a full walkthrough on how to use this MCP server, head over to our help centre article.

Install

Add to Claude Desktop or VSCode (including Cursor/Windsurf) config:

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

Usage

Authentication

By default, the local MCP connects to zeroheight and starts a browser OAuth flow the first time authentication is needed. OAuth tokens are stored locally at ~/.zeroheight/mcp-oauth.json.

If your MCP client cannot complete OAuth, you can still configure zeroheight API credentials as environment variables. These can be created using these instructions:

ZEROHEIGHT_CLIENT_ID="your-client-id"
ZEROHEIGHT_ACCESS_TOKEN="your-access-token"

When both values are present, the local MCP sends them to zeroheight using X-API-CLIENT and X-API-KEY headers.

Telemetry

To help improve the experience this MCP server uses Sentry for error tracking. If you don't want to share error data, you can disable it by setting the environment variable ZEROHEIGHT_MCP_DISABLE_TELEMETRY=true

Available Tools

The server provides these MCP tools:

list-styleguides Discover available design systems that provide documented guidance for components, patterns, and styles. Call this tool first. If multiple systems are available, confirm with the user which should be used.

Helpful to reference before generating UI so decisions can reflect established design approaches.

For single-styleguide remote MCP connections, this tool is not exposed because the connection is already scoped to one design system.

list-pages View the navigation hierarchy of a design system — including categories, pages, and tabs — to better understand how guidance is organized. Call this tool immediately after list-styleguides with the desired styleguide ID.

Helpful when determining where to look for component or pattern documentation before generating UI.

For single-styleguide remote MCP connections, this tool does not require a styleguideId argument.

get-page Fetch guidance from a specific design system page, including usage notes, recommendations, and supporting context.

Particularly helpful ahead of UI generation to increase the likelihood that outputs reflect the intent of the design system.

Setup Examples

Claude Desktop

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

VS Code

Create .vscode/mcp.json:

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

Example Usage

"List my styleguides"
"Show pages about buttons"
"Get the navigation for [styleguide name]"
"Find documentation about typography"

Requirements

• Node.js 22+
• zeroheight OAuth access, or a zeroheight Client ID and Access Token

More info on setup can be found in the help centre article.