MCP Server

The @prototyperai/mcp-server package provides structured access to components, docs, and design tokens via the Model Context Protocol.

Setup

Claude Code

claude mcp add prototyper-ui -- npx -y @prototyperai/mcp-server@latest

Or add to .mcp.json in your project:

{
  "mcpServers": {
    "prototyper-ui": {
      "command": "npx",
      "args": ["-y", "@prototyperai/mcp-server@latest"]
    }
  }
}

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "prototyper-ui": {
      "command": "npx",
      "args": ["-y", "@prototyperai/mcp-server@latest"]
    }
  }
}

Windsurf

Add to .windsurf/mcp.json:

{
  "mcpServers": {
    "prototyper-ui": {
      "command": "npx",
      "args": ["-y", "@prototyperai/mcp-server@latest"]
    }
  }
}

VS Code

Add to .vscode/mcp.json:

{
  "servers": {
    "prototyper-ui": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@prototyperai/mcp-server@latest"]
    }
  }
}

Zed

Add to .zed/settings.json:

{
  "context_servers": {
    "prototyper-ui": {
      "command": {
        "path": "npx",
        "args": ["-y", "@prototyperai/mcp-server@latest"]
      }
    }
  }
}

Available Tools

Tool	Description
`list_components`	List all available components with descriptions
`get_component_docs`	Full documentation, API reference, and usage examples
`get_component_source`	Full TypeScript source code for a component
`get_theme`	Complete OKLCH design tokens CSS
`search_docs`	Full-text search across all documentation

Resources

The server also exposes MCP resources for direct access:

Resource URI	Content
`prototyper://tokens/css`	Full design tokens CSS
`prototyper://docs/components/{name}`	Component documentation

Environment Variables

Variable	Default	Description
`PROTOTYPER_UI_BASE_URL`	`https://prototyper-ui.com`	Override the base URL (useful for local development)

Local Development

Point the MCP server at your local docs instance:

PROTOTYPER_UI_BASE_URL=http://localhost:3333 npx @prototyperai/mcp-server@latest

On this page