Rsbuild plugin VueDevTools MCP

Language / 语言: English | 中文

Plugin MCP de Rsbuild/Rspack basado en Vue DevTools.

Compatible con Rsbuild 1.x/2.x y Rspack 1.x/2.x.

A través del Model Context Protocol (MCP), las herramientas de IA (como asistentes de IDE y agentes) pueden leer y manipular el estado de tu aplicación Vue en tiempo real, haciendo realidad “una IA que entiende tu aplicación”.

Este plugin conecta tu servidor de desarrollo y las Vue DevTools que se ejecutan dentro de la página de tu aplicación mediante birpc sobre WebSocket, exponiendo un conjunto de herramientas MCP que permiten a la IA inspeccionar componentes, el router y stores de Pinia, e incluso editar directamente el estado de los componentes.

Características

• 🔌 Servidor MCP sin configuración — se monta automáticamente en tu servidor de desarrollo existente (sin proceso separado).

• 🌳 Inspecciona el árbol de componentes de la aplicación en ejecución.

• 🧩 Lee y edita el estado de los componentes Vue (datos reactivos, props, computed, refs…).

• 🔦 Resalta un componente en la página para localizarlo visualmente.

• 🧭 Lee la información de Vue Router (ruta actual, registros coincidentes, params, query…).

• 🗄️ Inspecciona Pinia — recorre el árbol de stores y lee el estado de cada store.

• ⚡️ Funciona con los servidores de desarrollo de Rsbuild y Rspack.

Related MCP server: vue-mcp-next

Uso

Instalación

# For npm
npm add rsbuild-plugin-vue-mcp -D

# For yarn
yarn add rsbuild-plugin-vue-mcp -D

# For pnpm
pnpm add rsbuild-plugin-vue-mcp -D

Rsbuild

// rsbuild.config.js
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import { pluginVueMcp } from "rsbuild-plugin-vue-mcp";

export default defineConfig({
    plugins: [
        pluginVue(),
        pluginVueMcp(),
    ],
});

Rspack

// rspack.config.js
import { defineConfig } from '@rspack/cli';
import { rspack } from "@rspack/core";
import { VueLoaderPlugin } from 'rspack-vue-loader';
import { VueMcpPlugin } from 'rsbuild-plugin-vue-mcp/rspack';

export default defineConfig({
    plugins: [
        new rspack.HtmlRspackPlugin(),
        new VueLoaderPlugin(),
        new VueMcpPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'rspack-vue-loader',
                options: {
                    experimentalInlineMatchResource: true,
                },
            },
        ],
    },
});

El servidor MCP (transporte Streamable HTTP) estará disponible en http://localhost:[port]/__mcp/mcp.

Requisitos: se requiere @rsbuild/core >= 1.2.9 (para Rsbuild) o @xxxecip/core >= 1.3.0 (para Rspack) para que el plugin pueda adjuntarse al servidor HTTP subyacente.

Conectar un cliente MCP

Inicia el servidor de desarrollo (normalmente npm run dev). Este muestra la URL del servicio MCP en la consola, por ejemplo:

➜  MCP:     Server is running at http://localhost:5173/__mcp/mcp

Añade esa URL a la configuración MCP de tu cliente (Cursor, Claude Desktop, VS Code, etc.):

{
  "mcpServers": {
    "vue-mcp": {
      "type": "streamable-http",
      "url": "http://localhost:<YourPort>/__mcp/mcp",
      "disabled": false
    }
  }
}

