WebMCP: El Nuevo Estándar de Google que Convierte Sitios Web en Herramientas de IA

En febrero de 2026, Google Chrome lanzó algo que podría silenciosamente transformar cómo funciona toda la web. WebMCP — el Protocolo de Contexto de Modelo Web — aterrizó en Chrome 146 Canary como vista previa temprana, e introduce una idea radical: ¿y si cada sitio web pudiera decirle a los agentes de IA exactamente lo que puede hacer, en lugar de obligarlos a adivinar?

Desarrollado conjuntamente por ingenieros de Google y Microsoft e incubado a través del grupo comunitario de Machine Learning Web del W3C, WebMCP es un estándar web propuesto que permite a cualquier sitio web exponer herramientas estructuradas y ejecutables directamente a agentes de IA a través de una nueva API del navegador: navigator.modelContext. En lugar de que los agentes de IA raspen tu DOM, lean capturas de pantalla o hagan ingeniería inversa de tu interfaz, tu sitio declara sus capacidades como funciones tipadas y validadas por esquema que los agentes pueden descubrir e invocar.

Para equipos creativos y agencias que construyen experiencias web, esto no es solo una curiosidad de desarrollador. Es el comienzo de una nueva capa de interacción para la web — una donde los agentes de IA son visitantes de primera clase junto a los usuarios humanos.

---

Qué Es Realmente WebMCP (Y Qué No Es)

Primero, una distinción crítica: WebMCP no es un reemplazo del Protocolo de Contexto de Modelo (MCP) de Anthropic. Los dos protocolos son complementarios y operan en diferentes capas del stack.

	MCP (Anthropic)	WebMCP (Google/Microsoft)
Opera en	Backend — servidor a servidor	Lado del cliente — en el navegador
Arquitectura	JSON-RPC, servidores MCP alojados	API nativa del navegador (navigator.modelContext)
Despliegue	Requiere servidor backend (Python/Node.js)	No requiere servidor — se ejecuta en la página
Caso de uso	Conectar agentes IA a APIs, bases de datos, servicios	Hacer sitios web "legibles por agentes"
Autenticación	Auth servidor a servidor, claves API	Modelo de seguridad del navegador (CORS, CSP, same-origin)
Ideal para	Automatización servicio a servicio	Interacciones basadas en navegador con presencia del usuario

Piénsalo así: MCP es cómo los agentes de IA hablan con servicios backend. WebMCP es cómo los agentes de IA hablan con sitios web. Una plataforma como XainFlow usa MCP para que Claude o Cursor controlen su pipeline de generación del lado del servidor. WebMCP permitiría que un agente de IA navegando xainflow.com entienda la página de precios, busque plantillas de flujos de trabajo o interactúe con formularios de demostración — todo a través de llamadas a herramientas estructuradas en lugar de scraping frágil de pantalla.

"MCP conecta agentes con servicios backend. WebMCP conecta agentes con interfaces basadas en navegador. Juntos, hacen que todo el stack sea accesible para agentes."

---

Dos APIs: Declarativa e Imperativa

WebMCP proporciona dos enfoques complementarios para hacer que tu sitio esté listo para agentes. Puedes usar uno o ambos dependiendo de la complejidad de tus interacciones.

La API Declarativa: Tres Atributos HTML

El camino más simple no requiere JavaScript. Agregas atributos a formularios HTML existentes, y el navegador automáticamente los expone como herramientas invocables para cualquier agente de IA visitante.

<form toolname="searchWorkflows"
      tooldescription="Buscar plantillas de flujos de trabajo IA por categoría o palabra clave">
  <input name="query" type="text" required
         placeholder="Buscar flujos de trabajo...">
  <select name="category">
    <option value="video">Video</option>
    <option value="image">Imagen</option>
    <option value="brand">Kit de Marca</option>
  </select>
  <button type="submit">Buscar</button>
</form>

Eso es todo. Tres atributos — toolname, tooldescription y los inputs estándar del formulario HTML — y tu formulario de búsqueda se convierte en una herramienta estructurada que los agentes de IA pueden descubrir y llamar. El navegador extrae el esquema de entrada de los campos de tu formulario, incluyendo tipos, reglas de validación y restricciones obligatorias.

La API Imperativa: Herramientas con JavaScript

Para interacciones más complejas que van más allá de envíos de formularios, la API Imperativa te permite registrar herramientas programáticamente con definiciones completas de JSON Schema y manejadores asíncronos.

