Les agents IA peuvent écrire des systèmes distribués à partir de zéro et remanier de grandes bases de code. Mais demandez-leur de remplir un formulaire dans une application Web, et ils prennent une capture d'écran, la fixent du regard et commencent à deviner quel rectangle est un champ de saisie. Et si une page Web pouvait simplement indiquer à l'agent ce qu'elle est capable de faire ? C'est l'idée à la base de WebMCP.
Qu'est-ce que WebMCP?
WebMCP est une norme Web proposée qui permet aux sites d'exposer leurs actions comme des outils MCP, plutôt que de forcer les agents à décortiquer l'interface par eux-mêmes. Le site déclare ses capacités, le navigateur contrôle les accès, et l'agent appelle les outils directement.
Comment fonctionne WebMCP
La norme ajoute une API de navigateur navigator.modelContext avec deux méthodes : registerTool() pour enregistrer un outil et unregisterTool() pour le supprimer.
Quand un agent IA se connecte au navigateur, il reçoit la liste des outils enregistrés, voit leurs descriptions et leurs schémas, et peut les appeler comme de simples outils MCP.
Le navigateur regroupe tous les outils enregistrés et les expose à l'agent IA connecté. L'agent reçoit les noms des outils, leurs descriptions et leurs schémas d'entrée. Lorsque l'agent décide d'effectuer une action, il appelle l'outil correspondant, et la page exécute la fonction définie dans execute.
En pratique, le cycle de vie se déroule ainsi :
- La page se charge et enregistre les outils.
- Le navigateur expose ces outils à l'agent IA.
- L'agent choisit un outil et envoie les paramètres d'entrée.
- La page exécute l'outil et retourne le résultat.
Les outils se déclinent en deux types :
- Globaux — toujours disponibles, quelle que soit la page courante. Par exemple, la navigation entre les sections de l'application.
- Contextuels — liés à une page précise et apparaissent lorsque l'utilisateur s'y rend. Par exemple, la recherche de patients sur la page Patients.
Chaque outil est décrit par quatre champs :
| Champ | Description |
|---|---|
| name | Identifiant unique |
| description | Description en langage naturel pour que l'agent comprenne quand utiliser l'outil |
| inputSchema | Schéma JSON des paramètres d'entrée |
| execute | Fonction qui s'exécute lorsque l'outil est appelé |
L'exemple suivant expose un champ de formulaire comme outil afin qu'un agent puisse le remplir par programmation.
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}` }]
};
}
});
Démo : Aidbox UI + agent IA
Comment nous avons intégré WebMCP dans Aidbox UI
Polyfill
WebMCP est une norme jeune. La prise en charge native n'est disponible que dans Chrome 146+ et uniquement derrière un indicateur expérimental. Pour éviter d'en dépendre, nous utilisons @mcp-b/global — un polyfill qui rend navigator.modelContext disponible dans n'importe quel navigateur.
Point d'entrée global
Au chargement de l'application, elle enregistre un outil list_pages qui retourne une carte de toutes les pages avec les descriptions des outils disponibles sur chacune d'elles. C'est le point de départ pour l'agent — il comprend où il peut naviguer et ce qu'il peut y faire.
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",
],
},
// ...
];
Outils de page
Chaque page enregistre ses propres outils au montage et les supprime au démontage. L'agent ne voit en tout temps que les actions disponibles à ce moment précis.
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 est un logiciel libre. Vous pouvez explorer l'intégration WebMCP dans le répertoire src/webmcp/.
Décision de conception clé : des actions d'interface, pas des enveloppes d'API
Nous aurions pu faire des outils WebMCP de simples enveloppes autour de l'API REST d'Aidbox. L'agent envoie une requête, reçoit du JSON en retour, travaille avec lui. Mais nous avons emprunté une voie différente.
Nos outils effectuent des actions dans l'interface utilisateur. Lorsque l'agent appelle instances_search, la requête apparaît dans la barre de recherche, le tableau se met à jour, la pagination est recalculée. L'utilisateur voit tout se dérouler en temps réel.
C'est une distinction fondamentale. L'agent et l'utilisateur travaillent dans le même contexte. L'utilisateur peut observer les actions de l'agent, intervenir à tout moment et continuer à travailler manuellement. Ce n'est pas une boîte noire — c'est un espace de travail partagé.
Essayez par vous-même
Vous pouvez essayer WebMCP dans Aidbox UI dès maintenant.
- Créez un bac à sable gratuit sur aidbox.app
- Installez chrome-devtools-mcp :
claude mcp add chrome-devtools -- npx @anthropic-ai/chrome-devtools-mcp@latest
- Ouvrez Aidbox UI (nouvelle version) dans Chrome
- Demandez à Claude d'ouvrir une page et d'utiliser WebMCP
Si vous expérimentez avec WebMCP ou que vous développez des intégrations d'agents IA autour d'Aidbox, participez à la discussion dans notre communauté.
Voir aussi : Questionnaire Builder Inside an Agent.
