vite-plugin-vue-mcp

What is vite-plugin-vue-mcp?

A Vite plugin that provides a Model Context Protocol (MCP) server for Vue applications, exposing the component tree, component state, Vue Router routes, Pinia store tree, and Pinia state. Designed for Vue developers using AI-assisted coding tools like Cursor.

How to use vite-plugin-vue-mcp?

Install the package with pnpm install vite-plugin-vue-mcp -D. Then add VueMcp() to the plugins array in vite.config.ts. After starting the Vite dev server, the MCP server listens at http://localhost:[port]/__mcp/sse. For Cursor, the plugin can automatically update the .cursor/mcp.json configuration.

Key features of vite-plugin-vue-mcp

• Retrieve the Vue component tree
• Read component state by name
• Edit component state at a specific path
• Highlight a component in the browser
• Get Vue Router route information
• Retrieve the Pinia store tree
• Read individual Pinia store state

Use cases of vite-plugin-vue-mcp

• Debugging component hierarchy and state during development
• Modifying component state live via AI assistant
• Navigating and inspecting Vue Router routes
• Exploring and debugging Pinia stores
• Enhancing AI‑powered code editors with live Vue app data

FAQ from vite-plugin-vue-mcp

Do I need my Vue application to be running to use the MCP tools?

Yes. The README states: “Please ensure the application is running in your browser before using the features.”

Can I provide a custom MCP server instead of the built‑in tools?

Yes. The mcpServer option lets you supply a completely custom MCP server; when provided, the built‑in tools are ignored.

How does vite-plugin-vue-mcp integrate with Cursor?

The plugin can automatically write or update the .cursor/mcp.json file with the MCP server URL. This behavior is enabled by default when a .cursor folder exists.

What is the default endpoint of the MCP server?

The MCP server is exposed at http://localhost:[port]/__mcp/sse.

What are the required dependencies?

Only vite-plugin-vue-mcp installed as a dev dependency is required. It integrates directly into the Vite dev server.