Probar herramientas WebMCP con Claude Code: usa el Chrome DevTools MCP, no /chrome

TL;DR Añade el Chrome DevTools MCP con --categoryExperimentalWebmcp y --chromeArg=--enable-features=WebMCP, registra tus herramientas en document.modelContext y pídele a Claude que las liste y las llame. Si la lista sale vacía, mira primero el flag de Chrome.

WebMCP es una propuesta de estándar para que tu página registre herramientas, con nombre, descripción y JSON Schema, que un agente del navegador llama en vez de hacer clic a ciegas. Un servidor MCP vive en un servidor; una herramienta WebMCP vive en la página mientras está abierta.

La extensión Claude in Chrome no las descubre (la petición #76809 sigue abierta), así que con /chrome no puedes probarlas. Quien sí las ve es el Chrome DevTools MCP: habla con Chrome por CDP, el protocolo de las DevTools, y la versión 1.12.0 trae una categoría experimental, apagada por defecto, con dos herramientas: list_webmcp_tools y execute_webmcp_tool.

Lo que pasa por debajo

El MCP usa el dominio WebMCP de CDP: WebMCP.enable para recibir las herramientas y WebMCP.invokeTool para llamarlas. Esta es la salida de esas mismas llamadas contra Chromium 153, en un contenedor, con una página que registra add_to_cart, primero sin flag y luego con él:

ARGS [] version 153.0.8010.12
 title: Shop {"document":false,"navigator":false}
 WebMCP.enable: ok
 tools: []
ARGS ["--enable-features=WebMCP"] version 153.0.8010.12
 title: Shop {"document":true,"navigator":false}
 WebMCP.enable: ok
 tools: [{"name":"add_to_cart","frameId":true,"keys":["name","description","inputSchema","frameId","stackTrace"]}]
 invoke: {"invocationId":"B23A6B16D45E9B5CFB7968D30AB26696"}
 responded: {"invocationId":"B23A6B16D45E9B5CFB7968D30AB26696","status":"Completed","output":"Added 12345. Cart has 1 item(s)."}
 cart: 12345

Fíjate en dos cosas:

• Sin el flag, WebMCP.enable responde ok y no hay herramientas. Nada falla, así que el MCP te contesta No WebMCP tools available. y ya está.
• navigator.modelContext no existe, ni con el flag. El objeto está en document.

En mi Mac, con Chrome 154 y chrome-devtools-mcp 1.12.0, Claude Code listó la herramienta de la página y la llamó; sin el flag de Chrome, la lista vino vacía.

Los pasos

1. Añade el MCP con los dos flags

claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest --categoryExperimentalWebmcp --chromeArg=--enable-features=WebMCP

Added stdio MCP server chrome-devtools with command: npx -y chrome-devtools-mcp@latest --categoryExperimentalWebmcp --chromeArg=--enable-features=WebMCP to user config

--categoryExperimentalWebmcp enciende las dos herramientas. --chromeArg le pasa el flag al Chrome que arranca el propio MCP. Si ya tenías el servidor, claude mcp add responde MCP server chrome-devtools already exists in user config: bórralo antes con claude mcp remove chrome-devtools --scope user. Abre una sesión nueva para que arranque con los flags. Los scopes los explico en tu primer servidor MCP.

2. Registra la herramienta en document.modelContext

if (document.modelContext) {
  document.modelContext.registerTool({
    name: 'add_to_cart',
    description: 'Add a product to the cart by its id',
    inputSchema: {
      type: 'object',
      properties: { productId: { type: 'string', description: 'Product id, e.g. 12345' } },
      required: ['productId'],
    },
    execute: async ({ productId }) => {
      addToCart(productId); // tu lógica
      return `Added ${productId}.`;
    },
  });
}

El if deja la página intacta en un navegador sin WebMCP. Si copias un ejemplo con navigator.modelContext, en Chrome 153 es undefined y el script se rompe ahí.

3. Pídele a Claude que la liste y la llame

Abre http://localhost:5173, lista sus herramientas WebMCP y llama a
add_to_cart con el producto 12345. Dime qué devuelve y si la consola
muestra errores.

Claude abre la página, llama a list_webmcp_tools, que devuelve nombre, descripción, inputSchema y anotaciones de cada herramienta, y después a execute_webmcp_tool con el nombre y el input como JSON. La respuesta trae status, output y, si tu execute lanza, error con la excepción. Pídele también que revise el schema como lo leería otro agente: una descripción ambigua se nota aquí y no en producción.

4. Si prefieres arrancar tú el Chrome

--chromeArg solo se aplica cuando el MCP arranca Chrome. Si lo arrancas tú, el flag se pone en tu comando y el MCP se conecta por --browserUrl:

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-webmcp \
  --enable-features=WebMCP

claude mcp add chrome-webmcp --scope user -- npx -y chrome-devtools-mcp@latest --categoryExperimentalWebmcp --browserUrl=http://127.0.0.1:9222

Cuando la lista sale vacía o la llamada falla

• No WebMCP tools available. Abre la consola de la página y escribe document.modelContext: si es undefined, WebMCP no está activo en ese Chrome: le falta el flag, o es anterior a la 149 (el MCP pide la 150). Si existe, tu registerTool no se ejecutó.
• Falta una herramienta concreta. Las que llevan annotations: { debugging: true } (Chrome 156) no salen en list_webmcp_tools: van a list_3p_developer_tools, que necesita --categoryExperimentalThirdParty.
• Tool add_to_cart not found. El nombre no coincide, o la página navegó o anuló el registro con su AbortSignal antes de la llamada.
• The browser is already running for <dir>. Use --isolated to run multiple browser instances. Tienes dos servidores del MCP con el mismo perfil. Añade --isolated a uno.

Si dudas entre la extensión y este MCP para el resto del trabajo, no hacen lo mismo.

Documentación oficial: Debug WebMCP tools with AI agents · Connect Claude Code to tools via MCP

Requisitos

• Chrome 150 o posterior, lo que pide el MCP (la documentación de Chrome habla de 149, con el origin trial o con el flag). WebMCP es experimental: los flags y la API pueden cambiar.
• Node 20.19 o 22.12 en adelante para chrome-devtools-mcp 1.12.0.
• Probado con Chromium 153.0.8010.12 en un contenedor el 6 de noviembre de 2026, y con Chrome 154 en mi Mac el 31 de octubre.