vite-plugin-vue-mcp: AI-Driven Code Insights & MCP Integration

Maximize model understanding of Vue apps—this Vite plugin integrates an MCP server to bridge the gap between your code and AI workflows, empowering smarter development." )

Visit Repository

✨ Developer Tools

4.4(123 reviews)

184 saves

86 comments

44% of users reported increased productivity after just one week

About vite-plugin-vue-mcp

What is vite-plugin-vue-mcp: AI-Driven Code Insights & MCP Integration?

Imagine having a "developer's x-ray goggles" for your Vue app—this plugin turns that vision into reality. vite-plugin-vue-mcp acts as a bridge between your Vue application and AI tools via the Model Context Protocol (MCP), exposing live insights into components, state, routing, and Pinia stores. Think of it as a diagnostic console for modern web apps, letting you peek under the hood without manual debugging.

How to use vite-plugin-vue-mcp: AI-Driven Code Insights & MCP Integration?

Start by installing with:

pnpm add vite-plugin-vue-mcp -D

Then insert this into your Vite config:

// vite.config.ts
import { VueMcp } from 'vite-plugin-vue-mcp'
export default defineConfig({
  plugins: [VueMcp({ host: '0.0.0.0' })],
})

Visit http://localhost:[port]/__mcp/sse to access the API endpoints. Pair with tools like Cursor for AI-powered analysis.

vite-plugin-vue-mcp Features

Key Features of vite-plugin-vue-mcp: AI-Driven Code Insights & MCP Integration?

Component Cartography: Visualize your entire component hierarchy in real-time
State Surgery: Inspect or modify reactive states with pinpoint precision
Route Radar: Monitor navigation patterns and nested route structures
Pinia Explorer: Dive deep into store structures and state mutations
Smart Highlighting: Visually isolate components in the DOM for quick debugging

Use cases of vite-plugin-vue-mcp: AI-Driven Code Insights & MCP Integration?

Perfect for:

Automated testing scenarios requiring state validation
AI-driven performance audits via Pinia state analysis
Debugging cross-component communication issues
Creating dynamic documentation from live app states
Integration with IDEs for context-aware code suggestions

vite-plugin-vue-mcp FAQ

FAQ from vite-plugin-vue-mcp: AI-Driven Code Insights & MCP Integration?

Q: Does it work with Vue 3 composition API?
A: Fully compatible - works with options and composition APIs alike

Q: Can I customize the endpoint?
A: Use mcpPath option to change from default /__mcp

Q: Why is my state update not reflecting?
A: Ensure your app is running in the browser before making MCP requests

Q: How does it integrate with CI/CD?
A: The appendTo option allows headless mode for automated workflows

Content

vite-plugin-vue-mcp

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

export interface VueMcpOptions {
  /**
   * The host to listen on, default is `localhost`
   */
  host?: string

  /**
   * Print the MCP server URL in the console
   *
   * @default true
   */
  printUrl?: boolean

  /**
   * The MCP server info. Ingored when `mcpServer` is provided
   */
  mcpServerInfo?: McpServerInfo

  /**
   * Custom MCP server, when this is provided, the built-in MCP tools will be ignored
   */
  mcpServer?: (viteServer: ViteDevServer) => Awaitable<McpServer>

  /**
   * Setup the MCP server, this is called when the MCP server is created
   * You may also return a new MCP server to replace the default one
   */
  mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable<void | McpServer>

  /**
   * The path to the MCP server, default is `/__mcp`
   */
  mcpPath?: string

  /**
   * Update the address of the MCP server in the cursor config file `.cursor/mcp.json`,
   * if `.cursor` folder exists.
   *
   * @default true
   */
  updateCursorMcpJson?: boolean | {
    enabled: boolean
    /**
     * The name of the MCP server, default is `vue-mcp`
     */
    serverName?: string
  }

  /**
   * append an import to the module id ending with `appendTo` instead of adding a script into body
   * useful for projects that do not use html file as an entry
   *
   * WARNING: only set this if you know exactly what it does.
   * @default ''
   */
  appendTo?: string | RegExp
}