WebMCP desmitificado: preparar tu web para agentes en e-commerce y CMS

Los agentes de IA se están convirtiendo en una parte real de cómo las personas interactúan con la web. Buscan productos, rellenan formularios, reservan citas y completan compras, todo navegando por sitios web en tu nombre. Pero hay un problema fundamental: los sitios web están hechos para humanos, no para máquinas.

Un agente de IA que observa tu sitio de e-commerce ve un amasijo de divs, botones y formularios. Tiene que adivinar qué hace cada elemento, lo que provoca interacciones lentas y propensas a errores. WebMCP resuelve esto permitiéndote indicar a los agentes exactamente qué puede hacer tu sitio web, en un lenguaje que entienden.

WebMCP es un nuevo estándar del navegador (actualmente en origin trial, Chrome 149+) que te permite exponer la funcionalidad de tu sitio web como "herramientas" estructuradas para agentes de IA. Sin cambios en el backend, sin API separadas. Solo tu sitio web existente, preparado para agentes.

En este artículo explicamos qué es WebMCP, qué permite para los sitios de e-commerce y CMS, y cómo puedes empezar a usarlo, ya seas desarrollador o propietario de un sitio web.

¿Qué es WebMCP?

WebMCP (Web Model Context Protocol) es un estándar propuesto por el W3C que ofrece dos API complementarias para registrar herramientas en una página web:

• La API imperativa: registro de herramientas en JavaScript mediante document.modelContext.registerTool()
• La API declarativa: anotaciones con atributos HTML en elementos <form> existentes (toolname, tooldescription, toolparamdescription)

Ambas API cumplen el mismo propósito: hacen que las capacidades de tu sitio web sean descubribles y ejecutables por agentes de IA que se ejecutan en el navegador (el agente integrado de Chrome, extensiones del navegador u otras plataformas de agentes).

Cómo funciona

┌─────────────────────────────────────────────┐
│              Web Browser                     │
│  ┌───────────────────────────────────────┐  │
│  │  Running Page (your website)          │  │
│  │  ┌─────────────────────────────────┐  │  │
│  │  │  WebMCP Tools                   │  │  │
│  │  │  - search_products()            │  │  │
│  │  │  - add_to_cart()                │  │  │
│  │  │  - submit_order()               │  │  │
│  │  └─────────────────────────────────┘  │  │
│  └───────────────────────────────────────┘  │
│              │                               │
│  Browser AI Agent                           │
└──────────────┼───────────────────────────────┘
               │
    Agent invokes tools → UI updates visibly

La diferencia clave con las integraciones tradicionales de backend (como los servidores MCP) es que las herramientas WebMCP se ejecutan dentro de la pestaña del navegador, en la página que el usuario ya está viendo. El agente actúa sobre el DOM en vivo, en la sesión del usuario, con acceso completo a las cookies, el estado de autenticación y los datos en tiempo real.

Qué permite WebMCP para el e-commerce

Búsqueda y descubrimiento de productos

En lugar de que un agente recorra cientos de páginas de productos tratando de encontrar lo que coincide con la petición de un usuario, una herramienta search_products bien definida permite al agente consultar tu catálogo directamente:

await document.modelContext.registerTool({
  name: "search_products",
  description: "Search the product catalog by category, price range, and features.",
  inputSchema: {
    type: "object",
    properties: {
      category: { type: "string", description: "Product category" },
      max_price: { type: "number", description: "Maximum price in EUR" },
      features: {
        type: "array",
        items: { type: "string" },
        description: "Required features, e.g. ['organic', 'gluten-free']"
      }
    },
    required: ["category"]
  },
  async execute({ category, max_price, features }) {
    const results = await fetch(`/api/products?category=${category}&max_price=${max_price}&features=${features.join(",")}`);
    return results.json();
  }
});

Un usuario puede entonces decir: "Encuéntrame comida orgánica para bebés por menos de 5 € para mi hijo de 1 año", y el agente llama directamente a tu herramienta, devolviendo resultados estructurados que tu interfaz ya sabe mostrar.

Flujos de pago y compra

Las herramientas WebMCP pueden guiar a los agentes por recorridos de pago complejos:

Esto es especialmente valioso para las compras recurrentes. Un usuario que pide "Vuelve a pedir el café en grano que compré el mes pasado" puede ser atendido por una herramienta get_order_history() que devuelve los pedidos anteriores, seguida de add_to_cart() y submit_order().

Atención al cliente

Los flujos de soporte complejos (reclamaciones de garantía, devoluciones, cambios) a menudo requieren navegar por varias páginas y formularios. Las herramientas WebMCP pueden:

• Navegar a la página de soporte correcta (start_claim_process())
• Rellenar previamente los campos conocidos (populate_product_details())
• Enviar el formulario completado (submit_claim())

