WebMCP en Cloudflare: Un Puente para Agentes de IA en la Web

La web, diseñada para la interacción humana, enfrenta un desafío fundamental con el creciente tráfico de agentes de IA. El método tradicional de 'scraping' es ineficiente y perjudicial para los sitios. WebMCP (Model Context Protocol) aborda este problema al proporcionar una interfaz programática estandarizada, document.modelContext, que permite a los sitios exponer explícitamente funcionalidades y datos a los agentes. Esto transforma la interacción de un proceso de inferencia heurística sobre la UI a una invocación directa de APIs, optimizando el uso de recursos computacionales y mejorando la atribución del tráfico. La relevancia actual radica en la proliferación de modelos de lenguaje grandes (LLMs) y la necesidad de una interoperabilidad más eficiente entre estos y el contenido web.

Históricamente, la interacción máquina-máquina en la web se ha basado en APIs REST/GraphQL explícitas o en el rastreo y parseo de HTML. WebMCP representa una evolución hacia un modelo de 'agente en el navegador', donde la lógica de interacción reside en el cliente, pero es guiada por un contrato de herramientas definido por el servidor. Esto se alinea con principios de diseño de sistemas distribuidos que buscan desacoplar la presentación de la lógica de negocio, pero aplicado al contexto de la interacción autónoma de agentes.

Arquitectura del Sistema

La implementación de Cloudflare para WebMCP consta de dos componentes principales, ambos operando en el edge, antes de que la solicitud llegue al origen del sitio. Primero, una inyección de HTML en el edge: cuando WebMCP está habilitado, Cloudflare utiliza HTMLRewriter para insertar una etiqueta <script type="module" src="/.webmcp/bridge.js" ...></script> en la respuesta HTML. Este script se sirve desde el mismo origen, asegurando la compatibilidad y minimizando efectos colaterales. Los atributos data-packs especifican los conjuntos de herramientas a activar (ej. c2pa, mcp-server-client), y data-mcp-url apunta a un servidor MCP opcional del cliente.

Segundo, el script 'bridge' se ejecuta en el navegador del visitante. Este script detecta la presencia de document.modelContext (la superficie WebMCP experimental en Chrome 146). Si está disponible, el bridge compone una lista de herramientas a partir de los 'packs' especificados y las registra utilizando document.modelContext.registerTool(). Un 'pack' es un conjunto de descriptores de herramientas MCP y sus manejadores. Los packs estáticos (como Content Credentials) declaran sus herramientas de antemano, mientras que los packs dinámicos (como Site MCP Server) descubren sus herramientas en tiempo de ejecución. En la versión actual, todas las herramientas se ejecutan en el navegador del visitante, sin viajes de ida y vuelta a los servidores de Cloudflare. Por ejemplo, el pack Content Credentials parsea metadatos C2PA localmente, y el pack Site MCP Server se comunica directamente con el endpoint /mcp del sitio de origen, manteniendo la sesión del visitante. El código del bridge es servido por un Cloudflare Worker, lo que permite futuras extensiones para tareas que requieran procesamiento en el edge, como la sumarización de sitemaps con Workers AI.

// For each tool the site's own MCP server advertises (via tools/list),
// registering a proxy whose execute() calls the site back on the
// visitor's origin, with their session.
document.modelContext.registerTool({
name: tool.name, // e.g. "search_products"
description: tool.description,
inputSchema: tool.inputSchema, // taken straight from tools/list
execute: async (args) => {
const res = await fetch(mcpUrl, { // same-origin /mcp
method: "POST",
credentials: "same-origin",
headers: { "content-type": "application/json" },
body: JSON.stringify({
jsonrpc: "2.0", id: 1, method: "tools/call",
params: { name: tool.name, arguments: args },
}),
});
const { result } = await res.json();
return result; // an MCP CallToolResult, passed straight through
},
});

Fundamentos Teóricos

Este enfoque resuena con los principios de la computación distribuida y la interacción humano-computadora. La idea de un agente interactuando con un sistema a través de una interfaz programática en lugar de una interfaz gráfica se remonta a los primeros trabajos sobre agentes inteligentes y sistemas multi-agente. Conceptos como la 'programación por contrato' o 'interfaces de servicio' son fundamentales en el diseño de APIs robustas, y WebMCP extiende esto al contexto del navegador. La estandarización de la interacción de agentes en el navegador puede verse como una aplicación del principio de 'separación de preocupaciones', donde la presentación visual para humanos se desacopla de la interfaz funcional para máquinas. Aunque no hay un paper fundacional directo para WebMCP, su diseño se alinea con la evolución de los protocolos de comunicación y la necesidad de interoperabilidad en sistemas heterogéneos, similar a cómo los protocolos RPC (Remote Procedure Call) o los frameworks de descripción de servicios (WSDL, OpenAPI) buscaron estandarizar la invocación de funciones remotas.