Vue MCP Server
complemento vite-vue-mcp
Complemento de Vite que habilita un servidor MCP para su aplicación Vue para proporcionar información sobre el árbol de componentes, el estado, las rutas y el árbol pinia y el estado.
Instalación 📦
pnpm install vite-plugin-vue-mcp -DRelated MCP server: vue-mcp-next
Uso 🔨
// vite.config.ts
import { VueMcp } from 'vite-plugin-vue-mcp'
export default defineConfig({
plugins: [VueMcp()],
})Entonces el servidor MCP estará disponible en http://localhost:[port]/__mcp/sse .
Si usa Cursor, cree un archivo .cursor/mcp.json en la raíz de su proyecto; este complemento lo actualizará automáticamente. Para más información sobre MCP, consulte la documentación oficial de Cursor .
Opciones
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
}Características/Herramientas ✨
Obtener árbol de componentes
get-component-tree : obtiene el árbol de componentes de Vue.

Obtener el estado del componente
get-component-state : obtiene el estado de un componente (entrada: componentName ).

Editar el estado del componente
edit-component-state : edita el estado de un componente (entrada: componentName , path , value , valueType ).

Resaltar componente
highlight-component : Resalta un componente (entrada: componentName ).

Obtener rutas
get-router-info : obtiene la información del enrutador Vue de la aplicación.

Consigue el árbol Pinia
get-pinia-tree : obtiene el árbol Pinia de la aplicación.

Obtenga Pinia State
get-pinia-state : obtiene el estado de Pinia de la aplicación (entrada: storeName ).

Arquitectura ⚡️

Aviso 💡
Asegúrese de que la aplicación se esté ejecutando en su navegador antes de utilizar las funciones.
Créditos 💖
Este proyecto está inspirado en vite-plugin-mcp . Gracias a @antfu por el excelente trabajo.
Licencia 📖
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 gradedqualityDmaintenanceMCP server that helps AI models understand Vite/Nuxt applications better, available as both a Nuxt module and Vite plugin.MIT
- 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.34 npm43MIT
- FlicenseNot gradedqualityDmaintenanceProvides AI assistants with up-to-date Vue ecosystem documentation through the Model Context Protocol, enabling semantic search, API lookup, and cross-framework references.13-
- 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.4,673 npmMIT