[!IMPORTANTE> Para realmente invocar las herramientas MCP y depurar la app, se necesitan dos condiciones:

1. Que el servidor de desarrollo esté en marcha (para que el servidor MCP esté activo).

2. Que hayas abierto la página de tu aplicación en un navegador (por ejemplo, http://localhost:5173). El overlay.js inyectado se conecta entonces al servidor de desarrollo mediante WebSocket y expone el entorno de Vue DevTools.

Las herramientas acceden a la aplicación viva a través de esa conexión WebSocket; si no hay ninguna página abierta, las llamadas fallarán o agotarán el tiempo de espera.

Una vez que la página está abierta, el asistente de IA puede llamar a las herramientas que se indican abajo sobre tu app en ejecución.

Herramientas MCP

El plugin registra las siguientes herramientas en el servidor MCP. Cada herramienta se comunica con la página de la aplicación mediante birpc, por lo que los datos siempre reflejan la aplicación en vivo. Todas las herramientas devuelven sus resultados como texto en formato JSON (no Markdown).

Ejemplo de flujo de trabajo de IA

• "Muéstrame el árbol de componentes de la página actual."

• "¿Qué estado tiene el componente UserCard?"

• "Establece count en Counter a 10." → provoca la llamada a edit-component-state y la interfaz se actualiza al instante.

• "Resalta el componente Navbar." → el elemento parpadea en el navegador.

• "¿En qué ruta estamos y cuáles son sus params?" → llama a get-router-info.

• "Muéstrame el estado de la store cart de Pinia."

Cómo funciona

El plugin utiliza birpc como capa RPC y WebSocket como transporte entre el servidor de desarrollo y la página de la aplicación.

graph TD
    subgraph A["MCP Host (AI Client)"]
        A1[MCP Client]
        A2[MCP Client]
    end

    subgraph B["MCP Server (Rsbuild/Rspack Dev Server)"]
        B1[MCP Tools<br/>get-component-tree / get-component-state / ...]
        B2[birpc group<br/>createRPCServer]
        B3[WebSocket Server<br/>/__vue-devtools-mcp-ws]
    end

    subgraph C["Vue App (Browser)"]
        C1[overlay.js injected]
        C2[birpc client]
        C3[Vue DevTools Kit<br/>devtools.api / ctx]
    end

    A <-- " streamable-http / SSE " --> B1
    B1 --> B2
    B2 <== " birpc over WebSocket " ==> B3
    B3 --> C1 --> C2 --> C3

1. Inyección — Cuando el servidor de desarrollo se inicia, overlay.js se inyecta en el HTML de la aplicación (o, cuando appendTo está configurado, uma un import a los módulos fuentes coincidentes). overlay.js inicializa @vue/devtools-kit y abre un WebSocket hacia el servidor de desarrollo /__vue-devtools-mcp-ws.

2. Puente RPC — El servidor de desarrollo crea un grupo birpc (createServerRPCServer) sobre las conexiones WebSocket. overlay.js crea un cliente birpc (createBirpc). Las solicitudes del servidor se reenvían a la aplicación; las respuestas vuelven mediante callbacks de hooks (onInspectorTreeUpdated, onInspectorStateUpdated, …).

3. Capa MCP — Los manejadores de herramientas MCP (src/mcp/server.ts) llaman al cliente buscan llegar a la aplicación, esperan la respuesta a través de hooks hookable y la devuelven como resultado de la herramienta.

Este diseño de dos hop (MCP ↔ birpc ↔ DevTools) hace que cada llamada a una herramienta inspeccione o modifique la aplicación real en ejecución, no una instantánea estática.

Configuración

Tanto pluginVueMcp(opciones) (Rsbuild) como new VueMcpPlugin(options) (Rspack) aceptan las mismas opciones:

interface PluginVueMcpOptions {
    /** Host to listen on. Default: `localhost`. */
    host?: string

    /** Print the MCP server URL in the console. Default: `true`. */
    printUrl?: boolean

    /** Custom MCP server info (name/version). Ignored when `mcpServer` is provided. */
    mcpServerInfo?: { name?: string, version?: string, ... }

    /**
     * Customize or replace the MCP server instance. Called whenever a server is created.
     * You may register extra tools, or return a new McpServer to replace the default one.
     */
    mcpServerSetup?: (server: McpServer, api: RsbuildPluginAPI | Compiler) => void | Promise<void | McpServer>

    /** Path prefix for the MCP endpoint. Default: `/__mcp` (so the endpoint is `/__mcp/mcp`). */
    mcpPath?: string

    /**
     * Instead of injecting a <script> into HTML, append an import to modules whose id
     * matches this regex. Useful for projects without an HTML entry.
     * WARNING: only set this if you know exactly what it does.
     */
    appendTo?: string | RegExp
}

Ejemplos

Registrar herramientas MCP adicionales junto a las por defecto:

pluginVueMcp({
    mcpServerSetup(server, api) {
        server.registerTool('ping', { description: 'Ping the dev server' }, async () => ({
            content: [{ type: 'text', text: 'pong' }],
        }))
    },
})

Usar una ruta de endpoint MCP personalizado:

pluginVueMcp({ mcpPath: '/my-mcp' })
// → http://localhost:<port>/my-mcp/mcp

Requisitos

• Node.js >= 18

• @rsbuild/core >= 1.2.9 || >= 2.0.0 (peer opcional, para el plugin de Rsbuild)

• @rspack/core >= 1.3.0 || >= 2.0.0 (peer opcional, para el plugin de Rspack)

• Una aplicación Vue 3 instrumentada con @vue/devtools-kit (gestionable automáticamente por el overlay inyectado).

Depuración

Puedes inspeccionar el servidor MCP con el oficial MCP Inspector:

npx @modelcontextprotocol/inspector

Después apúntalo a http://localhost:<YourPort>/__mcp/mcp con el transporte Streamable HTTP.

Referencias / Créditos

• Inspirado en vite-plugin-vue-mcp — la idea original de conectar Vue DevTools y MCP.

• Model Context Protocol

• birpc — la capa RPC utilizada entre servidor de desarrollo y página de la app

• @vue/devtools-kit — API principal de Vue DevTools

Licencia

MIT