Spire UI MCP Server

Model Context Protocol server that enables Claude to understand and work with the Spire UI component library.

Tools

| Tool | Description | |------|-------------| | search_components | Fuzzy search for components by name | | get_component_details | Get full source code and documentation for a component | | get_style_tokens | Get CSS design tokens (colors, spacing, typography) | | get_theme_config | Get semantic theme configuration | | list_all_components | List all available components |

Setup

1. Install dependencies

cd packages/mcp
pnpm install

2. Build

pnpm build

3. Configure Claude Desktop

Add to your Claude Desktop config (claude_desktop_config.json):

Windows:

{
  "mcpServers": {
    "spire-ui": {
      "command": "node",
      "args": ["C:/Work/vue-library/packages/mcp/dist/index.js"]
    }
  }
}

macOS/Linux:

{
  "mcpServers": {
    "spire-ui": {
      "command": "node",
      "args": ["/path/to/vue-library/packages/mcp/dist/index.js"]
    }
  }
}

Config file locations:

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

4. Restart Claude Desktop

After adding the configuration, restart Claude Desktop to load the MCP server.

Usage Examples

Once configured, Claude can use these tools automatically:

Search for components:

"What table components are available?"

Claude calls search_components("table") → Returns DataTable

Get component details:

"Show me how to use the DatePicker"

Claude calls get_component_details("DatePicker") → Returns source + docs

Get design tokens:

"What colors are available in the design system?"

Claude calls get_style_tokens() → Returns CSS variables

Development

# Watch mode
pnpm dev

# Run directly (for testing)
pnpm start