WebMCP : hacer que tu sitio sea « agent‑ready » en Chrome

WebMCP : hacer que tu sitio sea « agent‑ready » en Chrome

Sommaire

Por qué los agentes « que hacen clic » fallan (y cuestan)

Hoy, muchos agentes web fingen ser humanos.
Leen capturas de pantalla, adivinan dónde está el botón correcto, hacen clic, esperan, vuelven a empezar.

Funciona… hasta el día en que cambias una etiqueta, un diseño o un flujo.
Y entonces: flaky, latencia, consumo de tokens, y errores difíciles de diagnosticar.

WebMCP intenta poner una idea sencilla en el centro: si tu sitio ya sabe ejecutar una acción, mejor descríbela correctamente.

¿Qué es WebMCP ?

WebMCP añade una capa "legible para una máquina" encima de tu interfaz web.
Expones unas herramientas que el navegador puede presentar a un agente.

Chrome habla de dos APIs complementarias:

  • API declarativa : transformar formularios HTML en herramientas (bajo esfuerzo, gran ganancia).
  • API imperativa : declarar herramientas en JavaScript (más potente, más flexible).

WebMCP vs MCP (backend)

El Model Context Protocol (MCP) "clásico" está pensado cliente <---> servidor.

Expones tus herramientas vía un servicio (Node/Python), luego un agente las consume a distancia (como una API REST por ejemplo).

WebMCP, en cambio, se ejecuta en una pestaña.
Puedes verlo como "un servidor MCP… del lado del cliente", lo más cercano posible a la UI y a la sesión del usuario.

Consecuencia directa :

  • reutilizas tu código front existente (estado, auth, lógica de UI),
  • puedes hacer human‑in‑the‑loop limpiamente,
  • pero necesitas un contexto de navegación (no "headless" puro en este estadio).

La API imperativa : navigator.modelContext

La API imperativa sirve cuando tu UI es dinámica, o cuando quieres devolver resultados estructurados sin pasar por un formulario.

Los 4 métodos a conocer

  • provideContext({ tools }) : reemplaza todo el set de herramientas (práctico en SPA).
  • registerTool(tool) : añade una herramienta sin tocar las otras.
  • unregisterTool(name) : retira una herramienta.
  • clearContext() : limpia todo.

¿Qué es exactamente una herramienta?

Una herramienta es una definición JSON + una función execute.
El punto que lo cambia todo: el inputSchema (JSON Schema) que contractualiza la entrada.

También puedes anotar la herramienta con una pista readOnlyHint cuando no modifica nada.

Ejemplo: exponer una búsqueda de productos (retorno JSON)

// Exemple minimal : un tool côté client.
// Objectif : éviter que l’agent scrolle, clique 12 filtres et parse du HTML.

if ("modelContext" in navigator) {
  navigator.modelContext.registerTool({
    name: "search_products",
    description: "Recherche des produits dans le catalogue",
    annotations: { readOnlyHint: true },
    inputSchema: {
      type: "object",
      additionalProperties: false,
      properties: {
        query: { type: "string", description: "Texte libre" },
        category: { type: "string", description: "Catégorie (slug)" },
        minPrice: { type: "number", description: "Prix minimum" },
        maxPrice: { type: "number", description: "Prix maximum" }
      },
      required: ["query"]
    },

    // execute peut être async.
    // Le 2e param (client) sert notamment à demander une interaction utilisateur.
    execute: async ({ query, category, minPrice, maxPrice }, client) => {
      const params = new URLSearchParams({ query });
      if (category) params.set("category", category);
      if (minPrice != null) params.set("minPrice", String(minPrice));
      if (maxPrice != null) params.set("maxPrice", String(maxPrice));

      const res = await fetch(`/api/products/search?${params.toString()}`);
      if (!res.ok) {
        // Astuce : renvoyer une erreur explicite aide l’agent à se corriger.
        return { ok: false, error: `Search failed (${res.status})` };
      }

      const data = await res.json();
      return { ok: true, results: data.results };
    }
  });
}

Reglas de diseño que evitan herramientas « inutilizables »

  • Nombrar con verbo + complemento : search_products, create_ticket, book_flight.
  • Mantener pequeñas : una herramienta = una intención clara.
  • Devolver datos estructurados : JSON estable, no un bloque de texto.
  • Manejar errores : códigos, mensajes y campos faltantes.

La API declarativa : transformar un <form> en herramienta

Es la transición más progresiva.
Tu formulario sigue siendo 100% utilizable por un humano, y si WebMCP está disponible, también puede ser invocado por un agente.

Atributos clave

  • toolname : identificador de la herramienta.
  • tooldescription : descripción en lenguaje natural.
  • toolparamdescription : descripción de un campo (parámetro).
  • toolautosubmit : permite el envío sin clic manual.

Sin toolautosubmit, Chrome puede pausar la ejecución del lado del agente y esperar una acción del usuario.
Es un enfoque "permission‑first" que evita sorpresas.

Ejemplo: formulario de reserva

<form
  toolname="book_table"
  tooldescription="Réserver une table au restaurant"
  action="/reserve"
  method="post"
>
  <label for="date">Date</label>
  <input
    id="date"
    name="date"
    type="date"
    required
    toolparamdescription="Date de réservation"
  />

  <label for="time">Heure</label>
  <input
    id="time"
    name="time"
    type="time"
    required
    toolparamdescription="Heure (format local)"
  />

  <label for="guests">Convives</label>
  <input
    id="guests"
    name="guests"
    type="number"
    min="1"
    max="12"
    required
    aria-description="Entre 1 et 12"
  />

  <button type="submit">Réserver</button>
