--- { "title": "Comment nous avons rendu Aidbox UI compatible avec les agents IA grâce à WebMCP", "description": "Découvrez comment nous avons intégré WebMCP dans Aidbox UI pour que les agents IA puissent interagir avec l'interface via des outils déclarés plutôt qu'en devinant à partir de captures d'écran.", "date": "2026-03-17", "author": "Ivan Bagrov", "reading-time": "4 min read", "tags": [ "Aidbox", "System Design", "Integrations", "AI / Agents" ] } --- [Les agents IA](/blog/agents-are-not-humans) 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 : 1. La page se charge et enregistre les outils. 2. Le navigateur expose ces outils à l'agent IA. 3. L'agent choisit un outil et envoie les paramètres d'entrée. 4. 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. ```typescript 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 {% embed url="https://youtu.be/CAcARwFEivs" %} ## 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. ```typescript 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. ```typescript 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/`](https://github.com/HealthSamurai/aidbox-ui/tree/master/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. 1. Créez un bac à sable gratuit sur [aidbox.app](https://aidbox.app) 2. Installez chrome-devtools-mcp : ``` claude mcp add chrome-devtools -- npx @anthropic-ai/chrome-devtools-mcp@latest ``` 3. Ouvrez Aidbox UI (nouvelle version) dans Chrome 4. 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é](https://connect.health-samurai.io/). Voir aussi : [Questionnaire Builder Inside an Agent](/blog/questionnaire-builder-inside-an-agent).