feat(webmcp): Add experimental tool to list WebMCP tools the page exposes

Author: beaufortfrancois

src/McpContext.ts

@@ -13,6 +13,7 @@ import {McpPage} from './McpPage.js';
 import {
   NetworkCollector,
   ConsoleCollector,
+  WebMcpCollector,
   type ListenerMap,
   type UncaughtError,
 } from './PageCollector.js';
@@ -41,6 +42,7 @@ import type {
   TextSnapshot,
   TextSnapshotNode,
   ExtensionServiceWorker,
+  WebMcpTool,
 } from './types.js';
 import {
   ExtensionRegistry,
@@ -77,6 +79,7 @@ export class McpContext implements Context {
   #selectedPage?: McpPage;
   #networkCollector: NetworkCollector;
   #consoleCollector: ConsoleCollector;
+  #webmcpCollector: WebMcpCollector;
   #devtoolsUniverseManager: UniverseManager;
   #extensionRegistry = new ExtensionRegistry();
 
@@ -122,6 +125,13 @@ export class McpContext implements Context {
         },
       } as ListenerMap;
     });
+    this.#webmcpCollector = new WebMcpCollector(this.browser, collect => {
+      return {
+        webmcpToolAdded: event => {
+          collect(event);
+        },
+      } as ListenerMap;
+    });
     this.#devtoolsUniverseManager = new UniverseManager(this.browser);
   }
 
@@ -130,12 +140,14 @@ export class McpContext implements Context {
     await this.createExtensionServiceWorkersSnapshot();
     await this.#networkCollector.init(pages);
     await this.#consoleCollector.init(pages);
+    await this.#webmcpCollector.init(pages);
     await this.#devtoolsUniverseManager.init(pages);
   }
 
   dispose() {
     this.#networkCollector.dispose();
     this.#consoleCollector.dispose();
+    this.#webmcpCollector.dispose();
     this.#devtoolsUniverseManager.dispose();
     for (const mcpPage of this.#mcpPages.values()) {
       mcpPage.dispose();
@@ -222,6 +234,10 @@ export class McpContext implements Context {
     );
   }
 
+  getWebMcpTools(page: McpPage): WebMcpTool[] {
+    return this.#webmcpCollector.getData(page.pptrPage) ?? [];
+  }
+
   getDevToolsUniverse(page: McpPage): TargetUniverse | null {
     return this.#devtoolsUniverseManager.get(page.pptrPage);
   }

src/McpResponse.ts

@@ -32,6 +32,7 @@ import type {
 } from './tools/ToolDefinition.js';
 import type {InsightName, TraceResult} from './trace-processing/parse.js';
 import {getInsightOutput, getTraceSummary} from './trace-processing/parse.js';
+import type {WebMcpTool} from './types.js';
 import type {InstalledExtension} from './utils/ExtensionRegistry.js';
 import {paginate} from './utils/pagination.js';
 import type {PaginationOptions} from './utils/types.js';
@@ -181,6 +182,7 @@ export class McpResponse implements Response {
   };
   #listExtensions?: boolean;
   #listInPageTools?: boolean;
+  #listWebMcpTools?: boolean;
   #devToolsData?: DevToolsData;
   #tabId?: string;
   #args: ParsedArguments;
@@ -227,6 +229,12 @@ export class McpResponse implements Response {
     }
   }
 
