@mcp-b/chrome-devtools-mcp 1.5.3 → 1.5.5

package/build/src/McpContext.js

@@ -507,7 +507,9 @@ export class McpContext {
         }
         const [snapshotId] = uid.split('_');
         if (this.#textSnapshot.snapshotId !== snapshotId) {
-            throw new Error('This uid is coming from a stale snapshot. Call take_snapshot to get a fresh snapshot.');
+            throw new Error(`This uid (${uid}) is from an old snapshot. The page has changed since then. ` +
+                'Always call take_snapshot immediately before using UIDs from it. ' +
+                'Workflow: 1) take_snapshot, 2) use the UIDs from that response, 3) repeat for each action.');
         }
         const node = this.#textSnapshot?.idToNode.get(uid);
         if (!node) {

package/build/src/main.js

@@ -22,7 +22,7 @@ import { WebMCPToolHub } from './tools/WebMCPToolHub.js';
  * @remarks If moved, update release-please config.
  */
 // x-release-please-start-version
-const VERSION = '1.5.3';
+const VERSION = '1.5.5';
 // x-release-please-end
 process.on('unhandledRejection', (reason, promise) => {
     logger('Unhandled promise rejection', promise, reason);

package/build/src/tools/input.js

@@ -9,7 +9,7 @@ import { ToolCategory } from './categories.js';
 import { defineTool } from './ToolDefinition.js';
 export const click = defineTool({
     name: 'click',
-    description: `Clicks on the provided element`,
+    description: `Clicks on the provided element. IMPORTANT: Always call take_snapshot first to get a fresh uid - UIDs expire when the page changes.`,
     annotations: {
         category: ToolCategory.INPUT,
         readOnlyHint: false,

package/build/src/tools/snapshot.js

@@ -9,8 +9,9 @@ import { defineTool, timeoutSchema } from './ToolDefinition.js';
 export const takeSnapshot = defineTool({
     name: 'take_snapshot',
     description: `Take a text snapshot of the currently selected page based on the a11y tree. The snapshot lists page elements along with a unique
-identifier (uid). Always use the latest snapshot. Prefer taking a snapshot over taking a screenshot. The snapshot indicates the element selected
-in the DevTools Elements panel (if any).`,
+identifier (uid). IMPORTANT: UIDs expire when the page changes. Always take a fresh snapshot immediately before using UIDs for click/type/etc.
+Workflow: 1) take_snapshot, 2) find the uid you need, 3) use it in click/type, 4) take_snapshot again for next action.
+Prefer taking a snapshot over taking a screenshot. The snapshot indicates the element selected in the DevTools Elements panel (if any).`,
     annotations: {
         category: ToolCategory.DEBUGGING,
         // Not read-only due to filePath param.

package/build/src/tools/webmcp.js

@@ -86,8 +86,8 @@ export const listWebMCPTools = defineTool({
     description: 'List all WebMCP tools registered across all pages, with diff since last call. ' +
         'First call returns full list. Subsequent calls return only added/removed tools. ' +
         'Use full=true to force complete list. ' +
-        'Tools are shown with their callable names (e.g., webmcp_localhost_3000_page0_test_add). ' +
-        'Call these tools directly by name instead of using a separate call tool.',
+        'To call these tools, use call_webmcp_tool with the ORIGINAL tool name (without the webmcp_ prefix). ' +
+        'Example: call_webmcp_tool({ name: "idp_config_get" }) NOT "webmcp_localhost_3000_page0_idp_config_get".',
     annotations: {
         title: 'Diff Website MCP Tools',
         category: ToolCategory.WEBMCP,
@@ -117,21 +117,33 @@ export const listWebMCPTools = defineTool({
                 response.appendResponseLine('Navigate to a page with @mcp-b/global loaded to discover tools.');
                 return;
             }
-            response.appendResponseLine(`${tools.length} WebMCP tool(s) registered:`);
+            response.appendResponseLine(`Found ${tools.length} WebMCP tool(s):`);
             response.appendResponseLine('');
+            // Group tools by page
+            const toolsByPage = new Map();
             for (const tool of tools) {
-                response.appendResponseLine(`- ${tool.toolId}`);
-                response.appendResponseLine(`  Original: ${tool.originalName}`);
-                response.appendResponseLine(`  Domain: ${tool.domain} (page ${tool.pageIdx})`);
-                if (tool.description) {
-                    response.appendResponseLine(`  Description: ${tool.description}`);
+                if (!toolsByPage.has(tool.pageIdx)) {
+                    toolsByPage.set(tool.pageIdx, []);
+                }
+                toolsByPage.get(tool.pageIdx).push(tool);
+            }
+            // Sort pages by index
+            const sortedPages = Array.from(toolsByPage.keys()).sort((a, b) => a - b);
+            for (const pageIdx of sortedPages) {
+                const pageTools = toolsByPage.get(pageIdx);
+                const domain = pageTools[0].domain;
+                response.appendResponseLine(`Page ${pageIdx}: ${domain}`);
+                for (const tool of pageTools) {
+                    response.appendResponseLine(`  • ${tool.originalName}`);
+                    if (tool.description) {
+                        response.appendResponseLine(`    ${tool.description}`);
+                    }
                 }
                 response.appendResponseLine('');
             }
-            response.appendResponseLine('IMPORTANT: These tools are available in your MCP tool list.');
-            response.appendResponseLine('Call them directly using: mcp__chrome-devtools__<toolId>');
+            response.appendResponseLine('To call a tool: call_webmcp_tool({ name: "tool_name", arguments: {...} })');
             if (tools.length > 0) {
-                response.appendResponseLine(`Example: mcp__chrome-devtools__${tools[0].toolId}`);
+                response.appendResponseLine(`Example: call_webmcp_tool({ name: "${tools[0].originalName}" })`);
             }
             return;
         }
@@ -141,29 +153,61 @@ export const listWebMCPTools = defineTool({
         toolHub.setLastSeenToolIds(currentToolIds);
         if (added.length === 0 && removed.length === 0) {
             response.appendResponseLine('No changes since last poll.');
+            response.appendResponseLine('');
             if (tools.length > 0) {
-                const toolNames = tools.map(t => t.originalName).join(', ');
-                response.appendResponseLine(`${tools.length} tools available: ${toolNames}`);
+                // Group tools by page
+                const toolsByPage = new Map();
+                for (const tool of tools) {
+                    if (!toolsByPage.has(tool.pageIdx)) {
+                        toolsByPage.set(tool.pageIdx, []);
+                    }
+                    toolsByPage.get(tool.pageIdx).push(tool);
+                }
+                response.appendResponseLine(`${tools.length} tool(s) available:`);
+                const sortedPages = Array.from(toolsByPage.keys()).sort((a, b) => a - b);
+                for (const pageIdx of sortedPages) {
+                    const pageTools = toolsByPage.get(pageIdx);
+                    const toolNames = pageTools.map(t => t.originalName).join(', ');
+                    response.appendResponseLine(`  Page ${pageIdx}: ${toolNames}`);
+                }
             }
             return;
         }
         if (added.length > 0) {
-            response.appendResponseLine(`Added (${added.length}):`);
+            response.appendResponseLine(`Added ${added.length} new tool(s):`);
+            response.appendResponseLine('');
+            // Group by page
+            const addedByPage = new Map();
             for (const tool of added) {
-                response.appendResponseLine(`+ ${tool.toolId}`);
-                if (tool.description) {
-                    response.appendResponseLine(`  ${tool.description}`);
+                if (!addedByPage.has(tool.pageIdx)) {
+                    addedByPage.set(tool.pageIdx, []);
                 }
+                addedByPage.get(tool.pageIdx).push(tool);
             }
-            response.appendResponseLine('');
-            response.appendResponseLine('NEW TOOLS AVAILABLE: Your MCP tool list has been updated.');
-            response.appendResponseLine(`Call them using: mcp__chrome-devtools__${added[0].toolId}`);
+            const sortedPages = Array.from(addedByPage.keys()).sort((a, b) => a - b);
+            for (const pageIdx of sortedPages) {
+                const pageTools = addedByPage.get(pageIdx);
+                const domain = pageTools[0].domain;
+                response.appendResponseLine(`Page ${pageIdx}: ${domain}`);
+                for (const tool of pageTools) {
+                    response.appendResponseLine(`  + ${tool.originalName}`);
+                    if (tool.description) {
+                        response.appendResponseLine(`    ${tool.description}`);
+                    }
+                }
+                response.appendResponseLine('');
+            }
+            response.appendResponseLine(`Call with: call_webmcp_tool({ name: "${added[0].originalName}" })`);
             response.appendResponseLine('');
         }
         if (removed.length > 0) {
-            response.appendResponseLine(`Removed (${removed.length}):`);
+            response.appendResponseLine(`Removed ${removed.length} tool(s)`);
+            response.appendResponseLine('');
             for (const id of removed) {
-                response.appendResponseLine(`- ${id}`);
+                // Extract original name from toolId format: webmcp_{domain}_page{idx}_{name}
+                const parts = id.split('_');
+                const name = parts.slice(3).join('_'); // Everything after page index
+                response.appendResponseLine(`  - ${name || id}`);
             }
         }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/chrome-devtools-mcp",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "description": "MCP server for Chrome DevTools with WebMCP integration for connecting to website MCP tools",
   "keywords": [
     "mcp",