vite-plugin-vue-mcp

MCP.Pizza Chef: webfansplz

Added to a Vue project's build settings, it opens a small local link while your app is running in the browser, so an assistant can list the component tree, read the values a component currently holds, change them, highlight a component on the page, and inspect routes and Pinia stores. Cursor is wired up automatically. This is a tool for people building Vue apps rather than for everyday chat, and it has had no updates since April 2025.

Unmaintained · no commits since April 2025
Coding

Use This MCP server To

Show my assistant the component tree of my app Read the values a component is holding right now Change a component's state to test an edge case Highlight a component on screen to find it Ask which routes my app defines

README

vite-plugin-vue-mcp

npm version npm downloads bundle License

Vite plugin that enables a MCP server for your Vue app to provide information about the component tree, state, routes, and pinia tree and state.

Installation 📦

pnpm install vite-plugin-vue-mcp -D

Usage 🔨

// vite.config.ts
import { VueMcp } from 'vite-plugin-vue-mcp'

export default defineConfig({
  plugins: [VueMcp()],
})

Then the MCP server will be available at http://localhost:[port]/__mcp/sse.

If you are using Cursor, create a .cursor/mcp.json file in your project root, this plugin will automatically update it for you. For more details about the MCP, check the official Cursor documentation.

Options

vite-plugin-vue-mcp FAQ

Who is this for?
People building a Vue app. It is added to the project's build setup, not to a chat app.
Which assistants does it work with?
Cursor is configured for you automatically, and any client that accepts a local server address can connect.
Do I need a key or an account?
No. Everything runs on your own machine while the development server is up.
Does the app have to be open in a browser?
Yes. If the page is not running, the tools return nothing.
Can I use this to work out why a component shows the wrong value?
Yes — the assistant reads that component's live values instead of guessing from the code.
Is it still maintained?
The last commit was April 2025, so it may lag behind newer Vue and Vite releases.