MCP Server

A hosted Model Context Protocol server that exposes Volt UI components, usage examples, theme info, and CLI commands as tools any compatible agent can call.

What is MCP?

The Model Context Protocol is an open standard that lets LLMs talk to external tools, resources, and prompts. The Volt UI MCP server runs at https://volt-ui.pages.dev/api/mcp and exposes a spec-compliant Streamable HTTP endpoint. Agents can list components, read detailed metadata, fetch usage examples, and even retrieve reusable prompts.

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

Server capabilities

Tools

list_components

List all available Volt UI components.

get_component

Get detailed info about a specific component.

get_usage_example

Get import paths and usage snippets.

get_theme_info

Get colors, styles, and theme provider API.

get_project_info

Get framework, naming, and architecture rules.

generate_cli_command

Generate npx @voltui/cli commands.

Resources

component://{name}

Full metadata for a single component.

theme://info

Available colors, styles, and theme helpers.

project://info

Framework, naming, and architecture overview.

Prompts

generate-volt-ui-component

Pre-filled prompt for generating a component usage example.

volt-ui-troubleshooting

Pre-filled prompt for diagnosing common Volt UI mistakes.

What the agent learns

All components — 41 components across stable and beta status labels
Correct selectors — element components vs attribute directives for overlays
Variants & inputs — solid, outline, ghost, destructive + sizes
Theme system — 5 colors × 5 styles, provideVoltTheme
CLI commands — npx @voltui/cli add , init , list
Reusable prompts — component generation and troubleshooting prompts

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

The server implements the MCP Streamable HTTP transport. It is stateless and returns JSON responses for POST requests.

POST https://volt-ui.pages.dev/api/mcp

Accept: application/json, text/event-stream

Content-Type: application/json

GET https://volt-ui.pages.dev/api/mcp returns human-readable discovery JSON (tools, resources, prompts, setup links).

MCP Server endpoint

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

Setup configs

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