rsbuild-plugin-vue-mcp

Sprache / 语言: English | 中文

Rsbuild/Rspack-MCP-Plugin basierend auf Vue DevTools.

Unterstützt Rsbuild 1.x/2.x und Rspack 1.x/2.x.

Über das Model Context Protocol (MCP) können KI-Werkzeuge (wie IDE-Assistenten und Agenten) den Zustand deiner Vue-Anwendung in Echtzeit lesen und verändern – was wirklich eine „KI, die deine Anwendung versteht“ ermöglicht.

Dieses Plugin verbindet deinen Dev-Server mit den in deiner App-Seite laufenden Vue DevTools über birpc über WebSocket und stellt eine Reihe von MCP-Tools bereit, mit denen KI den Komponentenbaum, den Router und die Pinia-Stores inspizieren und sogar den Komponentenzustand direkt bearbeiten kann.

Features

• 🔌 MCP-Server ohne Konfiguration – wird automatisch auf deinen vorhandenen Dev-Server gemountet (kein separater Prozess).

• 🌳 Komponentenbaum der laufenden App inspizieren (als Baum).

• 🧩 Vue-Komponentenzustand lesen & bearbeiten (reaktive Daten, Props, Computed, Refs…).

• 🔦 Komponente hervorheben – auf der Seite, um sie visuell zu lokalisieren.

• 🧭 Vue-Router-Infos lesen (aktuelle Route, Matched Records, Params, Query…).

• 🗄️ Pinia inspizieren – den Store-Baum durchsuchen und einzelne Store-Zustände lesen.

• ⚡️ Funktioniert mit Rsbuild- und Rspack-Dev-Servern.

Related MCP server: vue-mcp-next

Verwendung

Installation

# 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,
                },
            },
        ],
    },
});

Der MCP-Server (Streamable-HTTP-Transport) ist unter http://localhost:[port]/__mcp/mcp verfügbar.

Anforderungen: Es wird @rsbuild/core >= 1.2.9 (für Rsbuild) oder @rspack/core >= 1.3.0 (für Rspack) benötigt, damit das Plugin an den zugrunde liegenden HTTP-Server anbinden kann.

MCP-Client verbinden

Starte den Dev-Server (normalerweise npm run dev). Er gibt die MCP-Service-URL in der Konsole aus, z. B.:

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

Füge diese URL zur MCP-Konfiguration deines Clients hinzu (Cursor, Claude Desktop, VS Code usw.):

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

[!IMPORTANT] Um die MCP-Tools tatsächlich aufzurufen und deine App zu debuggen, sind zwei Dinge erforderlich:

1. Der Dev-Server läuft (damit der MCP-Server verfügbar ist).

2. Du hast deine App-Seite im Browser geöffnet (z. B. http://localhost:5173). Das injizierte overlay.js verbindet sich dann über WebSocket mit dem Dev-Server und stellt die Vue-DevTools-Runtime bereit.

Die Tools erreichen die live App über diese WebSocket-Verbindung – wenn keine App-Seite geöffnet ist, schlagen die Tool-Aufrufe fehl oder enden im Timeout.

Sobald die Seite geöffnet ist, kann der KI-Assistent die unten aufgeführten Tools auf deine laufende Dev-App anwenden.

MCP-Tools

Das Plugin registriert die folgenden Tools auf dem MCP-Server. Jedes Tool kommuniziert per birpc mit der App-Seite, sodass die Daten immer die Live-Anwendung widerspiegeln. Alle Tools geben ihre Ergebnisse als JSON-formatierten Text zurück (nicht als Markdown).

Beispiel-KI-Workflow

• „Zeig mir den Komponentenbaum der aktuellen Seite.“

• „Wie ist der Zustand der UserCard-Komponente?“

• „Setze count in Counter auf 10.“ → ruft edit-component-state auf und die UI aktualisiert sich sofort.

• „Markiere die Navbar-Komponente.“ → das Element blinkt im Browser.

• „Auf welcher Route sind wir und was sind ihre Parameter?“ → ruft get-router-info auf.

• „Zeig mir den Zustand des cart-Pinia-Stores.“

So funktioniert’s

Das Plugin verwendet birpc als RPC-Schicht und WebSocket als Transport zwischen Dev-Server und App-Seite.

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. Injection – Beim Start des Dev-Servers injiziert das Plugin overlay.js in das HTML der App (oder, wenn appendTo konfiguriert ist, fügt es einen Import zu passenden Quellmodulen hinzu). overlay.js initialisiert @vue/devtools-kit und öffnet eine WebSocket-Verbindung zum Dev-Server unter /__vue-devtools-mcp-ws.

2. RPC-Brücke – Der Dev-Server erstellt eine birpc-Gruppe (createRPCServer) über die WebSocket-Verbindungen. overlay.js erstellt einen birpc-Client (createBirpc). Anfragen vom Server werden an die App weitergeleitet; Antworten kommen über Hook-Callbacks (onInspectorTree, onInspectorStateUpdated, …) zurück.

3. MCP-Schicht – MCP-Tool-Handler (src/mcp/server.ts) rufen den birpc-Client auf, um die App zu erreichen, warten über hookable-Hooks auf die Antwort und geben diese als Tool-Ergebnis zurück.

Dieses Zwei-Hop-Design (MCP ↔ birpc ↔ DevTools) bedeutet, dass jeder Tool-Aufruf die tatsächliche laufende Anwendung inspiziert oder verändert – keine statische Fotografie ist.

Konfiguration

Sowohl pluginVueMcp(options) (Rsbuild) als auch new VueMcpPlugin(options) (Rspack) akzeptieren dieselben Optionen:

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
}

Beispiele

Registriere zusätzliche MCP-Tools neben den Standard-Tools:

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

Verwende einen benutzerdefinierten MCP-Endpunktpfad:

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

Anforderungen

• Node.js >= 18

• @rsbuild/core >= 1.2.9 || >= 2.0.0 (optionaler Peer, für das Rsbuild-Plugin)

• @rspack/core >= 1.3.0 || >= 2.0.0 (optionaler Peer, für das Rspack-Plugin)

• Eine mit @vue/devtools-kit instrumentierte Vue-3-Anwendung (wird automatisch vom injizierten Overlay übernommen).

Debugging

Du kannst den MCP-Server mit dem offiziellen MCP Inspector überprüfen:

npx @modelcontextprotocol/inspector

Richte ihn dann mit dem Streamable-HTTP-Transport auf http://localhost:<YourPort>/__mcp/mcp aus.

Referenz / Danksagungen

• Inspiriert von vite-plugin-vue-mcp – die ursprüngliche Idee, Vue DevTools und MCP zu verbinden.

• Model Context Protocol

• birpc – die RPC-Schicht zwischen Dev-Server und App-Seite

• @vue/devtools-kit – die Core-API von Vue DevTools

Lizenz

MIT