navigator.modelContext.registerTool({
  name: "get_pricing_plans",
  description: "Obtener planes de precios disponibles con características y detalles de costos",
  inputSchema: {
    type: "object",
    properties: {
      team_size: {
        type: "string",
        enum: ["individual", "team", "enterprise"],
        description: "Categoría de tamaño de equipo objetivo"
      }
    }
  },
  async execute({ team_size }) {
    const plans = await fetchPricingData(team_size);
    return {
      content: [{
        type: "text",
        text: JSON.stringify(plans)
      }]
    };
  }
});

La API Imperativa te da control total: lógica personalizada, consultas a bases de datos, llamadas API, flujos de trabajo de múltiples pasos — cualquier cosa que puedas hacer en JavaScript, puedes exponerla como una herramienta tipada.

---

Integración con React: El Hook useWebMCP

Para aplicaciones React — que incluye la mayoría de las aplicaciones web modernas — la comunidad ya ha construido una capa de integración limpia. El paquete @mcp-b/react-webmcp proporciona un hook useWebMCP que maneja el registro de herramientas, la gestión del ciclo de vida y la limpieza automáticamente.

import { useWebMCP } from '@mcp-b/react-webmcp';
import { z } from 'zod';

function WorkflowExplorer() {
  const [workflows, setWorkflows] = useState([]);

  useWebMCP({
    name: 'search_workflows',
    description: 'Buscar plantillas de flujos de trabajo IA disponibles',
    inputSchema: {
      query: z.string().describe('Palabras clave de búsqueda'),
      category: z.enum(['video', 'image', 'brand'])
        .optional()
        .describe('Filtrar por categoría')
    },
    handler: async ({ query, category }) => {
      const results = await searchWorkflows(query, category);
      setWorkflows(results);
      return {
        success: true,
        count: results.length,
        workflows: results.map(w => w.name)
      };
    }
  });

  return <WorkflowGrid items={workflows} />;
}

El hook usa Zod para validación de esquemas, auto-registra la herramienta al montar y la limpia al desmontar. También tiene acceso completo al estado de React, por lo que las herramientas pueden actualizar la interfaz en tiempo real cuando un agente las invoca — el usuario ve la misma respuesta visual ya sea que haya hecho clic en un botón o un agente de IA haya llamado a la herramienta.

La instalación es sencilla:

npm install @mcp-b/react-webmcp @mcp-b/global zod

---

Seguridad: Nativa del Navegador por Diseño

WebMCP no agrega la seguridad como algo secundario — hereda todo el modelo de seguridad del navegador. Esta es una de las ventajas clave de ser un estándar del lado del cliente en lugar de un protocolo backend.

Protecciones Integradas

• Política de mismo origen — Las herramientas heredan el límite de origen de su página de alojamiento. Una herramienta en ejemplo.com no puede acceder a datos de otro-sitio.com
• HTTPS obligatorio — La API está restringida a contextos seguros. Sin HTTP, sin URIs file://
• Integración CSP — La ejecución de herramientas respeta las directivas de la Política de Seguridad de Contenido, por lo que tus headers de seguridad existentes se aplican
• Aislamiento a nivel de dominio — La disponibilidad de herramientas está limitada a dominios específicos con verificación de hash

La Bandera agentInvoked

Una característica particularmente ingeniosa: SubmitEvent.agentInvoked. Cuando un formulario es enviado por un agente de IA en lugar de un humano, esta bandera se establece en true. Esto permite que tu código del lado del servidor diferencie entre acciones humanas y de agentes — útil para limitación de tasa, analítica, detección de fraude o requerir verificación adicional para transacciones iniciadas por agentes.

form.addEventListener('submit', (event) => {
  if (event.agentInvoked) {
    // El agente envió este formulario — registrar, verificar o limitar tasa
    analytics.track('agent_form_submission', { tool: 'searchWorkflows' });
  }
});

Humano en el Bucle

El estándar está explícitamente diseñado alrededor de flujos de trabajo cooperativos con humano en el bucle. Para operaciones sensibles (compras, eliminaciones, cambios de cuenta), el navegador puede requerir confirmación explícita del usuario antes de ejecutar la llamada a herramienta de un agente. Las herramientas también pueden declararse como solo lectura para omitir la confirmación en operaciones de solo consulta.

---

Rendimiento: Por Qué las Herramientas Estructuradas Superan al Screen-Scraping

