Tutorial de WebMCP, el nuevo estándar que debes aprender

La navegación web agéntica es el futuro. Nos guste o no, todo parece dirigirnos a ella y es por eso que el W3C y Google, en colaboración con Microsoft, han puesto en marcha un nuevo estándar para que los agentes de IA, se muevan correctamente por nuestra página web.

En el pasado ya os he hablado de los navegadores agénticos. De sus virtudes y sus defectos.

Hoy os vengo a hablar de un nuevo estándar, desarrollado nada más y nada menos que por Microsoft y Google, y validado por el W3C, que supondrá un salto cuantitativo en cómo se relacionan los agentes de IA con nuestras páginas web.

Y ojo, que aunque la navegación agéntica a día de hoy sea algo marginal, todo hace pensar que es a donde apunta la industria, por lo que estar preparados desde el inicio para que los agentes de IA sepan relacionarse con nuestra página, puede ser importantísimo de cara a la captación de clientes y conversión de ventas.

Hay que mencionar que aún estamos en una fase muy temprana de este estándar. De hecho, el único navegador que incluye la API necesaria para utilizarlo hoy en día es Canary, la versión para desarrollos y pruebas de Google Chrome.

Esto hace que las especificaciones que hoy conocemos puedan cambiar, pero creo que es útil conocerlas para tenerlas como base de futuras mejoras y ampliaciones.

Pero, ¿Qué es WebMCP?

Web Model Context Protocol vendría a ser el equivalente a los MCP, pero para páginas web.

Con este estándar, crearemos herramientas dentro de nuestra web que los agentes de IA podrán utilizar para, en base a las instrucciones de los usuarios, poder realizar acciones dentro de nuestra web sin (apenas) intervención humana.

Realizar compras, búsquedas complejas, consultas o simplemente cambiar entre el modo oscuro y claro en nuestra web, será posible para los agentes de IA sin que estos tengan que hacer complejos scrapeos de nuestra página. Les dotaremos de una serie de herramientas que serán capaces de utilizar desde el primer momento de forma que reduzcamos los problemas a los que puedan enfrentarse para llevar a cabo tareas en nuestra web.

Hasta ahora, Cuando a un agente de IA incrustado en el navegador le decíamos que añadiera a la cesta de la compra unas zapatillas que estuviéramos viendo, el agente visualizaba la página en base a un scrapeo (con los problemas que esto conlleva en webs basadas en frameworks de JavaScript) e intentaba realizar la acción (la mayoría de las veces, sin éxito).

Con la llegada de WebMCP, haremos que nuestra tienda online, se convierta en una "aplicación" que los agentes de IA sabrán cómo utilizar para que el usuario pueda realizar sus compras simplemente diciéndole al agente lo que quiere comprar.

Para incorporar WebMCP a nuestra web tendremos dos formas de hacerlo (que no son excluyentes).

La primera de ellas y más potente, será a través de JavaScript y la segunda, menos potente, pero mucho más sencilla, será incluyendo determinados atributos en las etiquetas de nuestro HTML.

Vamos a empezar viendo la forma con JavaScript, en la que utilizaremos la nueva API "navigator.modelContext", en la que registraremos nuestras herramientas utilizando una estructura JSON.

Imaginemos que tenemos una tienda online de zapatillas con un buscador.

Vamos a crear una herramienta para que el agente de IA, sepa cómo utilizar nuestro buscador.

            
            // Supongamos que importas tu gestor de estado (ej. Redux, Pinia, Context)
import { cartStore, checkInventory } from './stores/shop';

// 1. Verificación de Seguridad: Comprobamos si el navegador soporta WebMCP
if (window.navigator.modelContext) {

    // 2. Registro de la Herramienta
    // El navegador expone esta definición al Agente de IA (Gemini, ChatGPT, etc.)
    window.navigator.modelContext.registerTool({
        
        // Identificador único para que la IA sepa qué llamar.
        // Debe ser descriptivo (snake_case es el estándar recomendado).
        name: "add_item_to_cart",
        
        // "Prompt Engineering" integrado: 
        // Describe claramente qué hace la herramienta y cuándo debe usarla el agente.
        description: "Añade un producto al carrito de compras del usuario. Úsala cuando el usuario exprese intención de compra clara.",
        
        // 3. Definición de Parámetros (JSON Schema Draft 2020-12)
        // El navegador usa esto para validar los datos ANTES de llamar a tu función.
        inputSchema: {
            type: "object",
            properties: {
                productId: { 
                    type: "string",
                    description: "El ID único del producto (ej: 'prod_123')"
                },
                variantId: { 
                    type: "string", 
                    description: "SKU específico si aplica (talla/color)" 
                },
                quantity: { 
                    type: "integer", 
                    minimum: 1, 
                    default: 1,
                    description: "Número de unidades a añadir"
                }
            },
            required: ["productId"], // La IA no puede llamar a esto sin un ID
            additionalProperties: false // Seguridad: rechaza parámetros inventados por la IA
        },
        
        // 4. Lógica de Ejecución
        // Esta función se ejecuta cuando el usuario confirma la acción en el navegador.
        execute: async ({ productId, variantId, quantity }) => {
            try {
                // Paso A: Lógica de Negocio (Validación de Stock)
                const stock = await checkInventory(productId, variantId);
                
                // Manejo de errores de negocio (no son errores de código, sino del proceso)
                if (stock < quantity) {
                    return {
                        isError: true, // Importante: Dice a la IA que la acción falló
                        content: [{
                            type: "text",
                            text: `No se pudo añadir: Solo quedan ${stock} unidades disponibles.`
                        }]
                    };
                }

                // Paso B: Acción Real (Modificar el estado de la app)
                await cartStore.addItem({ 
                    id: productId, 
                    variant: variantId, 
                    qty: quantity 
                });
                
                // Paso C: Respuesta de Éxito
                // Debemos devolver texto serializado, ya que la IA no lee objetos JS en memoria.
                return {
                    content: [{
                        type: "text",
                        text: JSON.stringify({
                            success: true,
                            message: "Producto añadido correctamente",
                            currentCartTotal: cartStore.totalPrice,
                            itemReference: productId
                        })
                    }]
                };
                
            } catch (err) {
                // Paso D: Manejo de Crash/Excepciones
                console.error("Fallo crítico en WebMCP:", err);
                return {
                    isError: true,
                    content: [{ 
                        type: "text", 
                        text: `Error interno del sistema: ${err.message}` 
                    }]
                };
            }
        }
    });
    
    console.log("WebMCP: Herramienta 'add_item_to_cart' registrada y lista.");
}
        

Como decíamos, este es un protocolo aún en desarrollo, por lo que cualquier herramienta que declaremos, deberíamos de hacer esa declaración previa comprobación de que la API está disponible para ahorrar problemas en navegadores que aún no tengan acceso a la API de WebMCP (modelContext).

¿Y si el agente se vuelve loco? (te estarás preguntando).

Es genial que el agente pueda realizar acciones en una web pero, ¿Y si se equivoca a la hora de realizar la compra y en lugar de un par de zapatillas, compra 15?

Para evitar estos problemas la propia API cuenta con mecanimos para introducir el concepto de HITL (Human in the Loop). Es decir, que antes de terminar el proceso, solicita una confirmación al humano, que deberá que está todo correcto antes de poder continuar.

Hasta ahora hemos visto cómo incorporar herramientas en JavaScript pero como decía antes, hay otra forma más simple, pero menos potente de incluir herramientas en nuestra web y es incorporar atributos en las etiquetas de nuestro HTML.

Supongamos que tenemos un formulario de búsqueda de vuelos.

Si queremos que nuestro agente de IA sepa utilizar bien el buscador, transformaremos este buscador en una herramienta, identificando el formulario como tal, dándole una descripción y un nombre. De esta forma, el agente no tendrá que "investigar" nuestra web y averiguar si dispone de una forma de buscar vuelos. Directamente verá una herramienta que sirve para ese objetivo y la utilizará, respetando las cualidades del formulario (como campos obligatorios, campos que sólo permitan una serie de patrones, etc, etc).

    
<form toolname="searchFlights" tooldescription="Search flights">
    <input name="origin" type="text" required pattern="[A-Z]{3}">
    <input name="destination" type="text" required pattern="[A-Z]{3}">
    <input name="date" type="date" required>
    <button type="submit">Search</button>
</form>
    

Decir que ahora mismo, como es una versión en desarrollo, según donde mires, los atributos se escribirán en camelCase, en minúsculas, con guiones o incluso de como "ai-*" (ai-tool, por ejemplo)... Tendrás que mirar la documentación oficial y ver cual es la convención de nombres más actual (que, en el momento de escribir esta entrada es "toolname", por ejemplo.)

Las ventajas de utilizar la API de JavaScript es que separas el diseño de tu web de las herramientas, lo que hace que pueda llegar a ser más mantenible.

La parte negativa es que adaptar webs ya existentes puede ser complejo, de ahí que la manera semántica (incluyendo atributos en las etiquetas HTML), se la recomendada para adoptar esta nueva tecnología en webs legacy.

¿Y la seguridad? ¿Cómo nos protegemos de que alguien cree herramientas maliciosas y mi Agente de IA las use en mi contra?

Aquí hay que hablar de nuevo de la API de WebMCP, la cual ha sido desarrollada con el principio Security-First, incluyendo los siguientes puntos de seguridad:

- Same-Origin Policy: Las herramientas no pueden salir del dominio donde se aloja la web, lo que evita ataques usando cross-origin

- Content Security Policy (CSP): Las API de WebMCP respetan las directivas CSP, lo que garantiza una postura de seguridad consistente.

- HTTPS obligatorio: Un sitio sin certificado HTTPS NO puede declarar herramientas

- Human-in-the-loop: Para operaciones que estén declaradas como sensibles, que el agente detecte que son sensibles o que se incluyan dentro de la lista de operaciones sensibles de la API, siempre se requerirá la comprobación y autorización del humano.

- Operaciones de sólo lectura: Una herramienta sólo podrá ejecutar operaciones de lectura.

Existen otras medidas de seguridad implementadas en el protocolo, pero quizá estas sean las más destacadas.

Como ves, WebMCP tiene muy buena pinta y, aunque personalmente sigo sin verle mucho sentido a la navegación agéntica, está claro que nuestras webs deben estar preparadas para este tipo de navegación por lo que, siendo algo tan simple de incorporar y que no nos supone ningún perjuicio, es algo que os animo a hacer en vuestras páginas.

¿Qué te ha parecido WebMCP? ¿Crees que finalmente se convertirá en un proceso obligado para cualquier web? ¿Cómo lo mejorarías?

Cuéntamelo en LinkedIn, ¡Estaré encantado de leerte!