Ahora mismo, un agente de IA que usa un sitio web se comporta un poco como un turista sin mapa. Mira la página, adivina qué hace cada botón, hace clic y espera que nada se haya movido. A veces funciona. Muchas veces no.

WebMCP le da un mapa al agente. El sitio web publica herramientas con nombre, como search_products o book_table, y el agente las llama directamente.

WebMCP de un vistazo (octubre de 2026)

Como los detalles cambian rápido, consulta siempre la documentación actual de WebMCP de Chrome antes de copiar cualquier código, incluido el nuestro.

¿Qué es WebMCP?

El nombre significa Web Model Context Protocol. Se inspira en MCP, el protocolo que conecta las aplicaciones de IA con herramientas y datos, pero es un conjunto de API del navegador, no una copia de MCP. Piensa en reservar un restaurante. Puedes llamar y decirle a una persona lo que quieres, o puedes entrar y averiguar por tu cuenta dónde ponerte y a quién preguntar. La mayoría de los agentes de hoy hacen lo segundo. WebMCP es la llamada telefónica: el sitio dice “Dime la fecha y el número de comensales y lo reservo”.

Por qué existe: los sitios web están hechos para personas, con diseños, iconos y ventanas emergentes. Los agentes tienen que deducirlos a partir del código en bruto o de capturas de pantalla, lo que es lento, costoso y propenso a errores. A medida que más gente usa la IA para navegar y comprar, los dueños de sitios necesitan una forma limpia de decir “Los agentes son bienvenidos, y esta es la forma segura de usar mi sitio”. WebMCP da a los agentes tres cosas:

• Descubrimiento: una forma estándar de ver qué herramientas ofrece una página.
• Entradas y salidas claras: las herramientas usan JSON Schema, así que hay menos margen para la confusión.
• Estado compartido: el agente sabe qué hay en la página en ese momento.

Cómo funciona WebMCP

Una página registra herramientas. El navegador las sigue. Un agente del navegador pregunta qué hay disponible, elige una y la ejecuta. Cada herramienta tiene un nombre, una descripción, un esquema de entrada y una función que hace el trabajo.

Las herramientas solo existen mientras la página está abierta. Un agente o una extensión del navegador puede llamar a document.modelContext.getTools() para ver la lista actual, y se dispara un evento toolchange cuando cambia, lo que importa en las aplicaciones de una sola página.

1. El usuario abre tu sitio en un navegador con WebMCP activado.
2. Tu página registra sus herramientas.
3. El usuario le pide a su agente: “Búscame una chaqueta azul por menos de 80 $”.
4. El agente elige search_products y envía una entrada JSON.
5. Tu código se ejecuta y devuelve un resultado corto.
6. El agente lo lee y continúa, o muestra al usuario lo que encontró.

La API Declarative

Es la opción más ligera. Conviertes un formulario HTML normal en una herramienta con unos pocos atributos. Los campos del formulario pasan a ser las entradas de la herramienta. Es un buen comienzo para formularios de búsqueda, contacto, soporte y reservas.

<form toolname="book_table"
      tooldescription="Reserva una mesa de restaurante para una fecha y un número de comensales."
      action="/reservations">
  <label for="guests">Número de comensales</label>
  <input id="guests" name="guests" type="number" min="1" max="12" required>
  <label for="date">Fecha</label>
  <input id="date" name="date" type="date" required>
  <select name="time" required
          toolparamdescription="Hora preferida para la reserva.">
    <option value="18:00">18:00</option>
    <option value="19:30">19:30</option>
  </select>
  <button type="submit">Reservar mesa</button>
</form>

• toolname y tooldescription registran la herramienta. Quítalos y se elimina el registro.
• toolparamdescription es opcional y describe un campo. Sin él, el navegador usa la etiqueta del campo.
• Cuando un agente llama a la herramienta, el navegador enfoca el formulario y lo rellena. El usuario puede verlo.
• Por defecto el usuario aún debe pulsar enviar. toolautosubmit envía automáticamente, así que úsalo solo para acciones seguras.

En JavaScript, un evento submit tiene una propiedad agentInvoked, y respondWith() te permite devolver un resultado claro:

