MCP SERVER

Cathode UI ships a Model Context Protocol server so AI coding agents (Claude Code, Cursor, etc.) can discover and query the design system without scraping source. Four tools, zero network calls — just reads the local cathode.manifest.json and tokens.json.

Why

Design systems are tricky for LLMs: the component list, prop shapes, acceptable accent values, motion states, a11y expectations — they change over time and aren't obvious from source alone. The manifest encodes all of this intent-rich metadata. The MCP server surfaces it as tool calls so an agent can pull answers at authoring time.

Tools

Tool	Use
`cathode_list_components()`	Start here. Returns every component with a one-line summary.
`cathode_get_component(name)`	Full spec for a named component — props, variants, motion states, a11y, feedback, examples.
`cathode_get_tokens(theme?)`	Resolved color set for a theme plus the theme-independent type / spacing / motion / sound / haptic tokens.
`cathode_search(query)`	Fuzzy match against names + summaries. Use when you have intent but not a component name.

Register in Claude Code

// .mcp.json
{
  "mcpServers": {
    "cathode-ui": {
      "command": "node",
      "args": ["/path/to/cathode-ui/packages/mcp-server/dist/server.js"]
    }
  }
}

After publishing to npm the command simplifies to npx -y @cathode-ui/mcp.

Register in Cursor / VS Code

Same JSON shape, pasted into each editor's MCP settings. The protocol is identical across clients.

What an agent interaction looks like

User: "Build me a status panel with three tiles in Cathode UI."

Agent (behind the scenes):
  → cathode_list_components()
  → cathode_get_component("StatusTile")
  → cathode_get_component("TerminalFrame")
  → cathode_get_tokens("dark")
  → writes code using StatusTile with the correct prop shapes,
    accent values, and icon slots — first try, no scraping.

The manifest also lives at cathode.manifest.json in the repo root for agents that can read files directly but don't speak MCP.