WebMCP
mcp2everything · Programación
WebMCP (Web Model Context Protocol) es un estándar web propuesto para la integración de agentes de IA en la web. Deja que los sitios expongan herramientas estructuradas directamente a los agentes de IA que corren dentro del navegador. En lugar de que un agente haga capturas de pantalla y adivine dónde están los botones, el sitio registra funciones de JavaScript con nombres, descripciones y esquemas de parámetros, y el agente las llama al instante. Es una librería ligera de código abierto más una API a nivel de navegador, y está pensada para desarrolladores frontend que quieren que sus páginas funcionen limpiamente con asistentes de IA.
Acerca de WebMCP
Qué es WebMCP
WebMCP es un estándar web abierto para agentes de IA. Da la vuelta al modelo habitual de automatización del navegador: en lugar de que un agente analice el DOM o lea capturas de pantalla para averiguar qué puede hacer una página, la propia página declara sus capacidades como herramientas estructuradas. Después, el navegador entrega esas herramientas a cualquier agente de IA conectado, que las invoca como funciones locales.
La idea central se apoya en un único objeto global, navigator.modelContext. Un desarrollador llama a registerTool con un nombre, una descripción en lenguaje llano, un JSON Schema para los argumentos y una función manejadora. Los agentes descubren la herramienta de forma automática y la llaman con parámetros reales. Como la herramienta corre dentro de la página activa, ya tiene la sesión del usuario, las cookies y el estado actual de la app, así que no hace falta montar nada extra de autenticación.
Hay un límite real que conviene saber desde el principio. WebMCP vive y muere con la pestaña del navegador. Cierra la pestaña y las herramientas desaparecen. Solo cubre herramientas, no los recursos ni los prompts que puede llevar un servidor MCP completo. Y da por hecho que hay una persona presente para autorizar las acciones, lo cual es una función de seguridad, pero descarta el trabajo en segundo plano totalmente sin intervención.
Cómo empezar
- Abre el código frontend de tu sitio y añade la etiqueta de script de WebMCP (o ejecuta
npm install webmcp) para que la librería se cargue en tus páginas. - Crea una instancia de
WebMCP. Puedes pasar opciones de interfaz como el color, la posición y el tamaño del botón del widget flotante de ayuda. - Registra tu primera herramienta con
mcp.registerTool(name, description, schema, handler). Apunta el manejador a una lógica que tu app ya ejecuta. - Registra todas las herramientas justo después de que cargue el script. Los clientes MCP a menudo necesitan reiniciarse para detectar herramientas nuevas.
- Prueba en un navegador compatible con un cliente MCP conectado y luego publícalo. Una vez en línea, los agentes pueden llamar a tus herramientas.
Ya está. Sin backend, sin servidor de autenticación, sin reescribir nada.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de WebMCP.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Desarrolladores frontend
- Dueños de sitios independientes y equipos pequeños
- Equipos de producto que se preparan para el tráfico de IA
Tareas
- Exponer una herramienta de búsqueda para que un agente consulte tu contenido por palabra clave y devuelva resultados estructurados en lugar de leer una lista en pantalla.
- Registrar acciones de rellenado y envío de formularios para que un asistente complete un pedido o una reserva en nombre del usuario con la sesión ya lista.
- Envolver la lógica de negocio existente en JavaScript como funciones que un agente pueda llamar. Así evitas una capa de API paralela construida solo para la IA.
Casos de uso
- Un flujo de compra donde el agente llama a una herramienta de añadir al carrito en vez de hacer clic por un diseño que cambia.
- Un sitio de documentación que deja que un asistente extraiga el contenido de la página directamente cuando el usuario pregunta por él.
- Un panel donde el asistente lee widgets en vivo a través de recursos registrados en lugar de reanalizar el DOM.
Funciones clave
Registro de herramientas con JSON Schema
registerTool es el corazón de este estándar web para agentes de IA. Pasas un nombre, una descripción en lenguaje natural, un esquema de argumentos y un manejador, y la herramienta queda disponible para cualquier agente conectado. El esquema le dice al modelo exactamente qué entradas puede enviar, lo que reduce las llamadas mal formadas y las conjeturas.
Sesión compartida y contexto de página
Las herramientas corren dentro de la página, así que heredan el estado de sesión, las cookies y los datos en memoria que el usuario ya tiene. Un agente no tiene que reconstruir la autenticación ni preocuparse por barreras de origen cruzado. Eso simplifica mucho las cosas frente a levantar un proxy de backend aparte para cada acción de IA.
Prompts y recursos junto a las herramientas
Más allá de las acciones, WebMCP te deja registrar plantillas de prompt y recursos legibles identificados por URI. Un prompt puede dar forma a una consulta común y aceptar argumentos que cambian en cada llamada. Un recurso puede exponer el contenido de la página como contexto. Juntos le dan al agente algo más que botones que pulsar.
Sin dependencia de framework ni de backend
La librería es un pequeño añadido de JavaScript vanilla que funciona en Chrome, Firefox, Safari y Edge, y se lleva bien con React, Vue y Angular. No necesitas un servidor nuevo, una base de datos nueva ni reescribir tu arquitectura. Si puedes editar el frontend de una página, puedes añadir WebMCP.
Resistencia a los cambios de interfaz
Como los agentes llaman a herramientas semánticas en lugar de localizar elementos en pantalla, cambiar el nombre de una clase CSS o reordenar el diseño no rompe la integración. Los agentes basados en capturas y en scraping del DOM quedan obsoletos en cuanto un diseñador toca la página. WebMCP esquiva toda esa clase de fallos.
Ventajas y desventajas
Ventajas
- Cero cambios en el backend y una configuración simple con una etiqueta de script, así que el coste de integración se mantiene bajo para equipos pequeños.
- Con licencia MIT y gratis, sin cuenta de proveedor ni tarifa por petición para enrutar el tráfico de IA.
- Reutiliza la lógica frontend existente, así que el mismo código que sirve a los usuarios humanos también sirve a los agentes.
- Hereda la sesión del usuario de forma automática, lo que elimina casi todo el cableado de autenticación en la ruta de la IA.
- Corre en todos los navegadores y frameworks frontend principales, así que no quedas atado a una sola pila.
Desventajas
- Las herramientas desaparecen cuando se cierra la pestaña, así que no puede sostener automatización persistente ni en segundo plano sin interfaz.
- No trae soporte para recursos y prompts como ofrece un servidor MCP completo, lo que limita lo que algunos agentes pueden hacer.
- Requiere autorización del usuario por diseño, más seguro pero añade un paso antes de que los agentes actúen.
- El ecosistema a su alrededor aún es joven, así que puedes toparte con asperezas y con pocos ejemplos funcionales.
Preguntas frecuentes
Deja que un sitio entregue herramientas estructuradas a un agente de IA en el navegador. El agente llama a esas herramientas directamente, así que puede buscar, rellenar formularios o lanzar acciones sin extraer la página ni adivinar dónde hacer clic.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con WebMCP.
Alternativas a WebMCP
Forefront
Forefront · ProgramaciónForefront es una plataforma web para construir con IA de código abierto. Te deja ajustar los principales modelos de lenguaje de código abierto con tus propios datos, evaluar cómo rinden y ejecutarlos a través de una API o exportarlos para alojarlos tú mismo. Los desarrolladores que quieren la comodidad de una plataforma cerrada pero insisten en ser dueños de sus modelos y sus datos son el público objetivo.
Startkit
StartKit.AI · ProgramaciónStartkit es un boilerplate para crear productos de SaaS con IA y wrappers de IA. Piénsalo como un boilerplate para startups de IA con las partes aburridas ya conectadas: autenticación, pagos con Stripe y Lemon Squeezy, límites de uso, correo transaccional y un kit de inicio de API de IA que habla con OpenAI, Anthropic, Groq o Llama. Clonas el repositorio, pones tu precio y te dedicas a la parte del producto por la que la gente paga de verdad. Está hecho con Next.js sobre React y Tailwind, así que buena parte del código boilerplate ya te resulta familiar.
Testim
Tricentis · ProgramaciónTestim es una plataforma de automatización de pruebas impulsada por IA para crear y ejecutar pruebas de extremo a extremo en aplicaciones web, móviles y Salesforce. Se apoya en el aprendizaje automático para mantener las pruebas estables cuando cambia una interfaz, así que los equipos dedican menos tiempo a reparar selectores rotos. No está nada mal para una herramienta de pruebas automatizadas que puedes empezar a usar hoy mismo. Creas pruebas grabando acciones en un navegador y luego añades JavaScript cuando necesitas más control. Es una opción sólida para equipos de QA con mucho trabajo.