const form = document.querySelector("form[toolname='book_table']");
form.addEventListener("submit", (event) => {
  if (!event.agentInvoked) return;   // envío humano normal
  event.preventDefault();
  event.respondWith(Promise.resolve("Mesa solicitada. Esperando la confirmación del usuario."));
});

Chrome también añade las pseudoclases CSS :tool-form-active y :tool-submit-active, para que puedas resaltar un formulario mientras un agente lo usa.

La API Imperative

Úsala para acciones que no son formularios, como filtrar una lista o añadir al carrito. Registras una herramienta con document.modelContext.registerTool(). Comprueba primero que la API existe, porque la mayoría de los navegadores aún no la tienen. Necesitas conocimientos básicos de JavaScript, así que consulta nuestro tutorial de JavaScript si hace falta.

if ("modelContext" in document) {
  await document.modelContext.registerTool({
    name: "search_products",
    description: "Busca en la tienda por palabra clave. Devuelve hasta 5 productos que coincidan.",
    inputSchema: {
      type: "object",
      properties: {
        query:    { type: "string", description: "Palabras de búsqueda, por ejemplo 'zapatillas de correr'" },
        maxPrice: { type: "number", description: "Precio máximo en USD" }
      },
      required: ["query"]
    },
    annotations: { readOnlyHint: true, untrustedContentHint: true },
    execute: async ({ query, maxPrice }, { signal }) => {
      const url = new URL("/api/products", location.origin);
      url.searchParams.set("q", query);
      if (maxPrice) url.searchParams.set("max", String(maxPrice));
      const res = await fetch(url, { signal });
      if (!res.ok) return "La búsqueda falló. Inténtalo de nuevo.";
      const products = await res.json();
      return products.slice(0, 5).map(p => `${p.name} - $${p.price}`).join("\n")
        || "No se encontraron productos.";
    }
  });
}

• Pasa el AbortSignal a fetch, para que el trabajo se detenga si el usuario o el agente cancelan.
• Las anotaciones son pistas para agentes y navegadores (consulta Seguridad más abajo).
• ¿Usas TypeScript? Chrome apunta al paquete webmcp-types. Consulta nuestro tutorial de TypeScript.

Escribe buenos esquemas de entrada

• Usa tipos simples: string, number, boolean.
• Usa enum cuando solo se permitan algunos valores.
• Marca como required los campos realmente necesarios y da descripciones cortas de los parámetros.
• Valida siempre la entrada por tu lado. Un agente no es un llamador de confianza.

La guía temprana de tamaños de Chrome es: unos 500 caracteres para la descripción de una herramienta, 150 para la de un parámetro, 30 para los nombres y 1.500 para una salida. Las cifras pueden cambiar, pero la lección se mantiene: corto y claro gana a largo e ingenioso.

Devuelve resultados cortos

Lo que devuelve tu herramienta es lo que ve el agente. “El pedido 4821 se envió el lunes y llegará el jueves” es mejor que un volcado de datos en bruto. Tu servidor debe seguir comprobando que el usuario autenticado es el dueño de ese pedido, porque WebMCP no sustituye a la seguridad normal. Si una herramienta envuelve tu propia API, prueba primero esa API. Las pruebas de API con Postman son un buen hábito, y las buenas prácticas de API REST te ayudan a diseñarla.

Para acciones con efectos en el mundo real, añade consequentialHint: true y pide al usuario que confirme en tu propia interfaz antes de cobrar o eliminar nada.

Pruébalo en Chrome en diez minutos

1. Usa un Chrome reciente. El origin trial empieza en la versión 149.
2. Abre chrome://flags/#enable-webmcp-testing, ponlo en Enabled y reinicia.
3. Sirve tu página por HTTPS o localhost, ya que se necesita un contexto seguro.
4. Añade una herramienta: pega el código anterior o añade los atributos a un formulario sencillo.
5. Instala la extensión Model Context Tool Inspector. Lista las herramientas registradas, te permite ejecutarlas y ofrece un agente de prueba.
6. Rómpelo a propósito con una entrada incorrecta. Los mensajes de error claros ayudan a los agentes a recuperarse.

