Volt UI MCP Server

An MCP (Model Context Protocol) server that exposes Volt UI components, props, documentation, and design tokens to AI assistants.

Features

• Component Discovery: List and search all Volt UI components
• Props & Documentation: Get detailed component props, descriptions, and usage examples
• Design Tokens: Access CSS variables, semantic colors, and theming information
• Theme Support: Light and dark theme token values

Available Tools

| Tool | Description | |------|-------------| | list_components | List all available Volt UI components | | get_component | Get detailed information about a specific component | | search_components | Search components by name, description, or props | | list_tokens | List design tokens with optional filtering | | get_token | Get details for a specific design token | | search_tokens | Search tokens by name or value |

Setup Instructions

Claude Desktop

Add the following to your Claude Desktop configuration file:

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

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

Claude Code (VS Code Extension)

Add to your VS Code settings or project's .vscode/mcp.json:

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

Or add to ~/.claude/settings.json for global access:

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

Cursor

Add to your Cursor MCP configuration (.cursor/mcp.json in your project or global settings):

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

Windsurf

Add to your Windsurf MCP configuration:

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

GitHub Copilot (VS Code)

Add to your VS Code settings.json:

{
  "github.copilot.chat.mcpServers": {
    "volt-ui": {
      "command": "npx",
      "args": ["-y", "@epilot/volt-ui-mcp"]
    }
  }
}

Local Development (Testing)

For testing during development, point to the local path:

{
  "mcpServers": {
    "volt-ui": {
      "command": "node",
      "args": ["/path/to/volt-ui/tools/volt-ui-mcp/index.js"]
    }
  }
}

Usage Examples

Once configured, you can ask your AI assistant questions like:

• "What props does the Button component accept?"
• "Show me how to use the Dialog component"
• "What are the available color tokens in Volt UI?"
• "How do I set up dark mode?"
• "Search for components with loading states"

For Maintainers

Building the Registry

The registry is automatically built during npm publish via the prepack script. To manually rebuild:

# From the volt-ui repo root
bun run build:mcp

This parses:

• Component exports from src/index.ts
• Documentation from docs/content/docs/components/*.mdx
• Design tokens from src/styles/*.css

Publishing

cd tools/volt-ui-mcp
npm publish

The prepack script automatically runs build:mcp to ensure the registry is up-to-date.

Versioning

Update the version in package.json before publishing:

cd tools/volt-ui-mcp
npm version patch  # or minor, major
npm publish

Resources

The server also exposes MCP resources:

| URI | Description | |-----|-------------| | volt-ui://components | List of all components | | volt-ui://tokens | List of all design tokens | | volt-ui://components/{name} | Specific component details | | volt-ui://tokens/{name} | Specific token details |