El usuario ve el formulario rellenarse en tiempo real en su pantalla, lo que mantiene la confianza y la visibilidad.

Qué permite WebMCP para los CMS

Búsqueda y recuperación de contenido

Un sitio impulsado por un CMS puede exponer la búsqueda y el filtrado como herramientas:

await document.modelContext.registerTool({
  name: "search_articles",
  description: "Search articles by topic, date, author, or keywords.",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string", description: "Search query" },
      category: { type: "string", description: "Article category" },
      date_from: { type: "string", description: "Start date (YYYY-MM-DD)" },
      date_to: { type: "string", description: "End date (YYYY-MM-DD)" }
    },
    required: ["query"]
  },
  async execute({ query, category, date_from, date_to }) {
    // Query your CMS search index
    return await cmsSearch({ query, category, date_from, date_to });
  }
});

Interacciones basadas en formularios

Los sitios CMS suelen tener formularios de contacto, suscripciones a boletines, inscripciones a eventos y sistemas de reservas. La API declarativa te permite convertirlos en herramientas WebMCP con solo unos pocos atributos HTML, sin necesidad de JavaScript.

<form
  toolname="book_event"
  tooldescription="Register for a public event at our venue."
  toolautosubmit
>
  <label for="name">Full Name</label>
  <input name="name" type="text"
    toolparamdescription="Attendee's full name" required />

  <label for="email">Email</label>
  <input name="email" type="email"
    toolparamdescription="Contact email address" required />

  <label for="date">Event Date</label>
  <input name="date" type="date"
    toolparamdescription="Date of the event" required />

  <label for="guests">Number of Guests</label>
  <select name="guests"
    toolparamdescription="Number of attendees (1-50)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5+</option>
  </select>

  <button type="submit">Register</button>
</form>

Cuando un agente invoca esta herramienta, el navegador enfoca el formulario, rellena los campos y, con toolautosubmit, lo envía automáticamente. El usuario ve todo lo que ocurre en la pantalla.

Filtrado y navegación de contenido

Para sitios con grandes colecciones de contenido (portales de noticias, catálogos, documentación), las herramientas de filtrado permiten a los agentes acotar los resultados con precisión:

await document.modelContext.registerTool({
  name: "filter_articles",
  description: "Refine article results by reading time, language, or tags.",
  inputSchema: {
    type: "object",
    properties: {
      max_read_time: { type: "number", description: "Maximum reading time in minutes" },
      language: {
        type: "string",
        enum: ["en", "fr", "de", "es"],
        description: "Article language"
      },
      tags: {
        type: "array",
        items: { type: "string" },
        description: "Article tags to include"
      }
    }
  },
  async execute({ max_read_time, language, tags }) {
    // Apply filters to current results
    return applyFilters({ max_read_time, language, tags });
  }
});

Declarativo vs. imperativo: ¿cuál usar?

WebMCP ofrece dos API. No compiten entre sí; son complementarias. Así es como elegir.

La API declarativa

Qué es: añades atributos HTML a elementos <form> existentes. Eso es todo. Sin JavaScript.

Ideal para:

• Formularios que ya existen y funcionan para usuarios humanos
• Formularios de contacto, registro, reservas, búsqueda
• Sitios construidos con plataformas CMS que generan el HTML de los formularios
• Victorias rápidas: puedes añadir compatibilidad con WebMCP a un sitio existente en minutos

Ventajas:

• No requiere JavaScript
• Funciona con cualquier formulario HTML
• Fácil de mantener junto a tu marcado existente
• Excelente para la recogida de datos sencillos y estructurados

Inconvenientes:

• Limitada a interacciones basadas en formularios
• Menos control sobre la lógica de ejecución
• No puede registrar/desregistrar herramientas dinámicamente según el estado de la página
• La generación del esquema es implícita (basada en la estructura del formulario)

Úsala cuando: tu necesidad principal sea hacer que los formularios sean accesibles para los agentes. Si las interacciones clave de tu sitio son envíos de formularios (contacto, reservas, búsqueda, registro), empieza por aquí.

La API imperativa

Qué es: llamas a document.modelContext.registerTool() desde JavaScript, definiendo herramientas con nombres, descripciones, esquemas JSON y funciones de ejecución.

Ideal para:

• Interacciones complejas más allá de los formularios (búsqueda de productos, gestión del carrito, filtrado)
• Registro dinámico de herramientas (herramientas que aparecen/desaparecen según el contexto)
• Herramientas que necesitan llamar a API, transformar datos o devolver resultados estructurados
• Sitios que necesitan un control detallado del comportamiento del agente

Ventajas:

