WEBCMP: QUÉ ES Y CÓMO FUNCIONA

WebMCP (Web Model Context Protocol) es una nueva propuesta de estándar web que permite a las páginas web exponer herramientas estructuradas directamente a agentes de IA, Hasta ahora los agentes de IA tenían que "adivinar" cómo interactuar con una web: analizaban el HTML, tomaban screenshots, simulaban clics, etc. Era lento, poco fiable y caro. Con WebMCP, el desarrollador de la página web define explícitamente qué acciones se pueden hacer como "buscar producto", "añadir al carrito", "completar formulario", "publicar comentario" usando JavaScript, con descripciones en lenguaje natural y esquemas estructurados (como JSON Schema).
Esto se hace principalmente a través de una API del navegador llamada navigator.modelContext.

Características Principales

  • Es client-side, es decir, todo se ejecuta en el navegador, no necesita backend.
  • Se inspira en el Model Context Protocol (MCP) de Anthropic, pero adaptado al navegador (por eso se llama "Web" MCP).
  • Google (Chrome) y Microsoft están impulsándolo fuertemente, ya está en preview en Chrome Canary (versión 146+) desde febrero 2026.
  • Forma parte del W3C Web Machine Learning Community Group.
  • Permite que humanos y agentes de IA colaboren en la misma interfaz web manteniendo el control del usuario.

Ejemplos prácticos

  • Una tienda online podría exponer herramientas como: buscarProductos(categoría, precioMax) o agregarAlCarrito(idProducto, cantidad).
  • Un agente de IA podría entonces completar una compra entera de forma mucho más precisa y barata que analizando píxeles o DOM.
  • Hay librerías open-source como la de https://webmcp.dev/ que añaden un widget azul para conectar fácilmente.
WebMCP no es un lenguaje nuevo ni un framework; es una API JavaScript nativa del navegador (como navigator.geolocation o navigator.share) que permite que las webs sean "agent-ready" exponiendo funciones JS de forma estructurada y segura para IA. Es el puente para que los agentes de IA interactúen de manera directa y fiable con cualquier sitio web sin adivinar el DOM o usar visión.

Ejemplo

Una página de e-commerce sencilla. Registramos 3 herramientas típicas:
  • Buscar productos.
  • Añadir al carrito.
  • Obtener resumen del carrito.
  <script>
    // Esperamos a que el navegador tenga la API (o el polyfill la cree)
    if ('modelContext' in navigator) {
 const mc = navigator.modelContext;

 // Herramienta 1: Buscar productos (lectura)
 mc.registerTool({
   name: "buscarProductos",
   description: "Busca productos en la tienda por categoría o palabra clave. Devuelve lista con nombre, precio y ID.",
   inputSchema: {
     type: "object",
     properties: {
  query: { type: "string", description: "Palabra clave o categoría (ej: 'zapatillas', 'ropa verano')" },
  maxPrecio: { type: "number", description: "Precio máximo opcional" }
     },
     required: ["query"]
   },
   execute: async (args) => {
     // Simulación de búsqueda (en producción usa fetch a tu API)
     const productos = [
  { id: "p1", nombre: "Zapatillas deportivas", precio: 89.99, categoria: "deporte" },
  { id: "p2", nombre: "Camiseta verano", precio: 19.99, categoria: "ropa" },
  { id: "p3", nombre: "Reloj inteligente", precio: 129.00, categoria: "tecnologia" }
     ];

     const filtrados = productos.filter(p => 
  p.nombre.toLowerCase().includes(args.query.toLowerCase()) ||
  p.categoria.toLowerCase().includes(args.query.toLowerCase())
     ).filter(p => !args.maxPrecio || p.precio <= args.maxPrecio);

     return {
  success: true,
  productos: filtrados,
  totalEncontrados: filtrados.length
     };
   }
 });

 // Herramienta 2: Añadir al carrito (acción mutante)
 mc.registerTool({
   name: "agregarAlCarrito",
   description: "Añade un producto al carrito del usuario actual. Requiere ID del producto y cantidad.",
   inputSchema: {
     type: "object",
     properties: {
  productId: { type: "string", description: "ID del producto (ej: 'p1')" },
  cantidad: { type: "integer", description: "Cantidad a añadir (default 1)" }
     },
     required: ["productId"]
   },
   execute: async (args) => {
     const cantidad = args.cantidad || 1;
     // En producción: actualiza estado local o envía a backend
     console.log(`Añadiendo ${cantidad} unidades de ${args.productId} al carrito`);
     
     // Simulamos actualización del DOM (para que el usuario vea el cambio)
     const cartCount = document.querySelector('#cart-count') || document.createElement('span');
     cartCount.id = 'cart-count';
     cartCount.textContent = ` (${cantidad})`;
     document.body.appendChild(cartCount);

     return { success: true, mensaje: `Añadido ${cantidad} × ${args.productId} al carrito` };
   }
 });

 // Herramienta 3: Ver carrito (contexto)
 mc.registerTool({
   name: "obtenerCarrito",
   description: "Devuelve el contenido actual del carrito del usuario.",
   inputSchema: { type: "object", properties: {} }, // Sin parámetros
   execute: async () => {
     // Simulación
     return {
  success: true,
  items: [
    { productId: "p1", nombre: "Zapatillas deportivas", cantidad: 2, subtotal: 179.98 }
  ],
  total: 179.98
     };
   }
 });

 console.log("¡Herramientas WebMCP registradas! Un agente puede descubrirlas y usarlas.");
    } else {
 console.warn("WebMCP no disponible en este navegador. Prueba Chrome Canary con flag activado.");
    }
  </script>