+  setListWebMcpTools(): void {
+    if (this.#args.experimentalWebmcp) {
+      this.#listWebMcpTools = true;
+    }
+  }
+
   setIncludeNetworkRequests(
     value: boolean,
     options?: PaginationOptions & {
@@ -482,6 +490,12 @@ export class McpResponse implements Response {
       page.inPageTools = inPageTools;
     }
 
+    let webmcpTools: WebMcpTool[] | undefined;
+    if (this.#listWebMcpTools) {
+      const page = this.#page ?? context.getSelectedMcpPage();
+      webmcpTools = context.getWebMcpTools(page);
+    }
+
     let consoleMessages: Array<ConsoleFormatter | IssueFormatter> | undefined;
     if (this.#consoleDataOptions?.include) {
       if (!this.#page) {
@@ -585,6 +599,7 @@ export class McpResponse implements Response {
       extensions,
       lighthouseResult: this.#attachedLighthouseResult,
       inPageTools,
+      webmcpTools,
     });
   }
 
@@ -602,6 +617,7 @@ export class McpResponse implements Response {
       extensions?: InstalledExtension[];
       lighthouseResult?: LighthouseData;
       inPageTools?: ToolGroup<ToolDefinition>;
+      webmcpTools?: WebMcpTool[];
     },
   ): {content: Array<TextContent | ImageContent>; structuredContent: object} {
     const structuredContent: {
@@ -617,6 +633,7 @@ export class McpResponse implements Response {
       lighthouseResult?: object;
       extensions?: object[];
       inPageTools?: object;
+      webmcpTools?: object[];
       message?: string;
       networkConditions?: string;
       navigationTimeout?: number;
@@ -874,6 +891,23 @@ Call ${handleDialog.name} to handle it before continuing.`);
       }
     }
 
+    if (this.#listWebMcpTools && data.webmcpTools) {
+      structuredContent.webmcpTools = data.webmcpTools;
+      response.push('## WebMCP tools');
+      if (data.webmcpTools.length === 0) {
+        response.push('No WebMCP tools available.');
+      } else {
+        const webmcpToolsMessage = data.webmcpTools
+          .map(tool => {
+            return `name="${tool.name}", description="${tool.description}", inputSchema=${JSON.stringify(
+              tool.inputSchema,
+            )}, annotations=${JSON.stringify(tool.annotations)}`;
+          })
+          .join('\n');
+        response.push(webmcpToolsMessage);
+      }
+    }
+
     if (this.#networkRequestsOptions?.include && data.networkRequests) {
       const requests = data.networkRequests;
 

src/PageCollector.ts

@@ -21,6 +21,7 @@ import {
   type Page,
   type PageEvents as PuppeteerPageEvents,
 } from './third_party/index.js';
+import type {WebMcpTool} from './types.js';
 
 export class UncaughtError {
   readonly details: Protocol.Runtime.ExceptionDetails;
@@ -35,6 +36,7 @@ export class UncaughtError {
 interface PageEvents extends PuppeteerPageEvents {
   issue: DevTools.AggregatedIssue;
   uncaughtError: UncaughtError;
+  webmcpToolAdded: WebMcpTool;
 }
 
 export type ListenerMap<EventMap extends PageEvents = PageEvents> = {
@@ -412,3 +414,59 @@ export class NetworkCollector extends PageCollector<HTTPRequest> {
     navigations.splice(this.maxNavigationSaved);
   }
 }
+
+export class WebMcpCollector extends PageCollector<WebMcpTool> {
+  #subscribedPages = new WeakMap<Page, WebMcpSubscriber>();
+
+  override addPage(page: Page): void {
+    super.addPage(page);
+    if (!this.#subscribedPages.has(page)) {
+      const subscriber = new WebMcpSubscriber(page);
+      this.#subscribedPages.set(page, subscriber);
+      void subscriber.subscribe();
+    }
+  }
+
+  protected override cleanupPageDestroyed(page: Page): void {
+    super.cleanupPageDestroyed(page);
+    void this.#subscribedPages.get(page)?.unsubscribe();
+    this.#subscribedPages.delete(page);
+  }
+}
+
+class WebMcpSubscriber {
+  #page: Page;
+  #session: CDPSession;
+  #onToolsAdded: (data: unknown) => void;
+
+  constructor(page: Page) {
+    this.#page = page;
+    // @ts-expect-error use existing CDP client (internal Puppeteer API).
+    this.#session = this.#page._client() as CDPSession;
+    this.#onToolsAdded = (data: unknown) => {
+      for (const tool of (data as {tools: WebMcpTool[]}).tools) {
+        this.#page.emit('webmcpToolAdded', tool);
+      }
+    };
+  }
+
+  async subscribe() {
+    this.#session.on('WebMCP.toolsAdded', this.#onToolsAdded);
+    try {
+      // @ts-expect-error WebMCP is an experimental domain
+      await this.#session.send('WebMCP.enable');
+    } catch (error) {
+      logger('Error subscribing to WebMCP', error);
+    }
+  }
+
+  async unsubscribe() {
+    this.#session.off('WebMCP.toolsAdded', this.#onToolsAdded);
+    try {
+      // @ts-expect-error WebMCP is an experimental domain
+      await this.#session.send('WebMCP.disable');
+    } catch (error) {
+      logger('Error unsubscribing to WebMCP', error);
+    }
+  }
+}

src/bin/chrome-devtools-mcp-cli-options.ts

@@ -185,6 +185,11 @@ export const cliOptions = {
     describe:
       'Exposes experimental screencast tools (requires ffmpeg). Install ffmpeg https://www.ffmpeg.org/download.html and ensure it is available in the MCP server PATH.',
   },
+  experimentalWebmcp: {
+    type: 'boolean',
+    describe: 'Set to true to enable debugging WebMCP tools.',
+    hidden: true,
+  },
   chromeArg: {
     type: 'array',
     describe:

src/bin/chrome-devtools.ts

@@ -51,6 +51,7 @@ delete startCliOptions.viewport;
 // tools, they need to be enabled during CLI generation.
 delete startCliOptions.experimentalPageIdRouting;
 delete startCliOptions.experimentalVision;
+delete startCliOptions.experimentalWebmcp;
 delete startCliOptions.experimentalInteropTools;
 delete startCliOptions.experimentalScreencast;
 delete startCliOptions.categoryEmulation;

src/index.ts

@@ -164,6 +164,12 @@ export async function createMcpServer(
     ) {
       return;
     }
+    if (
+      tool.annotations.conditions?.includes('experimentalWebmcp') &&
+      !serverArgs.experimentalWebmcp
+    ) {
+      return;
+    }
     const schema =
       'pageScoped' in tool &&
       tool.pageScoped &&

src/telemetry/tool_call_metrics.json

@@ -539,5 +539,9 @@
         "argType": "number"
       }
     ]
+  },
+  {
+    "name": "list_webmcp_tools",
+    "args": []
   }
 ]

src/tools/ToolDefinition.ts

@@ -19,6 +19,7 @@ import type {
   TextSnapshotNode,
   GeolocationOptions,
   ExtensionServiceWorker,
+  WebMcpTool,
 } from '../types.js';
 import type {InstalledExtension} from '../utils/ExtensionRegistry.js';
 import type {PaginationOptions} from '../utils/types.js';
@@ -134,6 +135,7 @@ export interface Response {
   setListExtensions(): void;
   attachLighthouseResult(result: LighthouseData): void;
   setListInPageTools(): void;
+  setListWebMcpTools(): void;
 }
 
 /**
@@ -199,6 +201,7 @@ export type Context = Readonly<{
   getExtensionServiceWorkerId(
     extensionServiceWorker: ExtensionServiceWorker,
   ): string | undefined;
+  getWebMcpTools(page: ContextPage): WebMcpTool[];
 }>;
 
 export type ContextPage = Readonly<{

src/tools/tools.ts

@@ -22,6 +22,7 @@ import * as scriptTools from './script.js';
 import * as slimTools from './slim/tools.js';
 import * as snapshotTools from './snapshot.js';
 import type {ToolDefinition} from './ToolDefinition.js';
+import * as webmcpTools from './webmcp.js';
 
 export const createTools = (args: ParsedArguments) => {
   const rawTools = args.slim
@@ -41,6 +42,7 @@ export const createTools = (args: ParsedArguments) => {
         ...Object.values(screenshotTools),
         ...Object.values(scriptTools),
         ...Object.values(snapshotTools),
+        ...Object.values(webmcpTools),
       ];
 
   const tools = [];

src/tools/webmcp.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ToolCategory} from './categories.js';
+import {definePageTool} from './ToolDefinition.js';
+
+export const listWebMcpTools = definePageTool({
+  name: 'list_webmcp_tools',
+  description: `Lists all WebMCP tools the page exposes.`,
+  annotations: {
+    category: ToolCategory.IN_PAGE,
+    readOnlyHint: true,
+    conditions: ['experimentalWebmcp'],
+  },
+  schema: {},
+  handler: async (_request, response, _context) => {
+    response.setListWebMcpTools();
+  },
+});