vite-plugin-vue-mcp
A Vite plugin with an MCP server that shows the agent the components, routes and Pinia stores of a running Vue app
- 578 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent can change the state of the running app
- The plugin opens the `/__mcp` endpoint on the dev server without authorization, and the `host` option changes the address it listens on
- The plugin edits `.cursor/mcp.json` on its own unless `updateCursorMcpJson: false` is set
Install
- Works in
Manual install
pnpm install vite-plugin-vue-mcp -DThe package installs as a dev dependency of a Vite project.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent can change the state of the running app
- The plugin opens the `/__mcp` endpoint on the dev server without authorization, and the `host` option changes the address it listens on
- The plugin edits `.cursor/mcp.json` on its own unless `updateCursorMcpJson: false` is set
This is third-party code. Review the repository files before installing.
What it does
The vite-plugin-vue-mcp plugin goes into `vite.config.ts` and starts an MCP server beside the dev server of a Vue app. The agent takes its data from the page open in the browser: the component tree and state, router information and Pinia stores. There are seven tools: `get-component-tree`, `get-component-state`, `edit-component-state`, `highlight-component`, `get-router-info`, `get-pinia-tree` and `get-pinia-state`. With `edit-component-state` the agent puts a new value into a component's state. `highlight-component` marks a component on the page. The server answers at http://localhost:port/__mcp/sse. If the project root has a .cursor folder, the plugin writes this address into `.cursor/mcp.json` by itself.
Who it is for. For developers of Vue apps built on Vite who debug the interface together with an agent, for example in Cursor.
Good fit when
- The agent needs to learn which components make up a page without rereading every project file
- You want to know a value in a component's state or a Pinia store while the app runs
- You need to highlight on the page the component you are discussing with the agent
- To reproduce a bug you need to quickly put a different value into a component's state
Not a fit when
- The app is not written in Vue or is not built with Vite: the plugin hooks into the Vite dev server
- You need to analyze the sources without running the project: the plugin works only with a running app
- The project is on Nuxt and you want an overview of its configuration and auto-imports: a dedicated Nuxt module fits better
Example request
Show the page's component tree, the current state of the Pinia contacts store, and highlight the UserInfo component.MCP
- Transport
- sse
- Authentication
- not required
Limitations
The built-in server works over the SSE transport only, so the agent's client has to support it. The plugin adds its own script to the page. In clients other than Cursor you enter the server address in the settings by hand. The author does not list compatible Vue and Vite versions. Test the plugin on your version before you add it to a shared team config. A wiring example sits in the playground folder of the repository. The last commit was made in April 2025. The license is MIT.
How to disable. Remove `VueMcp()` from the plugins array in `vite.config.ts` and uninstall the package with `pnpm remove vite-plugin-vue-mcp`. The plugin added the server entry to `.cursor/mcp.json` itself, and it is called `vue-mcp` by default. Delete it by hand. To keep the plugin away from that file, set `updateCursorMcpJson: false`.
FAQ
How do I set my own server name in the Cursor settings?
By default the plugin names the entry `vue-mcp`. The `updateCursorMcpJson.serverName` option sets a different name.
What does the agent need to change a component's state?
The `edit-component-state` tool takes four parameters: `componentName`, `path`, `value` and `valueType`. The tool writes the value at the given path straight into the running app.
Can I plug in my own MCP server instead of the built-in one?
Yes. The `mcpServer` option takes a function that returns your server, and the seven standard tools are then not registered.
How do I add my own tools next to the standard ones?
The `mcpServerSetup` option is called when the server is created and receives the server object together with the Vite dev server. You register extra tools on that object. The function can also return a new server to replace the standard one.
How do I change the plugin's MCP server address?
By default the server listens on localhost and answers at the `/__mcp` path. The `host` and `mcpPath` options change the address.
Discussion
No questions or reviews yet.
Related
MCP serversNuxt MCP Dev
nuxt-mcp-dev / vite-plugin-mcp
A Nuxt module and a Vite plugin start an MCP server on the dev server port so the agent sees config, pages, components, auto-imports and the module graph
Vibe MCP gives an agent components, icons and tokens of the monday.com Vibe design system
Svelte's official MCP server and plugin: current docs, component autofixing and Svelte 5 skills
Connects an agent to a running Next.js 16+ dev server: errors, routes, logs and docs for your installed version
An MCP server plus a Chrome extension: pick a DOM element by Option-click and the agent gets its text, styles and selector
Shadcn UI MCP Server
Shadcn UI v4 MCP Server
An MCP server that gives the agent shadcn/ui component source, demos and blocks for React, Svelte, Vue and React Native
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| vite-plugin-vue-mcp (this entry) | no | not required | 578 | |
| Nuxt MCP Dev | no | not required | 913 | a Nuxt module and Vite plugin with MCP on the dev server port: the agent sees config, pages, components, auto-imports and the module graph, while this plugin reads the state of the running page |
| vue-skills | no | 3,216 | skills with Vue 3 practices that teach an agent how to write code and do not show the running app |
README in short
The project page starts with installation, wiring in `vite.config.ts` and a table of options. Each of the seven tools is shown in a short animation. The page ends with an architecture diagram and a link to Anthony Fu's vite-plugin-mcp, which the author built on.