Vue MCP Server
Provides integration with Vite development servers to expose component and state data through MCP endpoints.
This server does not currently have a deployable release on Glama. Follow the repository's setup instructions to install and configure it for your MCP client, including any required credentials and local dependencies.
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 -DRelated MCP server: Vue Docs MCP
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 📖
This server cannot be deployed
Maintenance
Related MCP Connectors
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
A Model Context Protocol server for Wix AI tools
Enable secure connectivity between Sentry issues and debugging data, and LLM clients, using a Model Context Protocol (MCP) server.
The official Svelte MCP server providing docs and autofixing tools for Svelte development
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables real-time debugging and state manipulation of Vue.js applications through MCP protocol, integrating with Vue DevTools to access component trees, states, router info, and Pinia stores.2 npm43MIT
- FlicenseNot gradedqualityBmaintenanceProvides AI assistants with up-to-date Vue ecosystem documentation through the Model Context Protocol, enabling semantic search, API lookup, and cross-framework references.15-
- AlicenseNot gradedqualityBmaintenanceThis server runs inside an Rsbuild or Rspack dev server to expose MCP tools for inspecting and editing live Vue component state, component trees, Vue Router info, and Pinia stores.104 npmMIT
- AlicenseNot gradedqualityBmaintenanceEnables coding agents to read and modify the state of web apps (Vue, React, Svelte, Pinia, router) through MCP, acting as headless devtools.1,997 npm126MIT