MCP Server

Give your AI assistant direct access to AniUI components, theme tokens, and usage patterns.

The AniUI MCP (Model Context Protocol) server lets AI tools like Cursor, Claude Desktop, and Windsurf read real component source code on demand. Instead of guessing APIs, the AI pulls actual implementations and generates accurate code.

What your AI gets access to:

• 48 component source files — real code, not summaries
• Theme tokens — CSS variables and Tailwind mappings
• Usage info — imports, variants, and props for each component
• Component pattern — how to build new AniUI-style components

Setup for Cursor

Create a .cursor/mcp.json file in your project root:

.cursor/mcp.json

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

Restart Cursor. The MCP tools will be available automatically in Cursor Chat.

Setup for Claude Desktop

Open your Claude Desktop config file:

• Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

Add the AniUI server:

claude_desktop_config.json

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

Restart Claude Desktop. You'll see a hammer icon — click it to verify the AniUI tools are listed.

Setup for Other Clients

For Windsurf or any other MCP-compatible client, add the same config to their MCP settings:

"command": "npx",
"args": ["-y", "@aniui/mcp"]

Available Tools

Tool	Description
list_components	List all 48 components with names, descriptions, and tiers
get_component	Get the full source code of any component
get_component_usage	Get import path, variants, props, and dependencies
get_theme_tokens	Get all theme CSS variables and Tailwind class mappings

Available Resources

Resource	URI	Returns
Registry	aniui://registry	Full component registry as JSON
Theme	aniui://theme	global.css with all theme variables
Pattern	aniui://pattern	Component authoring template and rules

Example

When you ask your AI "Build me a settings page using AniUI", here's what happens behind the scenes:

AI calls list_components to find relevant components (switch, card, separator)
AI calls get_component for each — gets real source code
AI calls get_theme_tokens — gets theme variables
AI generates a screen using the actual component APIs — correct imports, props, and variants

No hallucinated props. No wrong imports. Just working code.