Use This MCP server To

Expose Vue component tree structure to LLMs for enhanced app understanding Provide real-time Vue app state and Pinia store data to AI models Enable AI-driven debugging by exposing Vue routes and state context Integrate with Cursor for automatic MCP configuration updates Support AI copilots in navigating and modifying Vue applications Facilitate multi-step reasoning over Vue app runtime data Allow LLMs to query Vue app internals during development

README

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
}

Features/Tools ✨

Get Component Tree

get-component-tree: Get the Vue component tree.

Get Component State

get-component-state: Get the state of a component (input: componentName).

Edit Component State

edit-component-state: Edit the state of a component (input: componentName, path, value, valueType).

Highlight Component

highlight-component: Highlight a component (input: componentName).

Get Routes

get-router-info: Get the Vue router info of the application.

Get Pinia Tree

get-pinia-tree: Get the Pinia tree of the application.

Get Pinia State

get-pinia-state: Get the Pinia state of the application (input: storeName).

Architecture ⚡️

Notice 💡

Please ensure the application is running in your browser before using the features.

Credits 💖

This project is inspired by vite-plugin-mcp. Thanks to @antfu for the great work.

License 📖

MIT License © Arlo

vite-plugin-vue-mcp FAQ

How do I install vite-plugin-vue-mcp?

Install it via pnpm with 'pnpm install vite-plugin-vue-mcp -D' and add it to your Vite config plugins.

How does vite-plugin-vue-mcp expose Vue app data?

It runs an MCP server that provides real-time info on component tree, state, routes, and Pinia store via an SSE endpoint.

Can vite-plugin-vue-mcp integrate with Cursor?

Yes, it automatically updates the .cursor/mcp.json file for seamless integration with Cursor's context management.

What URL does the MCP server use?

The MCP server is available at http://localhost:[port]/__mcp/sse during development.

Is vite-plugin-vue-mcp compatible with all Vue versions?

It is designed for Vue apps using Vite; compatibility depends on Vue version but generally supports Vue 3 setups.

Can I customize the MCP server options?

Yes, you can configure options like host and port in the VueMcpOptions interface in your Vite config.

Which LLM providers can use this MCP server?

It works with any LLM supporting MCP, including OpenAI, Anthropic Claude, and Google Gemini.

Does vite-plugin-vue-mcp support production environments?

It is primarily intended for development to provide live context; production use may require additional configuration.