rsbuild-plugin-vue-mcpSAFE

Language / 语言: English | 中文

Rsbuild/Rspack MCP plugin based on Vue DevTools. Supports Rsbuild 1.x/2.x and Rspack 1.x/2.x.

Through the Model Context Protocol (MCP), AI tools (such as IDE assistants and agents) can read and manipulate your Vue application state in real time, truly enabling "AI that understands your application."

This plugin bridges your dev server and the Vue DevTools running inside your app page via birpc over WebSocket, exposing a set of MCP tools that let AI inspect components, router, and Pinia stores, and even edit component state directly.

Features

• 🔌 Zero-config MCP server — automatically mounted on your existing dev server (no separate process).
• 🌳 Inspect the component tree of the running app, in tree.
• 🧩 Read & edit Vue component state (reactive data, props, computed, refs...).
• 🔦 Highlight a component in the page to visually locate it.
• 🧭 Read the Vue Router info (current route, matched records, params, query...).
• 🗄️ Inspect Pinia — browse the store tree and read individual store state.
• ⚡️ Works with both Rsbuild and Rspack dev servers.

Usage

Install

# 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: [