Vite Plugin Vue MCP

The vite-plugin-vue-mcp plugin turns a Vue application into a fully‑featured Model Context Protocol (MCP) server. By exposing the component hierarchy, state, routing information and Pinia store data over a lightweight SSE endpoint, it gives AI assistants instant, structured insight into the live application. This solves the long‑standing problem of “black box” front‑end debugging: developers can now ask an assistant to walk through the component tree, inspect or modify state on the fly, and even highlight elements directly in the browser—all without leaving the IDE.

At its core, the server listens on a configurable path (default ) and streams JSON messages that describe Vue’s reactive runtime. The MCP tools it provides are intentionally simple yet powerful:

• get-component-tree and highlight-component let an assistant visualize the hierarchy and focus on a particular component.
• get-component-state and edit-component-state expose the reactive data of any component, enabling real‑time state inspection or mutation.
• get-router-info delivers the current Vue Router configuration and navigation history, which is invaluable for debugging routing bugs.
• get-pinia-tree and get-pinia-state expose the global store structure and individual store contents, giving assistants a full view of shared state.

These capabilities are delivered through a declarative API that mirrors the structure of a Vue app. A developer simply adds the plugin to their Vite config; the MCP server starts automatically, and if a Cursor project is detected it updates so the assistant can connect immediately. The plugin also supports custom server logic, allowing advanced users to replace or extend the built‑in tools without sacrificing compatibility.

Real‑world scenarios where this MCP server shines include:

1. Live debugging sessions – a developer can ask an assistant to “show me the state of ” and see a live snapshot.
2. Rapid prototyping – while tweaking components, an assistant can highlight the affected tree node and suggest related routes or store changes.
3. Automated QA – scripts can query the component tree to verify that certain UI elements exist under specific conditions.
4. Documentation generation – the server’s structured output can feed into automated component docs that include live state previews.

Because the MCP protocol is language‑agnostic, any AI tool that understands it can tap into this server. The plugin’s architecture diagram shows a clear separation between Vite’s dev server, the MCP middleware, and the browser runtime, ensuring minimal performance impact while providing maximum introspection power. In short, vite-plugin-vue-mcp transforms a Vue dev environment into an interactive knowledge base that AI assistants can query, edit, and visualize in real time.