@trycompai/design-system-mcp

MCP (Model Context Protocol) server for the @trycompai/design-system component library. Provides AI assistants like Claude Code, Cursor, and GitHub Copilot with access to component documentation, design tokens, and usage guidelines.

Installation

Claude Code

claude mcp add trycompai-design-system -- npx -y @trycompai/design-system-mcp

Cursor / VS Code

Add to your .cursor/mcp.json or .vscode/mcp.json:

{
  "mcpServers": {
    "trycompai-design-system": {
      "command": "npx",
      "args": ["-y", "@trycompai/design-system-mcp"]
    }
  }
}

Environment Variable

If running outside the design-system repo, set DS_REPO_ROOT to point to the repo:

DS_REPO_ROOT=/path/to/design-system npx @trycompai/design-system-mcp

Available Tools

Component Documentation (Recommended for Agents)

| Tool | Description | |------|-------------| | get_component_docs | RECOMMENDED - Get comprehensive docs for a component including props, variants, and usage examples | | list_components | List all component source files (atoms/molecules/organisms) | | get_component_source | Fetch raw component source by id (e.g., molecules/card) | | search | Search component ids and optionally source content |

Usage Guidelines

| Tool | Description | |------|-------------| | get_usage_guidelines | Get usage rules - IMPORTANT: Components do NOT accept className | | installation | Get framework-specific installation instructions |

Design Tokens

| Tool | Description | |------|-------------| | get_theme | Get CSS variables and design tokens for light/dark mode |

Storybook Stories

| Tool | Description | |------|-------------| | list_stories | List all Storybook story files | | get_story_source | Fetch story source by name (e.g., Card) | | suggest_story_for_component | Best-guess story name for a component id |

Critical Usage Note

Components do NOT accept className or style props. Use variants and props only:

// Will NOT compile
<Button className="bg-red-500">Delete</Button>

// Correct
<Button variant="destructive">Delete</Button>

For layout concerns, use wrapper elements:

<div className="w-full">
  <Button>Full Width</Button>
</div>

Development

From the design-system repo root:

# Run the MCP server
pnpm --filter @trycompai/design-system-mcp dev

# Run smoke test
pnpm --filter @trycompai/design-system-mcp smoke

# Build
pnpm --filter @trycompai/design-system-mcp build

License

MIT