Model Context Protocol (MCP) server for Vuetify assistance in Claude.
This MCP server provides Claude with access to Vuetify component information, layout templates, and documentation. It enables Claude to assist with:
- Generating Vuetify components with proper props
- Creating common UI layouts
- Providing information about Vuetify features
- Answering questions about the Vuetify framework
# Install dependencies
pnpm install
# Start the server
pnpm bootstrap
Run Vuetify MCP with a single command:
npx -y @vuetify/mcp --api-key=YOUR_API_KEY
To use this MCP server with Claude, add the following to your .vscode/mcp.json
file (or move it to settings.json
for global usage):
{
"mcpServers": {
"vuetify": {
"command": "npx",
"args": [
"-y",
"@vuetify/mcp"
],
"env": {
"VUETIFY_API_KEY": "your_api_key_here"
}
}
}
}
Make sure to replace /absolute/path/to
with the actual absolute path to the vuetify-mcp
directory.
Additionally, ensure that automatic discovery is enabled in your settings.json
file:
{
"chat.mcp.discovery.enabled": true
}
You can also verify the discovery and configuration by using the command palette in VS Code:
- Press
Ctrl + Shift + P
(orCmd + Shift + P
on macOS). - Search for
MCP
. - Use the available options to check the discovery and configuration settings.
The Vuetify MCP provides the following capabilities:
get_component_props
: Get detailed information about a component's properties
get_installation_guide
: Guide for installing Vuetify
vuetify-mcp/
βββ src/
β βββ index.ts # Main entry point
β βββ services/ # Core business logic
β β βββ auth.ts # Authentication service
β β βββ component.ts # Component-related service
β β βββ documentation.ts # Documentation-related service
β βββ tools/ # MCP tool definitions
β βββ component.ts # Component-related tools
β βββ documentation.ts # Documentation-related tools
β βββ transports/ # Transport wrappers
β βββ auth.ts # Authentication transport wrapper
βββ package.json # Project dependencies
βββ tsconfig.json # TypeScript configuration
βββ README.md # This file
To add new features or extend existing ones:
- Add or update service methods in the appropriate service file.
- Register the tool in the corresponding tools file.
- Build and test your changes.
This project uses the @modelcontextprotocol/sdk
package to create a Model Context Protocol server that Claude can interact with. The MCP architecture enables Claude to:
- Call specific tools defined in the server
- Receive structured responses
- Provide a better experience for Vuetify-related inquiries
The implementation follows the standard MCP patterns with:
- Server initialization using
McpServer
- Parameter validation with Zod schemas
- StdioServerTransport for communication
MIT