rsbuild-plugin-vue-mcp

Rsbuild plugin VueDevTools MCP

Язык / 同样: English | 中文

Rsbuild/Rspack MCP-плагин на базе Vue DevTools.

Поддерживает Rsbuild 1.x/2.x и Rspack 1.x/2.x.

Через Model Context Protocol (MCP) ИИ-инструменты (например, ассистенты в IDE и агенты) могут в реальном времени, приложений, делая возможным по-настоящему понятно, что правильно может понять ваше приложение.

Этот плагин соединяет ваш dev-сервер и Vue DevTools внутри страницы приложения через **birpc поверх WebSocket **, предоставляя набор MCP-инструментов, позволяющих ИИ инспектировать компоненты, роутер и Pinia-хранилища, а также непосредственно редактировать состояние компонентов.

Возможности

• 🔌 MCP-сервер без настройки — автоматически монтируется на ваш существующий dev-сервер (без отдельного процесса).

• 🌳 Инспектирование дерева компонентов запущенного приложения — прямо в дереве.

• 🧩 Чтение и изменение состояния Vue-компонентов (реактивные данные, props, computed, refs…).

• 🔦 Подсвечивание компонента на странице для визуального поиска.

• 🧭 Информация Vue Router (то, текущий маршрут, совпадающие записи, params, query…).

• 🗄️ Инспекция Pinia — просмотр дерева хранилищ и чтение состояния отдельных хранилищ.

• 💥 Работает как с dev-серверами Rsbuild, так и с dev-серверами Rspack.

Related MCP server: vue-mcp-next

Использование

Установка

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

MCP-сервер (транспорт Streamable HTTP) будет доступен по адресу http://localhost:[port]/__mcp/mcp.

Требования: требуется @rsbuild/core >= 1.2.9 (для Rsbuild) или @rspack/core >= 1.3.0 (для Rspack) требований, чтобы плагин мог подключиться к базовому HTTP-серверу.

Подключение MCP-клиента

Запустите dev-сервер (обычно npm run dev). В консоль будет выведен URL MCP-сервиса, например:

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

Добавьте этот URL в конфигурацию MCP вашего клиента (Cursor, Claude Desktop, VS Code и т. д.):

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

[!IMPORTANT] Для того чтобы вызывать MCP-инструменты и отлаживать приложение, необходимы две вещи:

1. Dev-сервер должен быть запущен (тогда MCP-сервер работает).

2. У вас открыта страница приложения в браузере (например, http://localhost:5173). Внедрённый overlay.js подключается к dev-серверу через WebSocket и инициализирует среду Vue DevTools.

Инструменты обращаются к живому приложению через это WebSocket-соединение — если страница приложения не открыта, вызовы инструментов будут завершаться ошибкой или по таймауту.

После открытия страницы ИИ-помощник сможет вызывать перечисленные ниже инструменты против вашего работающего dev-приложения.

Инструменты MCP

Плагин регистрирует на MCP-сервере следующие инструменты. Каждый инструмент общается с вашим страница приложения через birpc, поэтому данные всегда соответствуют живому приложению. Все инструменты возвращают результаты в виде JSON-текста (а не markdown).

Пример рабочего процесса с ИИ

• «Покажи мне дерево компонентов текущей страницы.»

• «Какое состояние у компонента UserCard?»

• «Установи count в Counter в 10». → вызывает edit-component-state, и интерфейс мгновенно обновляется.

• «Подсвети компонент Navbar». → элемент мигает в браузере.

• «На каком мы маршруте и какие у него параметры?» → вызывает get-router-info.

• «Покажи состояние Pinia-хранилища cart».

Как работает

Плагин использует birpc в качестве RPC-слоя и WebSocket в качестве транспорта между dev-сервером и страницей приложения.

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. Инъекция — Когда dev-сервер запускается, плагин внедряет overlay.js в HTML приложения (или, когда задан appendTo , добавляет импорт в совпадающие исходные модули). overlay.js инициализирует @vue/devtools-kit и открывает WebSocket к dev-серверу на /__vue-devtools-mcp-ws.

2. RPC-мост — Dev-сервер создаёт birpc-группу (createRPCServer) поверх WebSocket-соединений. overlay.js создаёт birpc-клиент (createBirpc). Запросы от сервера передаются приложению; ответы возвращаемого браузера обрабатываются через колбэки хуков (onInspectorTreeUpdated, onInspectorStateUpdated, …).

3. MCP-слой — Обработчики MCP-инструментов (src/mcp/server.ts) вызывают birpc-клиент для достижения приложения, получают ответ через hookable-хук и возвращают его как результат инструмента.

Такая двухступенчатая архитектура (MCP ↔ birpc ↔ DevTools) означает, что каждый вызов инструмента соответствует или изменяет фактически запущенное приложение, а не статический снимок.

Конфигурация

pluginVueMcp(options) (Rsbuild) и new VueMcpPlugin(options) (Rspack) принимают одинаковые параметры:

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
}

Примеры

Добавление дополнительных MCP-инструментов наряду с встроенными:

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

Использование собственного пути к MCP-эндпоинту:

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

Требования

• Node.js >= 18

• @rsbuild/core >= 1.2.9 || >= 2.0.0 (необязательная peer-зависимость для плагина Rsbuild)

• @rspack/core >= 1.3.0 || >= 2.0.0 (необязательная peer-зависимость для плагина Rspack)

• Приложение Vue 3, инструментированное через @vue/devtools-kit (автоматически обрабатывается внедрённым overlay).

Отладка

Вы можете проверить MCP-сервер с помощью официального MCP Inspector:

npx @modelcontextprotocol/inspector

Затем обратитесь к нему по адресу http://localhost:<YourPort>/__mcp/mcp с транспортным протоколом Streamable HTTP.

Справочные материалы / Благодарности

• Вдохновлено vite-plugin-vue-mcp — оригинальной идеей соединения Vue DevTools и MCP.

• Model Context Protocol

• birpc — RPC-слой, используемый между dev-сервером и страницей приложения

• @vue/devtools-kit — основной API Vue DevTools

Лицензия

MIT