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

Beginner May 1, 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

Claude Desktop↗︎ is Anthropic’s GUI app. Direct HTTP transport (url:) is not supported in claude_desktop_config.json — Claude Desktop only accepts stdio servers. Use one of the two stdio configurations below.

json

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

json

{
  "mcpServers": {
    "vuetify-mcp": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.vuetifyjs.com/mcp"]
    }
  }
}

json

{
  "mcpServers": {
    "vuetify-mcp": {
      "command": "wsl",
      "args": ["npx", "-y", "mcp-remote", "https://mcp.vuetifyjs.com/mcp"]
    }
  }
}

The first config runs the package locally over stdio. The second and third use the mcp-remote↗︎ bridge to consume the hosted server through stdio, which is the only transport Claude Desktop accepts. After editing claude_desktop_config.json, fully quit and relaunch Claude Desktop to pick up changes.

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^[1]	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.

Claude Desktop does not support direct HTTP transport. Use the stdio configs in the Claude Desktop section above instead of the hosted JSON below. ↩︎