Getting started

MCP for coding agents

Give Claude Code, Codex, Cursor, Windsurf, or Zed the real ABBA UI component and token catalogue instead of asking them to guess at prop names.

What it does

The ABBA UI MCP server is a read-only Model Context Protocol server. It bundles the same registry used by this documentation site, so an agent can look up component props, search by intent, inspect CSS tokens, and retrieve theming or setup guidance.

  • list_components — browse the component catalogue.
  • get_component — inspect props, examples, and accessibility behavior.
  • search_components — find a component by intent or near match.
  • list_tokens and find_token — inspect the CSS token system.
  • get_theming and get_setup — retrieve integration guidance.

Install the server

The server runs through npx, so you do not need to add it to your application's dependencies:

npx -y @abbainitiative/mcp

Claude Code

Run this command once in your terminal:

claude mcp add abba-ui -- npx -y @abbainitiative/mcp

Check the connection inside Claude Code with /mcp.

Codex

Add the following entry to ~/.codex/config.toml:

[mcp_servers.abba-ui]
command = "npx"
args = ["-y", "@abbainitiative/mcp"]

Cursor, Windsurf, Zed, and other clients

Add the equivalent server definition to the client's MCP configuration:

{
  "mcpServers": {
    "abba-ui": {
      "command": "npx",
      "args": ["-y", "@abbainitiative/mcp"]
    }
  }
}

Pinning a version

The unpinned command always fetches the latest published server. For repeatable team configuration, pin a release explicitly:

npx -y @abbainitiative/mcp@0.1.0

What it cannot do

Every tool is read-only. The server does not write files, modify your project, or make network requests after it starts. It only answers questions from the bundled ABBA UI catalogue.

Need the component package first? Follow the installation guide, then return here to connect your coding agent.