WebMCP permite que las aplicaciones de React expongan APIs de herramientas estructuradas directamente a los agentes de IA, reemplazando el frágil scraping de la interfaz de usuario por llamadas fiables e independientes de la interfaz. La función está disponible en un origin trial para Chrome 149 y versiones superiores, y puedes activarla a través de chrome://flags/#enable-webmcp-testing.

El problema de enseñar a los agentes a hacer clic

La mayoría de los intentos actuales para permitir que los agentes de IA interactúen con una página web se basan en pistas visuales. Un agente analiza el DOM, adivina qué elemento es un botón, simula clics, hace scroll y completa campos de formularios. En el momento en que un botón se mueve, una etiqueta cambia o se ajusta el diseño, el script falla. El enfoque es lento porque espera a que el navegador renderice cada paso, y un rediseño rutinario puede romper todo un flujo de automatización.

WebMCP cambia el modelo

WebMCP es un nuevo estándar web introducido por Google Chrome. En lugar de exponer una superficie visual para que el agente la explore, una página anuncia un conjunto de herramientas (tools): operaciones con nombre y tipo que la página puede realizar. Un agente de IA primero pregunta "¿qué herramientas están disponibles?"; la página responde con una lista como "searchProducts" o "checkout". El agente invoca entonces una herramienta enviando un payload JSON que coincida con el esquema de entrada declarado de la herramienta, por ejemplo, searchProducts(query: "jacket"). El navegador dirige la solicitud directamente al JavaScript de la página, que ejecuta la lógica subyacente sin ninguna intervención de la interfaz de usuario.

El resultado es una interacción instantánea, que funciona independientemente de los cambios en el CSS y que se mantiene funcional siempre que las definiciones de las herramientas permanezcan estables.

Beneficios importantes para los desarrolladores

  • Velocidad – La comunicación se mantiene dentro del sistema de mensajería del navegador, eliminando el viaje de ida y vuelta de renderizar clics y esperar las actualizaciones de la página.
  • Fiabilidad – Las herramientas llaman a las mismas funciones que el sitio ya utiliza para su propia interfaz, por lo que un rediseño no rompe la API.
  • Control – Los desarrolladores deciden qué operaciones se exponen, qué parámetros aceptan y qué puede ver el agente en la respuesta.
  • Independencia de la interfaz – El estilo, el diseño o la refactorización de componentes ya no afectan la capacidad del agente para invocar una función.

WebMCP no reemplaza al MCP (Message-Channel-Protocol) existente utilizado en el lado del servidor. El MCP sigue encargándose de la obtención de datos pesados y la orquestación del backend, mientras que WebMCP gestiona las interacciones en vivo dentro de la pestaña.

Cómo pueden empezar los desarrolladores de React

El código de React puede registrar herramientas utilizando una API de JavaScript imperativa o una API declarativa basada en formularios HTML. Un patrón común es envolver el registro en un hook personalizado:

  1. Llamar a una función de registro con el nombre de la herramienta y una breve descripción.
  2. Proporcionar un esquema de entrada (por ejemplo, un esquema JSON que describa los campos obligatorios).
  3. Proporcionar un callback execute que ejecute la lógica de negocio existente, a menudo la misma función que activaría un clic en un botón.

Cuando el hook se ejecuta, el navegador añade la herramienta al manifiesto WebMCP de la página. Un agente de IA que descubra el manifiesto puede entonces invocar la herramienta sin tocar nunca el DOM.

Debido a que el registro ocurre en el momento del montaje del componente, las herramientas pueden limitarse a rutas específicas o feature flags, lo que otorga a los equipos un control granular sobre lo que la IA puede hacer en producción frente a un entorno de prueba.

Advertencias y qué tener en cuenta

WebMCP es todavía un origin trial. Solo funciona en Chrome 149+ y debe habilitarse manualmente mediante un flag.

Qué sigue

Google ha abierto la prueba a los desarrolladores que quieran experimentar con experiencias web nativas de IA. Los siguientes pasos para cualquier interesado son:

  • Habilitar el flag en Chrome y recargar el sitio de destino.
  • Añadir un registro de herramienta sencillo en un componente de React y observar cómo aparece el manifiesto en las devtools del navegador.
  • Probar un cliente de IA (por ejemplo, un script local que siga el protocolo WebMCP) para llamar a la herramienta y verificar la respuesta.
  • Seguir la página de estado del trial para obtener actualizaciones sobre su lanzamiento estable.

Conclusión: WebMCP ofrece a los desarrolladores de React una forma de hacer que sus aplicaciones sean directamente invocables por agentes de IA, convirtiendo los elementos de la interfaz de usuario en servicios estables y tipados. Este cambio elimina la pesadilla de mantenimiento que supone el screen-scraping y abre el camino hacia aplicaciones web verdaderamente nativas de IA, siempre que los equipos se sientan cómodos trabajando en un entorno experimental de Chrome.