Servidor Vue MCP

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 -D

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.

árbol de componentes

Obtener el estado del componente

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

estado del componente

Editar el estado del componente

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

editar-estado-del-componente

Resaltar componente

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

componente destacado

Obtener rutas

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

árbol de rutas

Consigue el árbol Pinia

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

árbol de pinia

Obtenga Pinia State

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

estado de pinia

Arquitectura ⚡️

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 installed

security - not tested

license - permissive license

quality - not tested

How are these scores calculated?

Proporciona información sobre las aplicaciones de Vue al exponer árboles de componentes, estado, rutas y datos de Pinia a través de un servidor de protocolo de contexto de modelo.

Related Resources

Reddit Discussion about this server

Related MCP Servers

Audiense Insights MCP Serverofficial
AudienseCo
A
security
A
license
A
quality
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
Last updated a month ago
8
0
14
TypeScript
Apache 2.0
MCP Server
antfu
-
security
A
license
-
quality
A server that helps AI models better understand Vite/Nuxt applications, providing enhanced context awareness for development support.
Last updated a month ago
718
TypeScript
MIT License
MCP Server Chartofficial
antvis
A
security
A
license
A
quality
mcp-server-chart
Last updated 4 days ago
25
4,065
2,128
TypeScript
MIT License
System Information MCP Server
dknell
-
security
F
license
-
quality
Provides real-time system metrics and information through a Model Context Protocol interface, enabling access to CPU usage, memory statistics, disk information, network status, and running processes.
Last updated a month ago
1
Python

View all related MCP servers

Vue MCP Server