En Fastex llevamos tiempo construyendo agentes de IA que no se quedan en "responder texto", sino que ejecutan acciones reales de forma controlada. WebMCP es una de las piezas que hace eso posible directamente en el navegador, sin servidores intermedios. En este artículo te contamos qué es, cómo funciona y para qué sirve.
El problema que resuelve WebMCP
Un modelo de lenguaje, por sí solo, sabe redactar y razonar, pero no sabe pulsar botones ni rellenar campos de tu página. Tradicionalmente, conectar una IA con una aplicación web obligaba a construir una API a medida, autenticarla y mantenerla. Eso es trabajo de backend, tiempo y coste.
WebMCP da la vuelta a ese planteamiento. En lugar de exponer una API en el servidor, expone las capacidades de la propia página como herramientas que un agente de IA puede descubrir y usar. Lo que el usuario puede hacer en la interfaz, el agente también puede hacerlo, pero de forma programática y supervisada.
Qué es exactamente WebMCP
WebMCP es una librería JavaScript de código abierto que permite que cualquier sitio web se integre con el Model Context Protocol (MCP), el estándar abierto para conectar modelos de IA con herramientas y datos externos.
En la práctica, WebMCP coloca un pequeño widget en la página y ofrece una forma sencilla de registrar tres tipos de elementos que el agente podrá utilizar:
- Tools (herramientas): acciones que la IA puede ejecutar sobre tu web. Por ejemplo, "rellenar el formulario de contacto" o "consultar el tiempo".
- Prompts: plantillas predefinidas para estandarizar peticiones habituales al modelo.
- Resources (recursos): datos y contenido de la página que el agente puede leer y usar como contexto, identificados por una URI.
Además incorpora sampling: cuando una herramienta necesita una respuesta del modelo, se puede pedir al usuario que la apruebe mediante un diálogo. Así se mantiene la supervisión humana sobre las decisiones sensibles.
Cómo se registra una herramienta
La idea central es registerTool. Le das un nombre, una descripción en lenguaje natural, un esquema de los argumentos que acepta y una función que se ejecuta cuando el agente la invoca. Conceptualmente:
1const mcp = new WebMCP({ color: '#1f6feb', position: 'bottom-right' });23mcp.registerTool(4 'rellenar_formulario_contacto',5 'Rellena el formulario de contacto con los datos del usuario',6 {7 nombre: { type: 'string' },8 email: { type: 'string' },9 mensaje:{ type: 'string' }10 },11 function (args) {12 document.querySelector('#nombre').value = args.nombre;13 document.querySelector('#email').value = args.email;14 document.querySelector('#mensaje').value = args.mensaje;15 return { content: [{ type: 'text', text: 'Formulario rellenado' }] };16 }17);
La descripción es importante: es lo que el agente lee para decidir cuándo y cómo usar la herramienta. Una buena descripción equivale a un buen contrato.
Recomendación práctica: registra todas las herramientas justo después de cargar el script de WebMCP. Algunos clientes MCP solo detectan las herramientas disponibles al iniciarse, así que conviene que estén declaradas desde el primer momento.
La diferencia clave: las acciones viven en el cliente
Lo más interesante de WebMCP es que las herramientas se ejecutan en el propio navegador del usuario, con su sesión y sus permisos ya iniciados. No hace falta replicar la lógica de autenticación ni abrir endpoints nuevos: si el usuario tiene acceso a una acción en la interfaz, el agente la ejecuta en su nombre, dentro de su contexto.
Esto tiene tres ventajas que en Fastex valoramos especialmente:
- Menos superficie de backend. No multiplicas APIs para cada integración de IA.
- Privacidad por diseño. Los datos no tienen que salir del navegador para que la acción ocurra.
- Supervisión humana. Con el mecanismo de sampling y los diálogos de confirmación, las acciones críticas siguen pasando por el usuario.
WebMCP y la dirección del estándar
WebMCP como librería convive con un movimiento más amplio: los navegadores están empezando a ofrecer mecanismos nativos para que las páginas declaren herramientas a los agentes. La idea de fondo es siempre la misma —que la web sea "agent-ready", es decir, que exponga de forma declarativa lo que un agente puede hacer en ella— y WebMCP es hoy la vía más directa y portable para conseguirlo sin esperar a que todo esté estandarizado.
Cómo lo aplicamos en Fastex
Nosotros usamos WebMCP para un caso muy concreto y muy útil: un asistente conversacional que, cuando no puede resolver una duda, ayuda al usuario a rellenar el formulario de contacto. El agente no "adivina" cómo es tu página; usa las herramientas que le hemos declarado de forma explícita. Eso lo hace predecible y seguro, que es exactamente como nos gusta construir en Fastex: la IA como un componente acotado dentro de un sistema con reglas claras.
Si quieres ver ese caso de uso completo —resolución de dudas con IA local en el navegador más relleno asistido del formulario— lo contamos paso a paso en nuestro artículo sobre el chat con Gemini Nano y WebMCP.
¿Quieres llevar agentes de IA a tu web de forma controlada y con criterio de ingeniería? En Fastex diseñamos e implementamos este tipo de soluciones. Escríbenos a través del formulario de contacto.