Vuetify MCP

Vuetify MCP is a Model Context Protocol↗︎ server that gives AI assistants structured access to Vuetify 3/4 and v0 APIs, install/upgrade/breaking-change docs, and — with Vuetify One↗︎ — bins, playgrounds, and links. Unlike llms.txt, MCP is real-time and queryable.

The hosted server is https://mcp.vuetifyjs.com/mcp↗︎ (streamable HTTP). Documentation and API tools need no account; bins, playgrounds, and links prompt Vuetify One OAuth.

Edit this page

Report a Bug

Open issues

Copy Markdown

BeginnerAug 18, 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

Cursor

Cursor↗︎ is an AI IDE. Add the hosted server from Customize → MCPs in the sidebar, or write it to .cursor/mcp.json (project) or ~/.cursor/mcp.json (global):

json

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

You can also load the plugin from vuetifyjs/mcp↗︎.

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

Grok / Grok Build

Grok↗︎ users add a BYO Custom connector. There is no official Grok catalog listing. This is grok.com + the Grok Build CLI, not Grok Bot.

Go to https://grok.com/connectors↗︎
Click New Connector, then select Custom
Enter the MCP server URL https://mcp.vuetifyjs.com/mcp (streamable HTTP) and complete any required authentication

Documentation and API tools are public; bins, playgrounds, and links prompt Vuetify One OAuth on demand. Do not paste an API key.

Grok Build / CLI:

bash

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

Or edit ~/.grok/config.toml (user) or .grok/config.toml (project):

toml

[mcp_servers.vuetify-mcp]
url = "https://mcp.vuetifyjs.com/mcp"

Codex

OpenAI Codex↗︎ CLI, ChatGPT desktop, and the IDE extension share ~/.codex/config.toml (project: .codex/config.toml, trusted projects only):

toml

[mcp_servers.vuetify-mcp]
url = "https://mcp.vuetifyjs.com/mcp"

Or in ChatGPT / the IDE: Settings → MCP servers → Add server → Streamable HTTP and the URL above.

Documentation and API tools need no login. When One tools are used, Codex can prompt codex mcp login vuetify-mcp.

Kimi CLI

Kimi Code↗︎ reads ~/.kimi-code/mcp.json (or $KIMI_CODE_HOME/mcp.json) and .kimi-code/mcp.json (project):

json

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

Or run /mcp-config in the Kimi TUI to add the server interactively. /mcp-config login vuetify-mcp if One OAuth is needed.

Claude Desktop

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	`.cursor/mcp.json` or `~/.cursor/mcp.json`	`.cursor/mcp.json` or `~/.cursor/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

31 tools on the hosted server. Documentation and API tools are public. Bins, playgrounds, and links prompt Vuetify One OAuth.

Documentation and API

No account required.

Tool	Purpose
`get_vuetify_api_by_version`	Download/cache Vuetify API types by version
`get_component_api_by_version`	Component API (props/slots/events)
`get_directive_api_by_version`	Directive API
`get_installation_guide`	Install guides (vite, nuxt, nuxt-module, laravel, cdn, cdn-esm, vitepress, vuetify0)
`get_feature_guides`	List available feature docs
`get_feature_guide`	A specific feature guide
`get_exposed_exports`	Package exports
`get_frequently_asked_questions`	FAQ
`get_release_notes_by_version`	Release notes
`get_vuetify_one_installation_guide`	`@vuetify/one` README
`get_upgrade_guide`	Major-version upgrade guides
`get_v4_breaking_changes`	Vuetify 4 breaking changes
`get_vuetify0_installation_guide`	`@vuetify/v0` install guide
`get_vuetify0_package_guide`	Package-specific v0 documentation
`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_skill`	`SKILL.md` patterns and anti-patterns
`create_bug_report`	Prefill a GitHub issue link

Vuetify One

These prompt Vuetify One↗︎ OAuth when the assistant needs them. They are not configured with a pasted API key.

Tool	Purpose
`create_vuetify_bin`	Create a Play bin↗︎
`get_all_bins`	List your bins
`update_vuetify_bin`	Update a bin
`get_bin`	Fetch a bin by ID
`create_vuetify_link`	Create a vtfy.link↗︎ short URL
`get_all_links`	List your links
`create_vuetify_playground`	Create a playground (Vue SFC)
`get_all_playgrounds`	List your playgrounds
`update_vuetify_playground`	Update a playground
`get_playground`	Fetch a playground by ID

Example Prompts

Install Vuetify 4 in a fresh Vite + Vue project the documented way
What’s the current VBtn API (props, slots, events)?
Scan this repo for Vuetify 3 patterns that break in v4
List Vuetify0 selection composables and when to use each
Create a Play bin with a VDataTable example (needs One)
Make a vtfy.link for this playground (needs One)

Workflow

When using AI to build headless v0 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

For Vuetify 3/4 work, start with get_installation_guide, get_component_api_by_version, get_upgrade_guide, or get_v4_breaking_changes instead.

Authentication

Connect at https://mcp.vuetifyjs.com/mcp↗︎ (streamable HTTP).

Public — documentation and API tools need no login.
Vuetify One OAuth — bins, playgrounds, and links prompt a Vuetify One sign-in when used. Do not paste an API key to use them on the hosted server.

Advanced: API key

Local or self-hosted setups can still send a Vuetify API key. This is not the hosted happy path.

json

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

bash

claude mcp add --transport http vuetify-mcp https://mcp.vuetifyjs.com/mcp \
  -e 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. ↩︎