Guarda tus herramientas en Git (tutorial de Git) y ejecuta comprobaciones en CI con GitHub Actions. Chrome Labs también publica demos funcionales, como un creador de pizzas (Imperative) y un sitio de un bistró (Declarative). Recuerda que esto es un origin trial. Las primeras demos usaban navigator.modelContext y provideContext, y la API ha cambiado desde entonces.

WebMCP vs MCP

WebMCP no sustituye a MCP. El equipo de Chrome lo dice directamente. MCP es un estándar abierto que conecta las aplicaciones de IA con herramientas y datos, y sus servidores se ejecutan en cualquier lugar. WebMCP es la idea del lado del navegador.

La imagen de Chrome: MCP es un centro de llamadas, disponible a cualquier hora desde cualquier lugar. WebMCP es un experto de pie en tu tienda, ayudando a la persona que está ahí ahora. Usa MCP para la lógica principal y los datos que los agentes necesitan en todas partes. Usa WebMCP para lo que solo tiene sentido en tu sitio en vivo, como un formulario complejo, un filtro o la sesión del usuario. Muchos productos usarán ambos. Para encontrar herramientas en primer lugar, consulta Agentic Resource Discovery.

WebMCP vs automatización del navegador

Herramientas como Playwright y Selenium manejan un navegador desde fuera con selectores, clics y comprobaciones. WebMCP funciona desde dentro, con la ayuda del sitio.

Sigue usando Playwright o Selenium para probar tu propia aplicación. Añade herramientas WebMCP para ayudar a los agentes a usar tus tareas clave. Para los sitios que no controlas, la automatización sigue siendo la única opción. Incluso puedes usar la automatización para comprobar que tus herramientas WebMCP se registran correctamente. Consulta Playwright MCP y la IA en QA.

Casos de uso

• Agentes de compras: search_products, add_to_cart, apply_coupon. La herramienta de pago recibe consequentialHint.
• Rellenar formularios: una herramienta submit_application asigna lo que sabe el agente a los campos correctos.
• Atención al cliente: una herramienta create_support_request salta al formulario correcto con los detalles ya rellenados.
• Herramientas de productividad: filter_tasks o create_report ahorran muchos clics en paneles muy cargados.

Seguridad de WebMCP

Dar a un agente herramientas reales en un sitio real requiere cuidado. Chrome tiene una guía de seguridad temprana, y es franco sobre un hecho: no se puede garantizar que ningún modelo sea seguro. Una instrucción maliciosa oculta en el contenido puede engañar a un agente. Esto se llama inyección indirecta de prompts. Así que planifica como si un agente pudiera ser engañado.

• readOnlyHint para herramientas que solo leen.
• untrustedContentHint para herramientas que devuelven datos escritos por usuarios o externos, como reseñas o mensajes.
• consequentialHint para acciones difíciles de deshacer como pagos, reservas o borrados.

• Cuidado con la exposición: por defecto, otros sitios y los iframes de origen cruzado no pueden ver tus herramientas. Usa exposedTo solo para orígenes en los que confíes. El registro de herramientas está desactivado por defecto en los iframes de origen cruzado salvo que lo permita la política de permisos.
• Comprueba los permisos en el servidor en cada llamada.
• Devuelve el mínimo de datos que necesite la tarea.
• Pregunta antes de las acciones importantes en tu propia interfaz.
• Mantén las salidas cortas y estructuradas y evita repetir texto sin procesar del usuario.

Límites hoy

• Experimental: es un borrador de un W3C Community Group, no un estándar oficial.
• Compatibilidad de navegadores: Chrome tiene un origin trial desde la versión 149. Microsoft codesarrolla la especificación, pero consulta las notas de Edge. Firefox y Safari no han anunciado planes de lanzamiento.
• Cambios en la API: la API ha cambiado mucho durante el trial. Espera tener que actualizar el código.
• Persona en el circuito: está diseñado sobre todo para el uso local del navegador con una persona presente.
• Solo con activación voluntaria: funciona solo en sitios que añaden herramientas.

Preguntas frecuentes

Sigue aprendiendo