mcp

The Vuetify MCP server exposes a range of tools to help IDEs and MCP-compatible clients understand Vuetify components, APIs, and usage patterns. It provides API helpers such as get_vuetify_api_by_version, get_component_api_by_version, and get_directive_api_by_version to fetch type definitions, component props, events, slots, and directives. It also includes documentation utilities like get_installation_guide and get_available_features to help developers integrate Vuetify into their projects and IDEs. Once the MCP server is running, clients can query these tools to generate prop tables, usage examples, and installation steps directly within the development environment for faster, AI-assisted development.

Prerequisites:

• Node.js and npm installed on your machine
• Internet access to fetch the MCP server package

Options to run the server:

1. Quick start with npx (no local install):

   • Ensure you have NPM 7+ for best npx behavior
   • Run: npx -y @vuetify/mcp
   • This downloads and starts the latest Vuetify MCP server and makes it available to MCP clients

2. Local installation for persistent access:

   • Install via npm and run locally:
     • npm install -g @vuetify/mcp
     • vuetify-mcp (or whichever command is configured by your environment)
   • Or run directly with npx as shown in option 1

3. Configuration for IDEs or clients:

   • Local stdio configuration example (no remote server): { "mcpServers": { "vuetify-mcp": { "command": "npx", "args": ["-y", "@vuetify/mcp"] } } }
   • Hosted remote configuration (if you use a remote server): { "mcpServers": { "vuetify-mcp": { "url": "https://mcp.vuetifyjs.com/mcp" } } }

Notes:

• You can use the hosted server for quick setup or run locally for offline/isolated development.
• If you need authentication with an API key for certain features, pass it via environment variables (for local stdio) or headers (for HTTP remote setups) as described in the README’s security sections.

Tips and common considerations:

• If you use local stdio mode, you can supply VUETIFY_API_KEY as an environment variable when starting the MCP server to access API or installation guidance that requires authentication.
• For HTTP/remote transports, authentication is handled via HTTP headers (Authorization: Bearer <token> or X-Vuetify-Api-Key: <token>).
• Some IDEs and tools auto-detect supported environments (VS Code, Claude, Cursor, Trae, Windsurf) when configuring. Use the interactive CLI to configure remote versus local setups.
• The server exposes both API and Documentation tools, enabling dynamic generation of prop definitions, component APIs, and installation guides inside your IDE or editor.