rsbuild-plugin-vue-mcp 0.1.0 → 0.1.2

package/README.md

@@ -104,9 +104,10 @@ Add that URL to your client's MCP configuration (Cursor, Claude Desktop, VS Code
 ```json
 {
   "mcpServers": {
-    "vue-mcp": {
+    "vue-devtools": {
       "type": "streamable-http",
       "url": "http://localhost:<YourPort>/__mcp/mcp",
+      "description": "Vue DevTools MCP - Rsbuild/Rspack MCP plugin based on Vue DevTools",
       "disabled": false
     }
   }

package/README_zh.md

@@ -101,9 +101,10 @@ MCP 服务（基于 Streamable HTTP 传输）将在 `http://localhost:[port]/__m
 ```json
 {
   "mcpServers": {
-    "vue-mcp": {
+    "vue-devtools": {
       "type": "streamable-http",
       "url": "http://localhost:<YourPort>/__mcp/mcp",
+      "description": "Vue DevTools MCP - Rsbuild/Rspack MCP plugin based on Vue DevTools",
       "disabled": false
     }
   }

package/dist/396.js

@@ -0,0 +1,237 @@
+import { createBirpcGroup } from "birpc";
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { z } from "zod";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+function createVueMcpContext() {
+    return {
+        rpcServer: null
+    };
+}
+const channelCache = new WeakMap();
+function createRPCServer(ws, functions, options = {}) {
+    const group = createBirpcGroup(functions, ()=>Array.from(ws?.clients || []).map((channel)=>{
+            if (channel.readyState === channel.CLOSED) return;
+            const cached = channelCache.get(channel);
+            if (cached) return cached;
+            const options = {
+                on: (fn)=>channel.on('message', fn),
+                post: (data)=>channel.send(data),
+                serialize: (v)=>JSON.stringify(v),
+                deserialize: (v)=>JSON.parse(v)
+            };
+            channelCache.set(channel, options);
+            return options;
+        }).filter((c)=>!!c), options);
+    ws.on('connection', ()=>{
+        group.updateChannels();
+    });
+    return group.broadcast;
+}
+var package_namespaceObject = {
+    rE: "0.1.2"
+};
+function stringify(value) {
+    return "string" == typeof value ? value : JSON.stringify(value);
+}
+function createMcpServerDefault(options, ctx) {
+    const server = new McpServer({
+        name: "rsbuild-vue-mcp",
+        description: 'Rsbuild/Rspack MCP plugin based on Vue DevTools',
+        version: package_namespaceObject.rE,
+        ...options.mcpServerInfo
+    });
+    server.registerTool('get-app-record-status', {
+        title: 'App Record Status',
+        description: "Get the current Devtools App status (appRecords and activeAppRecord). Must be called first before any other MCP tools. An empty content response usually means the user needs to open a web page with an app to debug. If multiple content items are returned, the user has multiple app pages open and should close all but one to avoid interference. If a content contains multiple appRecords, it means multiple Vue App instances exist on the page. `toggle-app` to switch activeAppRecord. "
+    }, async ()=>{
+        const res = await ctx.rpcServer.getAppRecordStatus();
+        return {
+            content: res.map((r)=>({
+                    type: 'text',
+                    text: stringify(r)
+                }))
+        };
+    });
+    server.registerTool('toggle-app', {
+        title: 'Toggle App',
+        description: 'Toggle the activeAppRecord by the id of the appRecord. All MCP tool operations on Components, Router, Pinia, etc. are performed based on the activeAppRecord.',
+        inputSchema: {
+            id: z.string()
+        }
+    }, async ({ id })=>{
+        await ctx.rpcServer.toggleApp({
+            id
+        });
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: 'ok'
+                }
+            ]
+        };
+    });
+    server.registerTool('get-component-tree', {
+        description: 'Get the Vue component tree in JSON tree syntax format (by Vue DevTools stringify, a two-dimensional serialization format that separates structure from values, replacing nested object references with IDs.).',
+        inputSchema: {
+            componentName: z.string().optional().describe('query by componentName (the component\'s name, not uid), default query all components')
+        }
+    }, async ({ componentName })=>{
+        const res = await ctx.rpcServer.getInspectorTree({
+            componentName
+        });
+        return {
+            content: res.map((r)=>({
+                    type: 'text',
+                    text: stringify(r)
+                }))
+        };
+    });
+    server.registerTool('get-component-state', {
+        description: 'Get the Vue component state in JSON structure format.',
+        inputSchema: {
+            componentName: z.string().describe('query by componentName (the component\'s name, not uid)')
+        }
+    }, async ({ componentName })=>{
+        const res = await ctx.rpcServer.getInspectorState({
+            componentName
+        });
+        return {
+            content: res.map((r)=>({
+                    type: 'text',
+                    text: stringify(r)
+                }))
+        };
+    });
+    server.registerTool('edit-component-state', {
+        description: 'Edit the Vue component state.',
+        inputSchema: {
+            componentName: z.string().describe('by componentName (the component\'s name, not uid)'),
+            path: z.array(z.string()),
+            value: z.string(),
+            valueType: z["enum"]([
+                'string',
+                'number',
+                'boolean',
+                'object',
+                'array'
+            ])
+        }
+    }, async ({ componentName, path, value, valueType })=>{
+        await ctx.rpcServer.editComponentState({
+            componentName,
+            path,
+            value,
+            valueType
+        });
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: 'ok'
+                }
+            ]
+        };
+    });
+    server.registerTool('highlight-component', {
+        description: 'Highlight the Vue component.',
+        inputSchema: {
+            componentName: z.string().describe('by componentName (the component\'s name, not uid)')
+        }
+    }, async ({ componentName })=>{
+        await ctx.rpcServer.highlightComponent({
+            componentName
+        });
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: 'ok'
+                }
+            ]
+        };
+    });
+    server.registerTool('get-router-info', {
+        description: 'Get the Vue router info in JSON structure format.'
+    }, async ()=>{
+        const res = await ctx.rpcServer.getRouterInfo();
+        return {
+            content: res.map((r)=>({
+                    type: 'text',
+                    text: stringify(r)
+                }))
+        };
+    });
+    server.registerTool('get-pinia-state', {
+        description: 'Get the Pinia state in JSON structure format.',
+        inputSchema: {
+            storeName: z.string()
+        }
+    }, async ({ storeName })=>{
+        const res = await ctx.rpcServer.getPiniaState({
+            storeName
+        });
+        return {
+            content: res.map((r)=>({
+                    type: 'text',
+                    text: stringify(r)
+                }))
+        };
+    });
+    server.registerTool('get-pinia-tree', {
+        description: 'Get the Pinia tree in JSON structure format.'
+    }, async ()=>{
+        const res = await ctx.rpcServer.getPiniaTree();
+        return {
+            content: res.map((r)=>({
+                    type: 'text',
+                    text: stringify(r)
+                }))
+        };
+    });
+    return server;
+}
+async function mcpHandlerStateless(server, req, res) {
+    try {
+        const transport = new StreamableHTTPServerTransport({
+            sessionIdGenerator: void 0
+        });
+        await server.connect(transport);
+        await transport.handleRequest(req, res);
+        res.on('close', ()=>{
+            transport.close();
+            server.close();
+        });
+    } catch (error) {
+        console.error('Error handling MCP request:', error);
+        if (!res.headersSent) {
+            res.statusCode = 500;
+            res.setHeader('content-type', 'application/json');
+            res.end(JSON.stringify({
+                jsonrpc: '2.0',
+                error: {
+                    code: -32603,
+                    message: 'Internal server error'
+                },
+                id: null
+            }));
+        }
+    }
+}
+function setupRoutes(base, getServer, dev) {
+    dev.middlewares.use(`${base}/mcp`, async (req, res)=>{
+        const server = await getServer();
+        await mcpHandlerStateless(server, req, res);
+    });
+}
+function setupRspackRoutes(base, getServer, middlewares) {
+    middlewares.push({
+        name: 'vue-devtools-mcp',
+        path: `${base}/mcp`,
+        async middleware (req, res) {
+            const server = await getServer();
+            await mcpHandlerStateless(server, req, res);
+        }
+    });
+}
+export { createMcpServerDefault, createRPCServer, createVueMcpContext, setupRoutes, setupRspackRoutes };

package/dist/index.cjs

@@ -48,40 +48,11 @@ var external_node_path_default = /*#__PURE__*/ __webpack_require__.n(external_no
 const promises_namespaceObject = require("node:fs/promises");
 var promises_default = /*#__PURE__*/ __webpack_require__.n(promises_namespaceObject);
 const external_ws_namespaceObject = require("ws");
-const external_hookable_namespaceObject = require("hookable");
 function createVueMcpContext() {
     return {
-        hooks: (0, external_hookable_namespaceObject.createHooks)(),
-        rpc: null,
         rpcServer: null
     };
 }
-function createServerRpcFunc(ctx) {
-    return {
-        getInspectorTree: (_)=>({}),
-        onInspectorTreeUpdated: (event, data)=>{
-            ctx.hooks.callHook(event, data).finally();
-        },
-        getInspectorState: (_)=>({}),
-        onInspectorStateUpdated: (event, data)=>{
-            ctx.hooks.callHook(event, data).finally();
-        },
-        editComponentState (_) {},
-        highlightComponent (_) {},
-        getRouterInfo: (_)=>({}),
-        onRouterInfoUpdated: (event, data)=>{
-            ctx.hooks.callHook(event, data).finally();
-        },
-        getPiniaTree: (_)=>({}),
-        onPiniaTreeUpdated: (event, data)=>{
-            ctx.hooks.callHook(event, data).finally();
-        },
-        getPiniaState: (_)=>({}),
-        onPiniaInfoUpdated: (event, data)=>{
-            ctx.hooks.callHook(event, data).finally();
-        }
-    };
-}
 const external_birpc_namespaceObject = require("birpc");
 const channelCache = new WeakMap();
 function createRPCServer(ws, functions, options = {}) {
@@ -105,9 +76,8 @@ function createRPCServer(ws, functions, options = {}) {
 }
 const mcp_js_namespaceObject = require("@modelcontextprotocol/sdk/server/mcp.js");
 var package_namespaceObject = {
-    rE: "0.1.0"
+    rE: "0.1.2"
 };
-const external_nanoid_namespaceObject = require("nanoid");
 const external_zod_namespaceObject = require("zod");
 function stringify(value) {
     return "string" == typeof value ? value : JSON.stringify(value);
@@ -119,56 +89,73 @@ function createMcpServerDefault(options, ctx) {
         version: package_namespaceObject.rE,
         ...options.mcpServerInfo
     });
+    server.registerTool('get-app-record-status', {
+        title: 'App Record Status',
+        description: "Get the current Devtools App status (appRecords and activeAppRecord). Must be called first before any other MCP tools. An empty content response usually means the user needs to open a web page with an app to debug. If multiple content items are returned, the user has multiple app pages open and should close all but one to avoid interference. If a content contains multiple appRecords, it means multiple Vue App instances exist on the page. `toggle-app` to switch activeAppRecord. "
+    }, async ()=>{
+        const res = await ctx.rpcServer.getAppRecordStatus();
+        return {
+            content: res.map((r)=>({
+                    type: 'text',
+                    text: stringify(r)
+                }))
+        };
+    });
+    server.registerTool('toggle-app', {
+        title: 'Toggle App',
+        description: 'Toggle the activeAppRecord by the id of the appRecord. All MCP tool operations on Components, Router, Pinia, etc. are performed based on the activeAppRecord.',
+        inputSchema: {
+            id: external_zod_namespaceObject.z.string()
+        }
+    }, async ({ id })=>{
+        await ctx.rpcServer.toggleApp({
+            id
+        });
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: 'ok'
+                }
+            ]
+        };
+    });
     server.registerTool('get-component-tree', {
-        description: 'Get the Vue component tree in markdown tree syntax format.'
-    }, async ()=>new Promise((resolve, reject)=>{
-            const eventName = (0, external_nanoid_namespaceObject.nanoid)();
-            ctx.hooks.hookOnce(eventName, (res)=>{
-                resolve({
-                    content: [
-                        {
-                            type: 'text',
-                            text: stringify(res)
-                        }
-                    ]
-                });
-            });
-            ctx.rpcServer.getInspectorTree({
-                event: eventName
-            }).catch((e)=>{
-                console.error(e);
-                reject(e);
-            });
-        }));
+        description: 'Get the Vue component tree in JSON tree syntax format (by Vue DevTools stringify, a two-dimensional serialization format that separates structure from values, replacing nested object references with IDs.).',
+        inputSchema: {
+            componentName: external_zod_namespaceObject.z.string().optional().describe('query by componentName (the component\'s name, not uid), default query all components')
+        }
+    }, async ({ componentName })=>{
+        const res = await ctx.rpcServer.getInspectorTree({
+            componentName
+        });
+        return {
+            content: res.map((r)=>({
+                    type: 'text',
+                    text: stringify(r)
+                }))
+        };
+    });
     server.registerTool('get-component-state', {
         description: 'Get the Vue component state in JSON structure format.',
         inputSchema: {
-            componentName: external_zod_namespaceObject.z.string()
+            componentName: external_zod_namespaceObject.z.string().describe('query by componentName (the component\'s name, not uid)')
         }
-    }, async ({ componentName })=>new Promise((resolve, reject)=>{
-            const eventName = (0, external_nanoid_namespaceObject.nanoid)();
-            ctx.hooks.hookOnce(eventName, (res)=>{
-                resolve({
-                    content: [
-                        {
-                            type: 'text',
-                            text: stringify(res)
-                        }
-                    ]
-                });
-            });
-            ctx.rpcServer.getInspectorState({
-                event: eventName,
-                componentName
-            }).catch((e)=>{
-                console.error(e);
-                reject(e);
-            });
-        }));
+    }, async ({ componentName })=>{
+        const res = await ctx.rpcServer.getInspectorState({
+            componentName
+        });
+        return {
+            content: res.map((r)=>({
+                    type: 'text',
+                    text: stringify(r)
+                }))
+        };
+    });
     server.registerTool('edit-component-state', {
         description: 'Edit the Vue component state.',
         inputSchema: {
-            componentName: external_zod_namespaceObject.z.string(),
+            componentName: external_zod_namespaceObject.z.string().describe('by componentName (the component\'s name, not uid)'),
             path: external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.string()),
             value: external_zod_namespaceObject.z.string(),
             valueType: external_zod_namespaceObject.z["enum"]([
@@ -179,115 +166,78 @@ function createMcpServerDefault(options, ctx) {
                 'array'
             ])
         }
-    }, async ({ componentName, path, value, valueType })=>new Promise((resolve, reject)=>{
-            ctx.rpcServer.editComponentState({
-                componentName,
-                path,
-                value,
-                valueType
-            }).then(()=>{
-                resolve({
-                    content: [
-                        {
-                            type: 'text',
-                            text: 'ok'
-                        }
-                    ]
-                });
-            }).catch((e)=>{
-                console.error(e);
-                reject(e);
-            });
-        }));
+    }, async ({ componentName, path, value, valueType })=>{
+        await ctx.rpcServer.editComponentState({
+            componentName,
+            path,
+            value,
+            valueType
+        });
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: 'ok'
+                }
+            ]
+        };
+    });
     server.registerTool('highlight-component', {
         description: 'Highlight the Vue component.',
         inputSchema: {
-            componentName: external_zod_namespaceObject.z.string()
+            componentName: external_zod_namespaceObject.z.string().describe('by componentName (the component\'s name, not uid)')
         }
-    }, async ({ componentName })=>new Promise((resolve, reject)=>{
-            ctx.rpcServer.highlightComponent({
-                componentName
-            }).then(()=>{
-                resolve({
-                    content: [
-                        {
-                            type: 'text',
-                            text: 'ok'
-                        }
-                    ]
-                });
-            }).catch((e)=>{
-                console.error(e);
-                reject(e);
-            });
-        }));
+    }, async ({ componentName })=>{
+        await ctx.rpcServer.highlightComponent({
+            componentName
+        });
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: 'ok'
+                }
+            ]
+        };
+    });
     server.registerTool('get-router-info', {
         description: 'Get the Vue router info in JSON structure format.'
-    }, async ()=>new Promise((resolve, reject)=>{
-            const eventName = (0, external_nanoid_namespaceObject.nanoid)();
-            ctx.hooks.hookOnce(eventName, (res)=>{
-                resolve({
-                    content: [
-                        {
-                            type: 'text',
-                            text: stringify(res)
-                        }
-                    ]
-                });
-            });
-            ctx.rpcServer.getRouterInfo({
-                event: eventName
-            }).catch((e)=>{
-                console.error(e);
-                reject(e);
-            });
-        }));
+    }, async ()=>{
+        const res = await ctx.rpcServer.getRouterInfo();
+        return {
+            content: res.map((r)=>({
+                    type: 'text',
+                    text: stringify(r)
+                }))
+        };
+    });
     server.registerTool('get-pinia-state', {
         description: 'Get the Pinia state in JSON structure format.',
         inputSchema: {
             storeName: external_zod_namespaceObject.z.string()
         }
-    }, async ({ storeName })=>new Promise((resolve, reject)=>{
-            const eventName = (0, external_nanoid_namespaceObject.nanoid)();
-            ctx.hooks.hookOnce(eventName, (res)=>{
-                resolve({
-                    content: [
-                        {
-                            type: 'text',
-                            text: stringify(res)
-                        }
-                    ]
-                });
-            });
-            ctx.rpcServer.getPiniaState({
-                event: eventName,
-                storeName
-            }).catch((e)=>{
-                console.error(e);
-                reject(e);
-            });
-        }));
+    }, async ({ storeName })=>{
+        const res = await ctx.rpcServer.getPiniaState({
+            storeName
+        });
+        return {
+            content: res.map((r)=>({
+                    type: 'text',
+                    text: stringify(r)
+                }))
+        };
+    });
     server.registerTool('get-pinia-tree', {
         description: 'Get the Pinia tree in JSON structure format.'
-    }, async ()=>new Promise((resolve, reject)=>{
-            const eventName = (0, external_nanoid_namespaceObject.nanoid)();
-            ctx.hooks.hookOnce(eventName, (res)=>{
-                resolve({
-                    content: [
-                        {
-                            type: 'text',
-                            text: stringify(res)
-                        }
-                    ]
-                });
-            });
-            ctx.rpcServer.getPiniaTree({
-                event: eventName
-            }).catch((e)=>{
-                console.error(e);
-                reject(e);
-            });
-        }));
+    }, async ()=>{
+        const res = await ctx.rpcServer.getPiniaTree();
+        return {
+            content: res.map((r)=>({
+                    type: 'text',
+                    text: stringify(r)
+                }))
+        };
+    });
     return server;
 }
 const streamableHttp_js_namespaceObject = require("@modelcontextprotocol/sdk/server/streamableHttp.js");
@@ -356,7 +306,7 @@ const pluginVueMcp = (options = {})=>({
                     ],
                     order: 'pre'
                 }, (context)=>{
-                    if ('dev' !== api.context.action || firstInjected) return context;
+                    if (api.context.action && 'dev' !== api.context.action || firstInjected) return context;
                     let code = context.code;
                     if ('string' != typeof code) return context;
                     firstInjected = true;
@@ -398,11 +348,9 @@ const pluginVueMcp = (options = {})=>({
                         wss.emit('connection', client, request);
                     });
                 });
-                const rpc = createServerRpcFunc(ctx);
-                ctx.rpcServer = createRPCServer(wss, rpc, {
+                ctx.rpcServer = createRPCServer(wss, {}, {
                     timeout: 3000
                 });
-                ctx.rpc = rpc;
                 const { printUrl = true, mcpPath = '/__mcp' } = options;
                 setupRoutes(mcpPath, async ()=>{
                     let mcp = createMcpServerDefault(options, ctx);

package/dist/index.js

@@ -2,7 +2,7 @@ import { fileURLToPath } from "node:url";
 import node_path from "node:path";
 import promises from "node:fs/promises";
 import { WebSocketServer } from "ws";
-import { createMcpServerDefault, createVueMcpContext, createRPCServer, setupRoutes, createServerRpcFunc } from "./551.js";
+import { createMcpServerDefault, createRPCServer, createVueMcpContext, setupRoutes } from "./396.js";
 function getVueMcpPath() {
     const pluginPath = node_path.dirname(fileURLToPath(import.meta.url));
     return pluginPath.replaceAll('\\', '/');
@@ -35,7 +35,7 @@ const pluginVueMcp = (options = {})=>({
                     ],
                     order: 'pre'
                 }, (context)=>{
-                    if ('dev' !== api.context.action || firstInjected) return context;
+                    if (api.context.action && 'dev' !== api.context.action || firstInjected) return context;
                     let code = context.code;
                     if ('string' != typeof code) return context;
                     firstInjected = true;
@@ -77,11 +77,9 @@ const pluginVueMcp = (options = {})=>({
                         wss.emit('connection', client, request);
                     });
                 });
-                const rpc = createServerRpcFunc(ctx);
-                ctx.rpcServer = createRPCServer(wss, rpc, {
+                ctx.rpcServer = createRPCServer(wss, {}, {
                     timeout: 3000
                 });
-                ctx.rpc = rpc;
                 const { printUrl = true, mcpPath = '/__mcp' } = options;
                 setupRoutes(mcpPath, async ()=>{
                     let mcp = createMcpServerDefault(options, ctx);