Volt UI Logo

AI Integration (MCP)

Connect any AI assistant to a hosted MCP server that knows every Volt UI component, variant, theme, and CLI command — no local setup required.

How it works

The Volt UI MCP server runs on Cloudflare Pages at https://volt-ui.pages.dev/api/mcp. Point your AI agent at that URL — it exposes tools to list components, get usage examples, query the theme system, and generate CLI commands.

Quick Setup

Run the interactive installer from your project directory:

npx volt-ui-mcp

It asks which agent(s) to set up, then writes the right config files automatically. You can also pass the agent directly:

# one agent
npx volt-ui-mcp claude
npx volt-ui-mcp cursor
# multiple
npx volt-ui-mcp cursor copilot

Supported Agents

Claude

MCP native

Claude Desktop and Claude Code — full tool access via the hosted MCP server.

npx volt-ui-mcp claude

Writes .claude/mcp.json and patches the Claude Desktop global config if found.

Cursor

MCP native

Full MCP support plus a .cursorrules file with component context for inline suggestions.

npx volt-ui-mcp cursor

Writes .cursor/mcp.json and .cursorrules.

Windsurf

MCP native

Codeium's Windsurf editor with native MCP support.

npx volt-ui-mcp windsurf

Writes .codeium/windsurf/mcp_config.json.

GitHub Copilot

instructions

Copilot doesn't support MCP HTTP yet — the installer writes a Copilot instructions file and VS Code snippets instead.

npx volt-ui-mcp copilot

Writes .github/copilot-instructions.md and .vscode/volt-snippets.code-snippets.

Manual Configuration

For MCP-native agents, add this entry to your config file: 

{
  "mcpServers": {
    "volt-ui": {
      "type": "url",
      "url": "https://volt-ui.pages.dev/api/mcp"
    }
  }
}

Config file locations:

  • Claude Desktop — ~/Library/Application Support/Claude/claude_desktop_config.json
  • Claude Code — .claude/mcp.json in your project
  • Cursor — .cursor/mcp.json in your project
  • Windsurf — .codeium/windsurf/mcp_config.json in your project

What AI understands

  • 17 components — button, card, input, tabs, accordion, select, and more
  • Correct selectors — ui-button, ui-card, ui-form-field and all sub-components
  • Variants & inputs — solid, outline, ghost, destructive + sizes
  • Theme system — 5 colors × 5 styles, provideVoltTheme and applyVoltTheme
  • CLI commands — npx volt add, npx volt init, npx volt list
  • Angular patterns — standalone components, zoneless signals, OnPush, CVA variants, ng-primitives host directives

Example prompts

After setup, try asking your AI assistant:

"Create a login form with Volt UI card, form-field, input, and button"
"Add a settings page with Volt UI tabs for Account and Security sections"
"Build a navigation header using Volt UI navigation-menu with dropdown items"
"Create a data table with Volt UI badge for status and avatar for user column"
"Apply the ember color with brutal style to this app using provideVoltTheme"

API reference

MCP Server

GET https://volt-ui.pages.dev/api/mcp — server info & tool list

Setup configs

GET https://volt-ui.pages.dev/api/mcp/setup?agent=claude — exact files to write per agent