Los agentes de IA pueden escribir sistemas distribuidos desde cero y refactorizar grandes bases de código. Pero si se les pide que rellenen un formulario en una aplicación web, toman una captura de pantalla, la analizan y empiezan a adivinar qué rectángulo es un campo de entrada. ¿Y si una página web pudiera simplemente indicarle al agente qué puede hacer? Esa es la idea detrás de WebMCP.
¿Qué es WebMCP?
WebMCP es un estándar web propuesto que permite a los sitios exponer sus acciones como herramientas MCP, en lugar de obligar a los agentes a realizar ingeniería inversa sobre la interfaz por su cuenta. El sitio declara sus capacidades, el navegador controla el acceso y el agente llama a las herramientas directamente.
Cómo funciona WebMCP
El estándar añade una API de navegador navigator.modelContext con dos métodos: registerTool() para registrar una herramienta y unregisterTool() para eliminarla.
Cuando un agente de IA se conecta al navegador, recibe la lista de herramientas registradas, ve sus descripciones y esquemas, y puede llamarlas igual que cualquier herramienta MCP convencional.
El navegador recopila todas las herramientas registradas y las expone al agente de IA conectado. El agente recibe los nombres de las herramientas, las descripciones y los esquemas de entrada. Cuando el agente decide realizar una acción, llama a la herramienta correspondiente y la página ejecuta la función definida en execute.
En la práctica, el ciclo de vida es el siguiente:
- La página se carga y registra las herramientas.
- El navegador expone dichas herramientas al agente de IA.
- El agente elige una herramienta y envía los parámetros de entrada.
- La página ejecuta la herramienta y devuelve el resultado.
Las herramientas son de dos tipos:
- Globales — siempre disponibles, independientemente de la página actual. Por ejemplo, la navegación entre secciones de la aplicación.
- Contextuales — asociadas a una página específica y que aparecen cuando el usuario navega hasta ella. Por ejemplo, la búsqueda de pacientes en la página de Pacientes.
Cada herramienta se describe mediante cuatro campos:
| Campo | Descripción |
|---|---|
| name | Identificador único |
| description | Descripción en lenguaje natural para que el agente entienda cuándo usar la herramienta |
| inputSchema | JSON Schema de los parámetros de entrada |
| execute | Función que se ejecuta cuando se llama a la herramienta |
El siguiente ejemplo expone un campo de formulario como herramienta para que un agente pueda rellenarlo de forma programática.
navigator.modelContext.registerTool({
name: "fill_name",
description: "Fill the name field on the form",
inputSchema: {
type: "object",
properties: {
value: { type: "string", description: "Name to fill in" }
},
required: ["value"]
},
execute: async (args) => {
document.querySelector("#name-input").value = args.value;
return {
content: [{ type: "text", text: `Name set to: ${args.value}` }]
};
}
});
Demo: Aidbox UI + agente de IA
Cómo integramos WebMCP en Aidbox UI
Polyfill
WebMCP es un estándar joven. La compatibilidad nativa solo está disponible en Chrome 146+ y únicamente mediante una marca experimental. Para no depender de ello, utilizamos @mcp-b/global — un polyfill que hace que navigator.modelContext esté disponible en cualquier navegador.
Punto de entrada global
Cuando la aplicación se carga, registra una herramienta list_pages que devuelve un mapa de todas las páginas con descripciones de las herramientas disponibles en cada una. Este es el punto de partida para el agente: entiende adónde puede navegar y qué puede hacer allí.
const pages = [
{
name: "resources_list",
description: "List of resources for a specific type",
path: "/resource/{resourceType}",
tools: [
"instances_get_search() - Get current FHIR search query string",
"instances_search(query) - Set FHIR search query and execute",
"instances_get_results() - Get displayed table data with pagination",
"instances_get_page() - Get current pagination state",
"instances_get_selected() - Get IDs of selected resources",
"instances_select(ids, selected?) - Select/deselect resources by ID",
"instances_delete_selected() - Delete selected resources",
"instances_export_selected() - Export selected as FHIR Bundle",
"instances_change_page(page) - Navigate to a specific page",
"instances_change_page_size(pageSize: 10|20|30|50|100) - Change page size",
"instances_navigate_to_resource(id) - Navigate to edit a resource",
"instances_open_create_page() - Navigate to create a new resource",
],
},
// ...
];
Herramientas de página
Cada página registra sus propias herramientas al montarse y las elimina al desmontarse. El agente siempre ve únicamente las acciones disponibles en ese momento.
navigator.modelContext.registerTool({
name: "instances_search",
description: "Set the FHIR search query and execute.",
inputSchema: {
type: "object",
properties: {
query: {
type: "string",
description: "FHIR search query params",
},
},
required: ["query"],
},
execute: async (args) => {
actionsRef.current.instancesSearch(args.query);
return { content: [{ type: "text", text: `Search query set to: ${args.query}` }] };
},
});
Aidbox UI es de código abierto. Puede explorar la integración de WebMCP en el directorio src/webmcp/.
Decisión de diseño clave: acciones de interfaz, no envoltorios de API
Podríamos haber convertido las herramientas de WebMCP en envoltorios de la API REST de Aidbox. El agente envía una solicitud, recibe JSON, trabaja con él. Pero tomamos un camino diferente.
Nuestras herramientas realizan acciones en la interfaz de usuario. Cuando el agente llama a instances_search, la consulta aparece en la barra de búsqueda, la tabla se actualiza y la paginación se recalcula. El usuario ve todo lo que ocurre en tiempo real.
Esta es una distinción fundamental. El agente y el usuario trabajan en el mismo contexto. El usuario puede observar las acciones del agente, intervenir en cualquier momento y continuar trabajando de forma manual. No es una caja negra: es un espacio de trabajo compartido.
Pruébelo usted mismo
Puede probar WebMCP en Aidbox UI ahora mismo.
- Cree un sandbox gratuito en aidbox.app
- Instale chrome-devtools-mcp:
claude mcp add chrome-devtools -- npx @anthropic-ai/chrome-devtools-mcp@latest
- Abra Aidbox UI (versión nueva) en Chrome
- Pida a Claude que abra una página y utilice WebMCP
Si está experimentando con WebMCP o desarrollando integraciones de agentes de IA en torno a Aidbox, únase a la conversación en nuestra comunidad.
Véase también: Questionnaire Builder Inside an Agent.