El argumento de rendimiento para WebMCP es convincente. Los agentes de IA actuales que interactúan con sitios web típicamente funcionan tomando capturas de pantalla, analizando el diseño visual y luego generando clics de ratón y pulsaciones de teclas para simular la interacción humana. Este enfoque es lento, computacionalmente costoso y frágil.

WebMCP reemplaza esto con llamadas a funciones directas:

Métrica	Basado en Captura	WebMCP Estructurado
Uso de tokens	Tokens de captura de página completa	Esquema mínimo + respuesta
Precisión	~70-80% (errores de análisis visual)	~98% (validado por esquema)
Carga computacional	Alta (procesamiento de modelo de visión)	Baja (llamadas a funciones directas)
Fiabilidad	Se rompe con cambios de UI	Estable mientras se mantenga el esquema

Los primeros benchmarks del grupo comunitario W3C reportan una reducción del 89% en uso de tokens comparado con enfoques basados en capturas de pantalla, con la precisión de tareas saltando a aproximadamente 98%. Para plataformas que sirven agentes de IA a escala, esto se traduce directamente en menores costos y tiempos de respuesta más rápidos.

"WebMCP convierte cada sitio web de un rompecabezas visual que los agentes tienen que resolver en una API tipada que pueden llamar directamente. Es la diferencia entre hacer OCR a un menú y leer un endpoint JSON."

---

Estado Actual y Qué Viene Después

Seamos claros sobre dónde se encuentra WebMCP hoy:

• Disponible en: Solo Chrome 146 Canary, detrás de la bandera de función "WebMCP for testing"
• Proceso de estándares: Transicionando de incubación comunitaria W3C a borrador formal
• Listo para producción: Aún no — esta es una vista previa temprana para prototipado y retroalimentación
• Cronograma esperado: Anuncios formales de navegadores esperados para mediados o finales de 2026, probablemente en Google Cloud Next o Google I/O

El repositorio de especificaciones es público en github.com/webmachinelearning/webmcp, y el Grupo Comunitario W3C está revisando activamente las preocupaciones de seguridad, privacidad e interoperabilidad. La participación de Microsoft sugiere que el soporte de Edge basado en Chromium seguirá de cerca a Chrome.

Qué deberían hacer los equipos creativos ahora

1. No implementes WebMCP en producción todavía. La superficie de la API puede cambiar antes de que la especificación se finalice. Invertir tiempo de ingeniería ahora arriesga retrabajo.

2. Sí empieza a pensar en tu "superficie para agentes". ¿Qué partes de tu sitio web serían más valiosas como herramientas estructuradas? Búsqueda, navegación de productos, solicitudes de demo, consultas de precios — estas son las interacciones que los agentes de IA querrán realizar en tu nombre.

3. Audita tus formularios. La API Declarativa es tan simple que agregar soporte WebMCP después será trivial — si tus formularios están bien estructurados. Ahora es un buen momento para asegurarte de que tus formularios usen HTML semántico, tipos de entrada apropiados y nombres descriptivos.

4. Considera el futuro de doble protocolo. Si tu plataforma ya soporta MCP backend (como XainFlow), WebMCP agrega una capa complementaria del lado del cliente. MCP backend maneja pipelines de automatización; WebMCP maneja interacciones de agentes basadas en navegador. Juntos, hacen que todo tu stack sea accesible para agentes.

---

Qué Significa Esto para la Web Impulsada por IA

WebMCP representa un cambio filosófico en cómo pensamos sobre los sitios web. Durante dos décadas, la web ha sido diseñada para ojos humanos y clics humanos. Los lectores de pantalla y los estándares de accesibilidad hicieron la web más inclusiva para personas con discapacidades. WebMCP hace algo análogo para los agentes de IA — hace que la web sea legible por máquinas a nivel de interacción, no solo a nivel de contenido.

Para plataformas creativas, agencias y cualquier negocio con presencia web, la implicación es clara: tu sitio web está a punto de recibir una nueva categoría de visitante. Agentes de IA que navegan, buscan, comparan y realizan transacciones en nombre de usuarios humanos. Los sitios que hablen su idioma — a través de herramientas estructuradas y validadas por esquema — capturarán ese tráfico. Los que no, obligarán a los agentes a adivinar, raspar y luchar.

El estándar es temprano. La oportunidad de prepararse es ahora. Y las plataformas que inviertan en estar listas para agentes hoy — a través de MCP en el backend y WebMCP en el frontend — serán las que definan cómo los agentes de IA experimentan la web.