mcp

Model Context Protocol (MCP) server providing Vuetify component information and documentation to any MCP-compatible client or IDE.

Overview

The Vuetify Model Context Protocol (MCP) server bridges the gap between Vuetify's powerful component library and AI-assisted development environments. This integration enables seamless access to Vuetify's extensive component ecosystem directly within your development workflow.

This MCP server enables IDEs and other Model Context clients to assist with:

• Generating Vuetify components with proper props and attributes
• Creating common UI layouts and patterns following best practices
• Providing comprehensive information about Vuetify features and APIs
• Accessing installation guides, FAQs, and release notes without leaving your IDE
• Working with @vuetify/v0 composables and headless components for building custom design systems

By connecting your development environment to the Vuetify MCP server, you gain AI-powered assistance that understands Vuetify's component structure, styling conventions, and implementation details.

Quick Start

Hosted HTTP Server (Easiest)

Two URLs. Use /mcp unless you subscribe to Vuetify One.

URL	Auth	Tools
https://mcp.vuetifyjs.com/mcp	none	docs, APIs, install/upgrade guides
https://mcp.vuetifyjs.com/one	Vuetify One OAuth	docs plus ecosystem sites (Bin, Play, Link, and the rest of One)

The claude CLI below is Claude Code, not Claude Desktop — see Claude Desktop for that GUI client.

# Claude Code — public docs
claude mcp add --transport http vuetify-mcp https://mcp.vuetifyjs.com/mcp

# Optional — authenticate with Vuetify One
claude mcp add --transport http vuetify-one https://mcp.vuetifyjs.com/one

Grok Bot / Cursor Agents: add /mcp for docs (no Authorize card). Add /one to authenticate with Vuetify One; subscribers can then use ecosystem sites from that connector. Do not paste an API key.

Local Installation

Run Vuetify MCP locally:

# Start the Vuetify MCP server
npx -y @vuetify/mcp

This command downloads and runs the latest version of the Vuetify MCP server, making it immediately available to your MCP-compatible clients.

Cursor / Agent Plugin

This repo is an Agent Plugins 1.0.0 package (plugin.json + mcp.json) that points compatible clients at the hosted server.

• Hosted MCP (docs): https://mcp.vuetifyjs.com/mcp
• Hosted MCP (One / OAuth): https://mcp.vuetifyjs.com/one
• Privacy: https://vuetifyjs.com/en/legal/mcp-privacy

Local test: copy or symlink this repo to ~/.cursor/plugins/local/vuetify-mcp.

Configuration

You can configure the Vuetify MCP server in your IDE or client by running the interactive CLI or by manually updating your settings file.

Using the Interactive CLI

The interactive CLI provides the simplest way to configure your environment:

# Configure for hosted remote server
npx -y @vuetify/mcp config --remote

# Or configure for local installation
npx -y @vuetify/mcp config

The CLI will:

1. Detect supported IDEs on your system (VS Code, Claude, Cursor, Trae, Windsurf)
2. Prompt you if multiple IDEs are found
3. Apply the necessary settings automatically to your selected environment
4. Use the hosted server (with --remote) or local installation

Manual Configuration

Below are the locations and JSON snippets for each supported environment. Copy the JSON into your client or IDE settings file at the specified path.

IDE	Settings File Path	JSON Key Path
VSCode	<user home>/.config/Code/User/settings.json	mcp.servers.vuetify-mcp
Claude	<user home>/Library/Application Support/Claude/claude_desktop_config.json (macOS)%APPDATA%\Claude\claude_desktop_config.json (Windows)	mcpServers.vuetify-mcp
Cursor	<user home>/.config/Cursor/User/mcp.json	mcpServers.vuetify-mcp
Trae	<user home>/.config/Trae/User/mcp.json	mcpServers.vuetify-mcp
Windsurf	<user home>/.config/Windsurf/User/mcp.json	mcpServers.vuetify-mcp

Local stdio (most IDEs):

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

Hosted remote server (most IDEs):

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

Omit vuetify-one unless you have a Vuetify One subscription.

Claude Desktop

Claude Desktop (the GUI app, distinct from the Claude Code CLI) does not support direct HTTP transport in claude_desktop_config.json — it only accepts stdio servers. Pick one of the configs below.

Local stdio:

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

Hosted via mcp-remote bridge (consumes the hosted server over stdio):

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

Hosted via mcp-remote on Windows + WSL2:

This is the beginning of the README. Read the rest at the original. Read the full README ↗