WebMCP es lo mejor que le ha pasado a HTML desde HTML 5. Es una nueva forma de que los agentes puedan interactuar con nuestras webs.
En este post te vamos a explicar cómo funciona y cómo implementarlo utilizando solo 2 atributos de HTML.
¿Qué es WebMCP?
Actualmente los agentes de IA pueden controlar páginas webs.
El ejemplo más visual es cómo funcionan navegadores como Atlas, Dia, Comet… Tienes al lado del navegador un chat donde le puedes decir que rellenen un formulario y lo hacen.
Otro más lo veíamos hace poco con el ejemplo de Claude Cowork. Es capaz de levantar un Google Chrome para hacer operaciones.
Pero hay otros tipos, un ejemplo podría ser dándole a un agente de programación (Claude Code, GitHub Copilot…) acceso al MCP de Playwright. De esta forma el agente puede enviar instrucciones del tipo: haz scroll, clica en este enlace y similares.
Pero estos casos tienen un gran problema: son lentos ya que los agentes "tienen que imitar" el comportamiento de un humano.
Las webs están pensadas para los humanos y no los agentes.
Aquí es donde entra en juego WebMCP, es un estándar para que los agentes tengan su propia forma óptima de utilizar la web.
Y la verdad, es que la implementación que han hecho es de 10, ya que han añadido una API declarativa donde solo tienes que modificar un poco tu HTML y ya.
Cómo puedo probarlo
- Lo primero de todo será bajarnos la última versión Canary de Google Chrome. Es por ahora en el único navegador donde está disponible.
- Una vez descargado, nos hará falta habilitar un flag para activar WebMCP. Para ello vamos a esta URL y buscamos "WebMCP for testing". Ya le han puesto un nombre muy explícito para denotar que es una primera versión y que su API puede cambiar mientras vaya madurando.
- Ahora que ya tenemos el navegador con el soporte a WebMCP nos hace falta tener un agente compatible con ello. Por ahora la única forma de poder utilizarlo es usando una extensión de Google Chrome que han publicado.
- Para que el agente de la extensión pueda trabajar nos hará falta tener una API key de Gemini. Ésta se puede conseguir de forma gratuita para hacer pruebas.
- Para ello tenemos que crear un nuevo proyecto en Google AI Studio y darle a "Create API key".
- Esa API key será la que usemos en la extensión.
- Podemos hacer la prueba en esta web que han lanzado para ello. Si todo funciona bien deberíamos de ver que detecta que hay una tool y que podemos invocarla desde la extensión.
Cómo implementar WebMCP
Hay 2 APIs para implementar WebMCP: La declarativa y la imperativa.
API declarativa
Que hayan pensado en la API declarativa nos encanta, porque hace que añadir WebMCP a una web ya existente sea tan sencillo como añadir un par de atributos HTML a tus formularios:
toolname: Obligatoria. Al añadir a tu<form>este atributo, le estás diciendo que va a ser una tool de WebMCP. Aquí tienes que indicarle el nombre de la herramienta. Por ejemplo, si fuera un formulario para publicar un comentario, se podría llamarpublish-comment.tooldescription: Obligatoria. Es la descripción de lo que hace tu herramienta. Si no añades este atributo junto al detoolname, tu formulario no se declarará como una tool de WebMCP.toolautosubmit: Opcional. Sirve para que cuando el agente rellene el formulario, el formulario se envíe automáticamente. Si no existe el atributo, el agente rellenará el formulario y ya.
Un ejemplo de cómo podría quedar un formulario:
<form
id="login-form"
toolname="login"
tooldescription="Log in to the application with email and password"
toolautosubmit="true"
>
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
required
toolparamtitle="Email"
toolparamdescription="User email address"
>
</form>
Solo añadiendo esos atributos ya lo tendríamos.
API imperativa
Básicamente, hay una serie de métodos para poder declarar o eliminar nuestros WebMCP al vuelo utilizando JS.
El navegador nos da la api de navigator.modelContext.registerTool para poder añadir tools pasándole un nombre, descripción y un esquema de qué propiedades va a tener. Luego tenemos un método execute que es lo que pasará cuando es agente invoque ese WebMCP.
Cuándo usar cada API
Al ser algo tan reciente (en el momento de escribir este post tiene horas de vida) aún no hay buenas prácticas definidas, pero hay una que se está empezando a oler: Todo formulario debería de estar declarado como WebMCP. Motivos:
- El coste de implementación es muy bajo.
- La alternativa no es que los agentes no usen nuestra web, sino que la usen peor.
Para otras acciones que no tienen formulario como por ejemplo hacer logout, podemos usar la API imperativa. Aunque si ese tipo de acciones deberían de ser un formulario y no un enlace que invoca a otro js, da para escribir otro post.
Cómo lo hemos implementado en Codely
Salió el estándar y quisimos implementarlo desde el minuto 0 al ver el bajo coste que tenía.
Mientras lo hicimos aprendimos unas cuantas cosas y por ello hemos publicado un curso donde lo contamos todo, desde cómo funciona cada pieza de cada una de las APIs, hasta cómo hemos ido paso a paso en la web de Codely para implementarlo.
Conclusiones
Sin duda WebMCP parece un estándar que llega para quedarse. La mayor duda es cuándo dará el salto a estar en Chromium y que todos los navegadores que lo utilizan por debajo lo tengan a su disposición.
Cuando llegue ese momento, la experiencia de usuario será mucho mejor en webs que hayan implementado WebMCP que las que no.