rsbuild-plugin-vue-mcp 0.1.1 → 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,45 +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 {
-        getAppRecordStatus: (_)=>({}),
-        onAppRecordStatusUpdate: (event, data)=>{
-            ctx.hooks.callHook(event, data).finally();
-        },
-        toggleApp: (_)=>({}),
-        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 = {}) {
@@ -110,9 +76,8 @@ function createRPCServer(ws, functions, options = {}) {
 }
 const mcp_js_namespaceObject = require("@modelcontextprotocol/sdk/server/mcp.js");
 var package_namespaceObject = {
-    rE: "0.1.1"
+    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);
@@ -126,99 +91,71 @@ function createMcpServerDefault(options, ctx) {
     });
     server.registerTool('get-app-record-status', {
         title: 'App Record Status',
-        description: 'Get the App status of Devtools on the page. This should be the first tool called before using any other MCP tools, to determine the current App status, including appRecords and activeAppRecord.'
-    }, 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.getAppRecordStatus({
-                event: eventName
-            }).catch((e)=>{
-                console.error(e);
-                reject(e);
-            });
-        }));
+        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 })=>new Promise((resolve, reject)=>{
-            ctx.rpcServer.toggleApp({
-                id
-            }).then(()=>{
-                resolve({
-                    content: [
-                        {
-                            type: 'text',
-                            text: 'ok'
-                        }
-                    ]
-                });
-            }).catch((e)=>{
-                console.error(e);
-                reject(e);
-            });
-        }));
+    }, 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.).'
-    }, 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"]([
@@ -229,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");
@@ -448,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);