What is Vite Plugin Vue Mcp

vite-plugin-vue-mcp is a Vite plugin that enables a MCP server for Vue applications, allowing models to better understand the component tree, state, routes, and Pinia state of the app.

Use cases

Use cases for vite-plugin-vue-mcp include debugging Vue applications, visualizing component structures, managing application states, and enhancing the development experience by providing real-time insights into the app’s architecture.

How to use

To use vite-plugin-vue-mcp, install it via pnpm with pnpm install vite-plugin-vue-mcp -D. Then, import and add it to your Vite configuration file (vite.config.ts) as a plugin. The MCP server will be accessible at http://localhost:[port]/__mcp/sse.

Key features

Key features include retrieving the component tree, accessing and editing component states, highlighting components, fetching router information, and getting the Pinia tree and state.

Where to use

undefined

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