</form>

Accesibilidad : aquí, WebMCP recompensa las buenas prácticas

Chrome construye la descripción de los parámetros priorizando:

  1. toolparamdescription si está presente,
  2. si no, el texto del label,
  3. si no, aria-description.

Traducción: si tus formularios están bien (labels asociados, ARIA útil), ya has hecho el 80% del trabajo.
Y mejoras, además, la experiencia para los lectores de pantalla (WCAG 2.2, todo eso).

Señales de UI para inspirar confianza

WebMCP introduce también señales "visuales" útiles:

  • eventos toolactivation y toolcancel (dispatch en window),
  • pseudo‑clases CSS :tool-form-active y :tool-submit-active.

Te permite mostrar un estado claro cuando un agente "pilota" la página.
Tu usuario ve lo que está pasando, en lugar de sufrir una magia opaca.

window.addEventListener("toolactivation", (e) => {
  console.log("Tool started:", e.toolName);
});

window.addEventListener("toolcancel", (e) => {
  console.log("Tool cancelled:", e.toolName);
});

/* Petit feedback visuel pendant l’interaction agent */
form:tool-form-active { outline: 2px solid currentColor; }
button:tool-submit-active { opacity: 0.7; }

Seguridad, consentimiento, y “humano‑en‑el‑bucle” (el verdadero tema)

El riesgo, cuando hablamos de agentes, es desplazarnos hacia una web que hace acciones "a tus espaldas".
WebMCP impulsa más bien una lógica inversa: el navegador arbitra.

En el lado imperativo, puedes pedir una interacción del usuario durante execute.
En el declarativo, la ausencia de toolautosubmit fuerza un gesto humano.

Mi consejo: empieza con un marco simple.

  • Herramientas solo‑lectura : búsqueda, filtros, lectura de datos.
  • Herramientas de escritura : detrás de una confirmación explícita.

Limitaciones actuales (a asumir en el artículo)

WebMCP todavía está en fase temprana.
Y se nota en las limitaciones.

  • Pestaña requerida : las herramientas viven en un top‑level browsing context.
  • Descubribilidad : no hay un "catálogo" nativo de herramientas por sitio.
  • Evolución rápida : es un borrador de Community Group, así que está cambiando.

Tómatelo como una señal: la dirección está clara, la API se estabilizará.
Pero todavía estamos en la fase de prototipado, no de rehacer tu sistema de información.

Cómo probar hoy (febrero de 2026)

1) Acceder a la vista previa temprana

WebMCP se ofrece en el marco del Chrome Early Preview Program (EPP).
El objetivo es prototipar, dar feedback y iterar rápido.

2) Usar Chrome Canary + flag

La herramienta alrededor de WebMCP menciona Chrome 146+ con el flag :

  • chrome://flags → WebMCP for testing

3) Inspeccionar las herramientas con “Model Context Tool Inspector”

Una extensión permite listar las herramientas expuestas por la página y ejecutarlas.
Es perfecta para validar tu esquema, tu naming y tu payload.

Estrategia de adopción (simple, realista)

Si quieres hablar de esto "como un desarrollador de campo", aquí tienes un enfoque en 3 pasos.

Etapa 1 — Empieza por los formularios

Busca tus 3 formularios más frecuentes :

  • búsqueda,
  • contacto/soporte,
  • checkout / reserva,
  • filtros avanzados.

Añade toolname + tooldescription.
Luego mejora la calidad de los labels y las descripciones.

Etapa 2 — Añade 1 o 2 herramientas imperativas con alto ROI

Ejemplos típicos :

  • search_products que devuelve JSON limpio,
  • create_support_ticket que pre‑rellena la información técnica.

Tu objetivo : reemplazar 20 acciones de UI por 1 llamada.

Etapa 3 — Añade salvaguardas

  • readOnlyHint cuando sea lectura.
  • Confirmación (human‑in‑the‑loop) cuando sea escritura.
  • Logs y observabilidad : debes poder reproducir "lo que hizo el agente".

FAQ

« ¿Esto reemplaza la accesibilidad? »

No.
Pero puede ayudar en ciertos recorridos (UI conversacional), especialmente cuando el árbol de accesibilidad de un sitio es pobre.
La combinación ganadora sigue siendo : accesibilidad sólida + herramientas claras.

« ¿Debo añadir WebMCP en todas partes? »

No.
Empieza por los flujos críticos y repetitivos.
El resto vendrá si el tráfico "agente" se convierte en un tema real.

« ¿Funciona en todos los navegadores? »

No hoy.
Pero Google y Microsoft están co‑portando el tema a nivel de estandarización.
Vale la pena ser early adopter en un perímetro pequeño.

Conclusión

WebMCP no es "solo otra cosa de IA".
Es un intento de hacer la web más accesible para agentes sin romper la web humana.

Si ya tienes buenos formularios y una UI bien estructurada, partes con ventaja.
Y si quieres ir más lejos, la API imperativa te permite exponer acciones robustas, versionadas y testeables.

Enlaces útiles

Etiquetas

  • MCP

  • agentic web

  • tools

  • Model Context Protocol

  • chrome

  • WebMCP

Este artículo fue publicado el

Comentarios

Cargando...