drio
Open app

vite-plugin-vue-mcp

Source

Vite plugin that enables a MCP server helping models to understand your Vue app better.

Catalog onlyCatalog onlySTDIO

Overview

vite-plugin-vue-mcp is a Vite plugin that enables a Model Context Protocol (MCP) server to help models understand your Vue application better by providing information about the component tree, state, routes, and Pinia state.

To use this plugin, install it via npm with the command pnpm install vite-plugin-vue-mcp -D, then import and include it in your Vite configuration file as follows: ts import { VueMcp } from 'vite-plugin-vue-mcp' export default defineConfig({ plugins: [VueMcp()] }) The MCP server will be available at http://localhost:[port]/__mcp/sse.

  • Provides a server for accessing the Vue component tree. - Retrieves the state of specific components. - Offers information about the Vue router and Pinia state. - Automatically updates the MCP server address in the Cursor configuration file if applicable.
  1. Debugging and visualizing the component structure of a Vue application.
  2. Monitoring the state of components during development.
  3. Integrating with tools that utilize the Model Context Protocol for enhanced development workflows.

Add to your AI client

Use these steps to connect vite-plugin-vue-mcp in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "vite-plugin-vue-mcp-webfansplz": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-vite-plugin-vue-mcp-webfansplz"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "vite-plugin-vue-mcp-webfansplz": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-vite-plugin-vue-mcp-webfansplz"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "vite-plugin-vue-mcp-webfansplz": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-vite-plugin-vue-mcp-webfansplz"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "vite-plugin-vue-mcp-webfansplz": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-vite-plugin-vue-mcp-webfansplz"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "vite-plugin-vue-mcp-webfansplz": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-vite-plugin-vue-mcp-webfansplz"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "vite-plugin-vue-mcp-webfansplz": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-vite-plugin-vue-mcp-webfansplz"
      ]
    }
  }
}

FAQ

**What is the MCP server used for?**

The MCP server provides real-time information about your Vue app's components, state, and routing, which can be useful for debugging and development.

**Is there any configuration needed for the MCP server?**

Basic configuration is done through the Vite config file, but additional options can be set for custom behavior.

**Can I use this plugin with other Vite plugins?**

Yes, vite-plugin-vue-mcp can be used alongside other Vite plugins without issues.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":2991,"uuid":"3eace989-4240-4ae2-9bb2-56437896a036","name":"vite-plugin-vue-mcp","title":"vite-plugin-vue-mcp","description":"Vite plugin that enables a MCP server helping models to understand your Vue app better.","avatar_url":"https://avatars.githubusercontent.com/u/22515951?v=4","created_at":"2025-03-16T11:48:57.744Z","updated_at":"2025-03-16T11:57:29.145Z","status":"created","author_name":"webfansplz","author_avatar_url":"https://avatars.githubusercontent.com/u/22515951?v=4","tags":"[]","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/webfansplz/vite-plugin-vue-mcp","target":"_self","content":"$29","summary":"$2a","img_url":"https://camo.githubusercontent.com/709fb105e1e3e249e3f1d8779c4ef0d76df7d69af20aae0a7a0cebda5a9976c7/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f766974652d706c7567696e2d7675652d6d63703f7374796c653d666c617426636f6c6f72413d30383066313226636f6c6f72423d316661363639","type":null,"metadata":"{\"star\":\"377\",\"license\":\"MIT license\",\"language\":\"Vue\",\"is_official\":false,\"latest_commit_time\":\"2025-03-29 16:16:33\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools