WebMCP: HTML para agentes de IA

La web siempre fue diseñada para humanos. Pero en 2025-2026, una nueva clase de "usuarios" está llegando: los agentes de IA. Asistentes como Claude, ChatGPT o Gemini que navegan la web, rellenan formularios, buscan información y ejecutan tareas en nombre de los usuarios.

WebMCP es la propuesta de Google para que estas IA puedan interactuar con tus formularios HTML de forma segura y estructurada. Y lo más interesante: se hace con atributos HTML, sin JavaScript.

Estado actual: WebMCP está disponible en Chrome Canary (versión experimental). No es un estándar consolidado todavía, pero Google lo está desarrollando activamente y es probable que llegue a Chrome estable en 2026. Aprenderlo ahora te da ventaja.

¿Qué problema resuelve?

Imagina que un agente de IA quiere reservar un vuelo por ti. Hoy, el agente tiene que:

1. Analizar visualmente la página para encontrar el formulario.
2. Adivinar qué campo es el origen, cuál el destino, cuál la fecha.
3. Intentar rellenar los campos y hacer clic en el botón correcto.

Es como si un humano intentara usar una web con los ojos vendados. Funciona a veces, falla otras. No hay un contrato claro entre la web y el agente.

WebMCP resuelve esto: le dice al agente exactamente qué herramientas tiene disponibles, qué datos necesita cada una y qué hace cada botón. Es como darle un manual de instrucciones.

La API declarativa: atributos HTML

WebMCP añade atributos a los formularios HTML que los agentes de IA pueden leer. Es la parte más elegante: no necesitas cambiar la estructura de tu formulario, solo añadir información extra.

<form
    toolname="buscar-vuelos"
    tooldescription="Busca vuelos disponibles entre dos ciudades en fechas específicas"
>
    <label for="origen">Ciudad de origen</label>
    <input type="text" id="origen" name="origen"
           required placeholder="Madrid">

    <label for="destino">Ciudad de destino</label>
    <input type="text" id="destino" name="destino"
           required placeholder="Tokio">

    <label for="fecha-ida">Fecha de ida</label>
    <input type="date" id="fecha-ida" name="fecha_ida" required>

    <label for="fecha-vuelta">Fecha de vuelta</label>
    <input type="date" id="fecha-vuelta" name="fecha_vuelta">

    <label for="pasajeros">Pasajeros</label>
    <input type="number" id="pasajeros" name="pasajeros"
           min="1" max="9" value="1">

    <button type="submit">Buscar vuelos</button>
</form>

Los atributos clave

El agente de IA lee estos atributos y entiende: "Hay una herramienta llamada buscar-vuelos que busca vuelos disponibles. Necesita origen, destino, fecha de ida (obligatoria), fecha de vuelta (opcional) y número de pasajeros."

Cómo funciona el flujo

1. El usuario le dice al agente: "Búscame vuelos de Madrid a Tokio la primera semana de julio".
2. El agente navega a la web de vuelos y encuentra el formulario con toolname="buscar-vuelos".
3. Lee el tooldescription y entiende que es la herramienta correcta.
4. Lee los campos del formulario: sus name, type, validaciones (required, min, max), y <label>.
5. Rellena los campos con los datos que tiene.
6. Si el formulario tiene toolautosubmit, lo envía directamente. Si no, pide confirmación al usuario.

Fíjate en algo importante: los <label> que ya escribías por accesibilidad ahora también sirven para los agentes de IA. Un buen HTML semántico y accesible es automáticamente mejor para WebMCP. Todo lo que has aprendido en las lecciones anteriores importa aquí.

Ejemplo: formulario de contacto con WebMCP

<form
    action="/enviar-contacto"
    method="POST"
    toolname="enviar-mensaje-contacto"
    tooldescription="Envía un mensaje de contacto al equipo de soporte de NomadGear"
>
    <label for="nombre">Tu nombre</label>
    <input type="text" id="nombre" name="nombre" required
           autocomplete="name">

    <label for="email">Tu email</label>
    <input type="email" id="email" name="email" required
           autocomplete="email">

    <label for="asunto">Asunto</label>
    <select id="asunto" name="asunto" required>
        <option value="">Selecciona un asunto</option>
        <option value="pedido">Problema con un pedido</option>
        <option value="devolucion">Devolución</option>
        <option value="producto">Pregunta sobre un producto</option>
        <option value="otro">Otro</option>
    </select>

    <label for="mensaje">Mensaje</label>
    <textarea id="mensaje" name="mensaje" rows="5" required
              minlength="20" maxlength="2000"
              placeholder="Describe tu consulta con el mayor detalle posible..."></textarea>

    <button type="submit">Enviar mensaje</button>
</form>

Con WebMCP, un usuario podría decirle a su agente: "Contacta con NomadGear y diles que mi pedido #4521 no ha llegado". El agente encontraría el formulario, lo rellenaría con los datos apropiados y pediría confirmación antes de enviar.

Ejemplo: buscador de productos

<search>
    <form
        action="/buscar"
        method="GET"
        toolname="buscar-productos"
        tooldescription="Busca productos en el catálogo de NomadGear por nombre, categoría o rango de precio"
        toolautosubmit
    >
        <label for="q">Buscar productos</label>
        <input type="search" id="q" name="q"
               placeholder="Mochila, organizador, funda...">

        <label for="categoria">Categoría</label>
        <select id="categoria" name="categoria">
            <option value="">Todas</option>
            <option value="mochilas">Mochilas</option>
            <option value="organizadores">Organizadores</option>
            <option value="fundas">Fundas</option>
            <option value="accesorios">Accesorios</option>
        </select>

        <label for="precio-max">Precio máximo</label>
        <input type="number" id="precio-max" name="precio_max"
               min="0" step="5" placeholder="150">

        <button type="submit">Buscar</button>
    </form>
</search>

Fíjate en toolautosubmit: como es una búsqueda (no modifica datos ni hace pagos), es seguro que el agente envíe el formulario automáticamente. Para formularios que envían dinero, eliminan datos o realizan acciones irreversibles, no uses toolautosubmit.

Buenas prácticas con WebMCP

• Nombres descriptivos: toolname="buscar-vuelos" es mejor que toolname="form1".
• Descripciones claras: el agente decide si usar la herramienta en base al tooldescription. Sé específico.
• toolautosubmit con cuidado: solo en búsquedas y consultas. Nunca en compras, envío de datos personales o acciones destructivas.
• Labels siempre: los agentes leen los <label> para entender qué dato pide cada campo.
• Validación HTML: required, min, max, pattern... el agente respeta las mismas validaciones que el navegador.
• Compatibilidad total: un formulario con WebMCP funciona exactamente igual para usuarios humanos. Los atributos extra son invisibles para el navegador.

El futuro: por qué importa esto

WebMCP no es una moda pasajera. Es el reflejo de algo más grande: la web se está adaptando a los agentes de IA. Igual que en los 2000s adaptamos la web para móviles (responsive design), ahora la estamos adaptando para que las IA puedan usarla.

Si aprendes esto ahora:

• Tus formularios serán usables tanto por humanos como por agentes.
• Estarás preparado cuando WebMCP llegue a Chrome estable y otros navegadores lo adopten.
• Tendrás ventaja competitiva: la mayoría de desarrolladores todavía no sabe que esto existe.

En la sección de JavaScript aprenderás la otra cara de WebMCP: la API imperativa, que permite registrar herramientas más complejas con JavaScript. Pero para muchos casos, los atributos HTML que has visto aquí son todo lo que necesitas.