• Control total sobre el comportamiento de las herramientas y los valores de retorno
• Registro y desregistro dinámicos
• Puede llamar a API de backend, transformar datos, devolver JSON
• Amplia compatibilidad con JSON Schema (enums, tipos, validación)
• Compatibilidad con iframes de origen cruzado mediante exposedTo

Inconvenientes:

• Requiere una implementación en JavaScript
• Más esfuerzo de desarrollo
• Debes gestionar el ciclo de vida de las herramientas

Úsala cuando: tus interacciones van más allá de simples envíos de formularios: catálogos de productos de e-commerce, filtrado dinámico, flujos de trabajo de varios pasos, o cualquier escenario en el que necesites devolver datos estructurados a partir de la ejecución de una herramienta.

Matriz de decisión

¿Puedes usar ambas?

Por supuesto. Un sitio bien diseñado puede usar la API declarativa para formularios estáticos (contacto, boletín) y la API imperativa para interacciones dinámicas (búsqueda de productos, gestión del carrito). Conviven en la misma página sin conflictos.

WebMCP vs. MCP: no son competidores, son socios

Es importante entender que WebMCP no es un sustituto del Model Context Protocol (MCP). Resuelven problemas diferentes:

Piénsalo así: MCP es tu capa de servicios de backend: gestiona la lógica de negocio principal, la recuperación de datos y las tareas en segundo plano. WebMCP es tu capa de frontend: conecta a los agentes directamente con el sitio web que el usuario está viendo, lo que permite interacciones contextuales dentro del navegador.

Las aplicaciones agénticas más eficaces usan ambas: MCP para el trabajo pesado (datos, autenticación, lógica de negocio) y WebMCP para la experiencia interactiva (accionamiento de la UI, retroalimentación en tiempo real, flujos de trabajo con el humano en el bucle).

Primeros pasos

Disponibilidad

WebMCP está disponible actualmente en Chrome 149+ mediante un origin trial. Para participar:

1. Regístrate en el origin trial en el portal de origin trials de Chrome
2. Añade la etiqueta meta del origin trial a tu HTML
3. Implementa tus herramientas con cualquiera de las dos API

Para el desarrollo local, puedes habilitar WebMCP mediante chrome://flags/#enable-webmcp-testing.

Seguridad

Las herramientas WebMCP están limitadas por:

• Aislamiento de origen: las herramientas solo funcionan en documentos con origen aislado
• Permissions Policy: la política tools tiene como valor predeterminado self, lo que desactiva las herramientas en iframes de origen cruzado salvo que se permita explícitamente con allow="tools"

Las herramientas son efímeras: solo existen mientras la página está abierta. En cuanto el usuario navega a otra página o cierra la pestaña, el agente pierde el acceso.

Buenas prácticas

1. Una herramienta, una tarea: cada herramienta debe realizar una única tarea bien definida. Evita herramientas que se solapen.
2. Nombres claros: usa verbos que describan exactamente lo que ocurre (create-event en lugar de start-event-creation-process).
3. Descripciones positivas: describe lo que una herramienta puede hacer, no lo que no puede hacer.
4. Acepta la entrada en bruto: no pidas al agente que haga cálculos o formatee cadenas. Deja que la herramienta se encargue de ello.
5. Valida estrictamente en el código, de forma flexible en el esquema: las restricciones del esquema ayudan, pero no están garantizadas.
6. Gestiona el ciclo de vida de las herramientas: registra las herramientas cuando sean relevantes, desregístralas cuando no lo sean.
7. Confía en el agente: describe capacidades, no prescribas flujos exactos.

Ejemplos reales

Google ha publicado varias demos que muestran WebMCP en acción:

• Pizza Maker (imperativa): pedir una pizza con personalización por capas
• Flight Search (imperativa, React): buscar vuelos con filtros complejos
• Le Petit Bistro (declarativa): formulario de reserva de restaurante con anotaciones HTML

Estas demos muestran las dos API una al lado de la otra y son un excelente punto de partida para experimentar.

¿Y ahora qué?

WebMCP sigue en desarrollo activo. La especificación se está perfeccionando en GitHub y la implementación de Chrome está sujeta a cambios. Angular también tiene compatibilidad experimental con el registro de herramientas WebMCP.

Para los desarrolladores que construyen plataformas de e-commerce, soluciones CMS o cualquier aplicación web en la que los agentes de IA deban interactuar con páginas orientadas al usuario, WebMCP representa un cambio fundamental: en lugar de que los agentes adivinen cómo funciona tu sitio, tu sitio les dice exactamente qué puede hacer.

El resultado son interacciones más rápidas, más fiables y más transparentes, con el usuario siempre al mando.

Este artículo se basa en la documentación oficial para desarrolladores de Chrome, la especificación W3C WebMCP y las demos WebMCP de Google. WebMCP es un estándar propuesto y está sujeto a cambios.