Vuetify MCP

Vuetify MCP is a Model Context Protocol↗ server that gives AI assistants structured access to Vuetify and v0 APIs. Unlike llms.txt, MCP provides real-time, queryable documentation.

Copy Markdown

BeginnerFeb 12, 2026

Quick Start

Interactive Setup (Recommended)

Auto-detects your IDE and configures the hosted MCP server automatically:

bash

pnpm dlx @vuetify/mcp config --remote

bash

npx -y @vuetify/mcp config --remote

bash

yarn dlx @vuetify/mcp config --remote

bash

bunx @vuetify/mcp config --remote

Claude Code

Claude Code↗ is Anthropic’s agentic coding tool. Add the hosted MCP server directly via CLI:

bash

claude mcp add --transport http vuetify-mcp https://mcp.vuetifyjs.com/mcp

Vuetify CLI

Add Vuetify AI rules and context to your project with the Vuetify CLI:

bash

pnpm dlx @vuetify/cli add mcp

bash

npx @vuetify/cli add mcp

bash

yarn dlx @vuetify/cli add mcp

bash

bunx @vuetify/cli add mcp

[!NOTE] The CLI add mcp command sets up Ruler↗ project rules for AI context — it does not configure the MCP server connection. Use the interactive setup above to connect your IDE to the Vuetify MCP server.

Local Server

Run locally for offline access or custom configuration:

bash

pnpm dlx @vuetify/mcp

bash

npx -y @vuetify/mcp

bash

yarn dlx @vuetify/mcp

bash

bunx @vuetify/mcp

IDE Configuration

Manual configuration for each IDE. Use the interactive setup above for automatic configuration.

IDE	Config File (Linux)	Config File (macOS)
Claude Code	`~/.claude.json` or `.mcp.json`	`~/.claude.json` or `.mcp.json`
Claude Desktop	N/A	`~/Library/Application Support/Claude/claude_desktop_config.json`
VS Code	`~/.config/Code/User/mcp.json`	`~/Library/Application Support/Code/User/mcp.json`
Cursor	`~/.config/Cursor/User/mcp.json`	`~/Library/Application Support/Cursor/User/mcp.json`
Windsurf	`~/.config/Windsurf/User/mcp.json`	`~/Library/Application Support/Windsurf/User/mcp.json`
Trae	`~/.config/Trae/User/mcp.json`	`~/Library/Application Support/Trae/User/mcp.json`

json

{
  "mcpServers": {
    "vuetify-mcp": {
      "url": "https://mcp.vuetifyjs.com/mcp"
    }
  }
}

json

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

Available Tools

Tool	Purpose
`get_vuetify0_composable_list`	List all composables by category
`get_vuetify0_composable_guide`	Detailed composable documentation
`get_vuetify0_component_list`	List all headless components
`get_vuetify0_component_guide`	Component documentation and examples
`get_vuetify0_exports_list`	Package subpath exports
`get_vuetify0_installation_guide`	Setup instructions
`get_vuetify0_package_guide`	Package-specific documentation

Tip

The MCP server also includes tools for Vuetify 3/4 APIs, installation guides, and Vuetify Bins↗. Run tools/list to see all available tools.

Workflow

When using AI to build headless components:

Explore — get_vuetify0_composable_list to see available primitives
Learn — get_vuetify0_composable_guide for detailed documentation
Reference — get_vuetify0_component_guide for implementation patterns

Authentication

Vuetify Bins↗ require an API key from your Vuetify account.

Vuetify CLI

bash

pnpm dlx @vuetify/cli add mcp --api-key your-api-key

bash

npx @vuetify/cli add mcp --api-key your-api-key

bash

yarn dlx @vuetify/cli add mcp --api-key your-api-key

bash

bunx @vuetify/cli add mcp --api-key your-api-key

Claude Code

bash

claude mcp add --transport http vuetify-mcp https://mcp.vuetifyjs.com/mcp \
  -e VUETIFY_API_KEY=your-api-key

Manual Configuration

json

{
  "mcpServers": {
    "vuetify-mcp": {
      "url": "https://mcp.vuetifyjs.com/mcp",
      "headers": {
        "Authorization": "Bearer your-api-key"
      }
    }
  }
}

json

{
  "mcpServers": {
    "vuetify-mcp": {
      "command": "npx",
      "args": ["-y", "@vuetify/mcp"],
      "env": {
        "VUETIFY_API_KEY": "your-api-key"
      }
    }
  }
}

Self-Hosting

Run an HTTP server for team or organization access:

bash

pnpm dlx @vuetify/mcp --transport=http --port=3000 --host=0.0.0.0 --stateless

bash

npx -y @vuetify/mcp --transport=http --port=3000 --host=0.0.0.0 --stateless

bash

yarn dlx @vuetify/mcp --transport=http --port=3000 --host=0.0.0.0 --stateless

bash

bunx @vuetify/mcp --transport=http --port=3000 --host=0.0.0.0 --stateless

Configure clients to use your server URL instead of mcp.vuetifyjs.com.