vite-vue-mcp-inspect

vite-vue-mcp-inspect

A Vite plugin that exposes your running Vue app as an MCP server — so AI assistants can inspect and mutate your app state in real time.

Give your AI coding assistant runtime superpowers during development: read component trees, peek at Pinia stores, navigate routes, change i18n locales, and more — all without leaving the chat.

Install

pnpm add -D vite-vue-mcp-inspect
# or
npm install -D vite-vue-mcp-inspect

Setup

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

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

Start your dev server. The MCP endpoint will be live at:

http://localhost:5173/__mcp/mcp

The plugin also auto-writes MCP config entries for Cursor, Windsurf, and VS Code when their config directories are detected — no manual wiring needed.

What your AI can do

IDE Integration

The plugin auto-configures MCP entries when it detects the following config directories in your project root:

To opt out of a specific IDE or change the server name:

VueMcp({
  updateVscodeMcpJson: false,
  updateCursorMcpJson: { serverName: 'my-app' },
  updateClaudeDesktopConfig: true, // opt in
})

Configuration

VueMcp({
  host: 'localhost',         // hostname used in the printed MCP URL
  mcpPath: '/__mcp',        // route prefix for MCP HTTP endpoints
  browserTimeout: 10_000,   // ms to wait for browser-side tool responses
  printUrl: true,           // print MCP URL on dev server start
  appendTo: undefined,      // inject client into a specific module instead of index.html

  updateCursorMcpJson: true,
  updateWindsurfMcpJson: true,
  updateVscodeMcpJson: true,
  updateClaudeDesktopConfig: false,

  // replace built-in MCP server entirely
  mcpServer: async (vite, ctx) => { /* return McpServer */ },

  // add custom tools on top of built-in ones
  mcpServerSetup: async (server, vite) => { /* add tools to server */ },
})

Options reference

HTTPS support

When Vite runs with server.https, the printed MCP URL automatically uses https://:

import fs from 'node:fs'
import { defineConfig } from 'vite'
import VueMcp from 'vite-vue-mcp-inspect'

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('./certs/localhost-key.pem'),
      cert: fs.readFileSync('./certs/localhost.pem'),
    },
  },
  plugins: [VueMcp()],
})

Multi-tab behaviour

When multiple browser tabs are open, MCP requests are routed to the most recently connected tab. If that tab is closed, the next request falls back to a broadcast and the first responding tab takes over.

Contributing

pnpm install
pnpm play           # start playground + MCP endpoint at http://localhost:5173/__mcp/mcp
pnpm dev            # watch-build the plugin package
pnpm build          # production build
pnpm test           # run all tests
pnpm test:unit      # unit tests only
pnpm test:browser   # browser integration tests (requires running playground)
pnpm typecheck      # TypeScript checks
pnpm lint           # oxlint

License

MIT