WebMCP: Los agentes de IA son tus nuevos visitantes web

Este fin de semana decidí ponerme a trastear con algo que tiene un potencial tremendo. Como probablemente sepas, he estado experimentando mucho con MCP últimamente (incluso creé mcpclick.app), y lo que he encontrado apunta a cambiar las reglas del juego.

La web está cambiando. Hasta ahora construíamos páginas web exclusivamente para humanos. Hoy, un nuevo tipo de usuario visita nuestras aplicaciones: los Agentes de IA.

¿Alguna vez has intentado que una IA reserve una cita médica o consulte un horario específico en un portal universitario? Es lento y suele fallar. ¿Por qué? Porque el agente tiene que "leer" la página como si fuera un humano: analiza el HTML y juega a adivinar qué campos rellenar. Si cambias un poco tu CSS, el agente se pierde por completo.

¿Qué problema nos resuelve esto como desarrolladores? Nos da una forma directa, limpia y rápida de decirle a la IA: "No adivines. Utiliza estas herramientas."

Esto es WebMCP (Web Model Context Protocol).

¿Qué es WebMCP?

WebMCP es un nuevo estándar propuesto por Microsoft y Google. Su objetivo es hacer que tu sitio web esté preparado para agentes de IA.

Piénsalo como un Sitemap de acciones. Un sitemap.xml ayuda a Google a indexar tus páginas. WebMCP le comunica a los modelos de lenguaje (como Gemini, GPT o Claude) qué acciones concretas pueden ejecutar en tu web.

Dos formas de utilizarlo:

1. La vía HTML (Declarativa): Perfecta para formularios. Añades dos atributos simples y el navegador se encarga del resto.
2. La vía JavaScript (Imperativa): Para tareas más complejas, como cálculos interactivos o búsquedas dinámicas en tiempo real.

Configuración de tu entorno de pruebas

Esta tecnología es muy reciente y todavía no está disponible en navegadores estables. Para probarla, necesitas una versión de desarrollo de Chrome con las últimas funciones experimentales activadas.

Puedes instalarla junto a tu versión habitual de Chrome sin problemas:

1. Descarga Chrome Canary o Chrome Dev.
   • Nota: Necesitas la versión 146 o superior.
2. Abre Chrome Canary y entra en chrome://flags.
3. Busca la opción #web-mcp (Web Model Context Protocol) y actívala (Enabled).
4. Reinicia el navegador.

Importante: Es software experimental. La especificación puede evolucionar y cambiar sin previo aviso. Está pensada para que los desarrolladores podamos probar el futuro con antelación.

La vía HTML (Declarativa)

Imagina que tienes un blog. Quieres que un usuario pueda decirle a su navegador: "Busca artículos sobre React en el blog de Dany".

A las máquinas se les da fatal adivinar. Con WebMCP, les indicamos exactamente qué hacer usando atributos HTML:

<form 
  action="/search" 
  toolname="search_articles" 
  tooldescription="Search for tech articles by topic in the blog.">
  
  <input type="text" name="query" placeholder="What to learn?" required />
  
  <select name="category">
    <option value="react">React</option>
    <option value="typescript">TypeScript</option>
    <option value="ai">AI</option>
  </select>
 
  <button type="submit">Search Now</button>
</form>

¿Qué acabamos de hacer? Añadimos toolname y tooldescription. El navegador interpreta este formulario y genera una especificación clara para la IA. El agente sabe con total precisión cómo interactuar con el buscador, sin necesidad de interpretar visualmente el DOM.

La vía JavaScript (Imperativa)

En ocasiones, un formulario HTML no es suficiente. Quizás necesitas verificar si quedan plazas libres en un curso sin recargar la página. Para esto usamos JavaScript.

// Comprobamos si el navegador soporta WebMCP
if ('modelContext' in navigator) {
  navigator.modelContext.registerTool({
    name: "check_course_availability",
    description: "Comprueba si un curso universitario tiene plazas libres.",
    inputSchema: {
      type: "object",
      properties: {
        courseId: { type: "string", description: "El código del curso (p. ej. CS101)" },
        semester: { type: "string", description: "Semestre objetivo (p. ej. Fall 2026)" }
      },
      required: ["courseId", "semester"]
    },
    execute: async (args) => {
      // Petición a tu API interna
      const response = await fetch(`/api/courses/${args.courseId}/status?sem=${args.semester}`);
      const data = await response.json();
      return { 
        available: data.seats > 0, 
        remainingSeats: data.seats,
        professor: data.professorName
      };
    }
  });
}

¿Por qué es potente? Ahora un agente de IA (como un copiloto del navegador) puede ejecutar check_course_availability directamente. No tiene que raspar tablas complejas ni saltar entre pestañas: le pide la respuesta a tu función y recibe datos estructurados al instante.

¿Es seguro?

Sí. La seguridad viene integrada en el diseño del estándar:

1. Sabes quién llama: Puedes comprobar si la petición vino de un humano o de un agente (la propuesta añade la propiedad agentInvoked en SubmitEvent).
2. Privacidad controlada: El agente solo tiene acceso a las herramientas que tú registras explícitamente.
3. Consentimiento del usuario: El navegador solicita confirmación al usuario antes de permitir que la IA realice acciones con consecuencias (como compras o envíos de datos).

Pruébalo tú mismo

Esto es solo el comienzo de una web donde nuestros sitios actúan tanto para humanos como de APIs para agentes inteligentes.

Te animo a probarlo:

• Únete al Chrome AI Early Preview Program
• Consulta la propuesta oficial de WebMCP en GitHub

No te quedes solo leyendo sobre ello: monta una prueba y haz que tu web esté lista para los agentes del futuro.