10 juil. 2026

WebMCP : La couche invisible pour les agents d'IA

Dans cet article, nous allons explorer le Model Context Protocol (MCP) et son tout nouveau pendant web, WebMCP. Nous verrons pourquoi ce concept pourrait changer la façon dont l'IA navigue sur Internet, et je vous guiderai étape par étape dans la création et l'enregistrement de votre tout premier outil WebMCP. C'est parti !

MCP

Le Model Context Protocol (MCP) a été introduit par Anthropic pour modifier la façon dont les modèles d'IA interagissent avec le web. Au lieu d'apprendre aux modèles d'IA comment utiliser des centaines d'API tierces différentes, le MCP crée une interface standardisée. Cette interface permet aux agents d'IA d'accéder directement à des outils et fonctions spécifiquement fournis par des développeurs tiers.

Plus nous connectons nos LLM et agents d'IA à des outils externes, plus ils deviennent performants. Cependant, les développeurs d'IA ne peuvent pas suivre l'évolution rapide de ces outils externes. Une simple modification d'une API peut facilement briser le flux de travail d'un agent d'IA.

Si les fournisseurs d'outils externes proposent une interface adaptée à l'IA, les développeurs d'IA peuvent tout simplement y connecter leurs agents. Anthropic a résolu ce problème précis en introduisant le MCP.

En résumé, le MCP est un protocole de communication. Il permet aux agents d'IA d'accéder en toute sécurité à des capacités backend spécifiques offertes par les développeurs.

WebMCP

Internet est conçu pour les humains. Il comporte des interfaces utilisateur (UI) intuitives qui nous guident facilement à travers un site web. Cependant, naviguer sur ces UI est incroyablement difficile pour les agents d'IA.

Pour naviguer sur un site aujourd'hui, un agent d'IA doit analyser des captures d'écran ou lire le code HTML brut. Bien que cela fonctionne la plupart du temps, les agents sont sujets aux erreurs. Cela gaspille également de la puissance de calcul, de l'énergie et des tokens juste pour comprendre la mise en page d'un site web.

C'est exactement le même problème que nous rencontrions avec les backends, mais au niveau du site web. WebMCP (un concept expérimental actuellement exploré par les communautés des standards du web) s'attaque à cette situation. Son objectif est de fournir une couche "invisible" implémentée par le développeur du site web. Les agents d'IA peuvent se greffer à cette couche pour accéder à un menu spécifique d'outils et de fonctions conçus rien que pour eux.

En théorie, cela éliminera complètement le travail fastidieux qu'un agent d'IA effectue actuellement pour naviguer sur un simple site web.

De plus, les outils WebMCP offrent une incroyable couche de contrôle pour prévenir les hallucinations de l'IA. Grâce à l'utilisation d'un indicateur d'erreur intégré (error flag), les agents d'IA peuvent immédiatement savoir si une exécution a échoué. Ils peuvent alors réessayer d'appeler l'outil avec des paramètres corrigés pour mener à bien leur tâche.

Cet article explorera en profondeur l'implémentation de WebMCP. Pour la démonstration, je vais implémenter un ensemble d'outils exploitables par l'IA directement sur ce blog.

L'implémentation est très différente des interfaces MCP classiques. Le MCP backend agit comme une API traditionnelle, accessible localement via stdio ou sur HTTP en utilisant SSE. WebMCP, en revanche, est complètement intégré à la couche du site web. Il communique en utilisant les API standard du navigateur, telles que le DOM ou l'objet window.

Implémentation

Les implémentations de WebMCP suivent généralement deux principes :

API Déclarative : Agit comme une déclaration dans le code HTML. Elle donne un sens immédiat aux boutons et formulaires, permettant à l'agent d'IA de les les remplir ou de les utiliser sans effort.
API Impérative : Utilise JavaScript pour concevoir des outils et des fonctions complexes, offrant des fonctionnalités puissantes directement à l'agent d'IA.

Puisqu'il n'y a pas de formulaires sur ce blog, je vais implémenter WebMCP en utilisant le principe impératif pour ma démonstration.

Commençons par une blague classique de développeur : sudo make me a sandwich.

Ce guide montrera comment enregistrer un outil WebMCP sur un blog Astro en utilisant uniquement du JavaScript Vanilla.

Dépendances

La véritable beauté de WebMCP côté client est que le protocole repose sur une extension de navigateur qui injecte l'API (navigator.modelContext). De ce fait, il n'y a aucune dépendance de production à télécharger ! Vous n'avez pas besoin de SDK pour créer des outils.

Cependant, pour tester nos outils localement, je recommande d'installer vitest :

Install Vitest

npm install -D vitest

Créer la logique de l'outil

Chaque outil WebMCP impératif nécessite quatre composants essentiels :

name : L'identifiant unique que l'agent utilise pour appeler l'outil.
description : Les instructions indiquant à l'agent ce que fait l'outil.
inputSchema : Un schéma JSON standard définissant les paramètres attendus par l'outil.
execute : La fonction JavaScript qui s'exécute lorsque l'outil est appelé.

Voici l'implémentation complète de l'outil :

Make Sandwich Tool Logic

 export const makeSandwichTool = {
    name: 'make_sandwich',
    description: 'An easter egg tool. Ask the blog to make you a sandwich.',
    // Define that the tool expects a single boolean parameter called "sudo"
    inputSchema: {
        type: 'object',
        properties: {
            sudo: {
                type: 'boolean',
                description: 'Whether to use superuser privileges to demand the sandwich.',
            },
        },
        required: ['sudo'],
    },

    execute: async ({ sudo }: { sudo: boolean }) => {
        if (sudo) {
            return {
                content: [
                    { type: 'text', text: `Okay. 🥪\n\n(Enjoy your superuser sandwich!)` },
                ],
            };
        }
        
        // If the agent forgot to use "sudo", throw a funny error
        return {
            content: [
                { type: 'text', text: `What? Make it yourself.` },
            ],
            isError: true,
        };
    },
}; 

Enregistrer l'outil

Créer la logique ne représente que la moitié du travail. Pour rendre l'outil découvrable par les agents d'IA qui visitent votre site, je dois l'enregistrer auprès du navigateur.

Je fais cela en créant un script d'enregistrement qui utilise l'API navigator.modelContext.registerTool() fournie par l'extension WebMCP.

Tool Registration

 import { makeSandwichTool } from './tools/makeSandwich';

export function registerWebMCPTools() {
  // Add our new tool to the array of available tools
  const tools = [makeSandwichTool];

  const register = () => {
    tools.forEach((tool) => {
      // Pass the entire tool object into the WebMCP API
      navigator.modelContext.registerTool(tool);
    });
    console.log(`[WebMCP] Registered ${tools.length} tools.`);
  };

  // Poll for the extension to inject the API, then register
  if (typeof navigator !== 'undefined' && 'modelContext' in navigator) {
    register();
  }
} 

En transmettant l'objet de l'outil à registerTool(), l'extension du navigateur le détecte immédiatement et le met à disposition de tout agent d'IA actif.

Injection dans le Layout

Enfin, je dois m'assurer que ce script d'enregistrement s'exécute réellement lorsqu'un utilisateur (ou un agent) visite le site web. Dans un projet Astro, la meilleure façon de le faire est d'importer le script dans mon layout global principal (par ex., src/layouts/BaseLayout.astro) :

Layout Injection

 <!-- At the very bottom of your BaseLayout <body> -->
<script>
  // Import the registration script so Vite compiles and bundles it
  import '../lib/webmcp/register.ts';
</script>
</body>
</html> 

En ajoutant cet extrait, le navigateur exécutera de manière transparente la logique d'enregistrement à chaque chargement de page.

Tester l'outil

Comme les outils WebMCP sont de simples objets JavaScript standard, ils sont incroyablement faciles à tester unitairement. Je vais utiliser Vitest pour simuler les entrées et vérifier les sorties dans src/lib/webmcp/tools/makeSandwich.test.ts.

J'importe directement makeSandwichTool et j'appelle sa fonction execute, en vérifiant à la fois le parcours d'erreur et celui de succès :

Testing the Tool

 import { describe, it, expect } from 'vitest';
import { makeSandwichTool } from './makeSandwich';

describe('makeSandwichTool', () => {
  it('should refuse to make a sandwich without sudo', async () => {
    const result = await makeSandwichTool.execute({ sudo: false });
    expect(result.isError).toBe(true);
    expect(result.content[0].text).toBe('What? Make it yourself.');
  });

  it('should make a sandwich with sudo', async () => {
    const result = await makeSandwichTool.execute({ sudo: true });
    expect(result.isError).toBeUndefined();
    expect(result.content[0].text).toContain('Okay. 🥪');
  });
}); 

Et voilà, c'est construit, enregistré et testé de manière approfondie un outil WebMCP !

Puisque ce site contient des articles, j'ai également créé des outils pour que l'IA puisse rechercher des articles, récupérer le texte brut d'un article, et en extraire des blocs de code.

J'utilise Pagefind comme moteur de recherche sur ce blog, je l'utilise donc pour enregistrer un outil search_articles.
Pour les articles bruts et les blocs de code, les données seront simplement extraites et renvoyées à l'outil.

Tous ces outils sont impératifs et seront enregistrés sur navigator.modelContext. L'IA lira leurs descriptions et orchestrera facilement leur utilisation en fonction des besoins de l'utilisateur.

Interaction

Pour tester la solution, j'ai utilisé Chrome. Étant donné que WebMCP est encore au stade expérimental, j'ai dû activer un flag spécifique pour accéder aux outils : chrome://flags/#enable-webmcp-testing

Une fois le flag activé, on peut utiliser les DevTools de Chrome pour voir les outils WebMCP disponibles.

Dans les DevTools, on peut lister les outils présents sur le site. Ils apparaissent avec leurs descriptions et les indications de saisie.

devtools_overview

De plus, on peut exécuter et tester ces outils directement. Un tableau affiche l'historique des exécutions d'outils. En sélectionnant une ligne, on obtient plus de détails sur l'exécution, notamment le résultat ou la sortie.

make_sandwich

Dans l'exemple suivant, on peut voir une autre exécution de l'outil make_sandwich :

make_sandwich2

Cependant, il s'agit d'une validation statique. Cela ne correspond pas au cas d'utilisation réel d'un agent d'IA manipulant ces outils. Au moment de l'écriture de cet article, l'intégration de Gemini sur Chrome n'était pas encore déployée dans ma région, j'ai donc utilisé une extension Chrome appelée webmcp-inspector. (Note : Il s'agit d'une nouvelle extension, à utiliser avec prudence).

Dès l'ouverture, l'extension liste les outils disponibles. Notez comment ils sont soigneusement divisés par type.

webmcp_overview

On peut également tester les outils directement, tout comme nous l'avons fait avec les DevTools.

webmcp_execution

La partie la plus intéressante est que je peux relier cela à un agent d'IA. Je peux demander à l'agent de tester sa capacité à utiliser les outils. L'inspecteur WebMCP trace également l'utilisation des outils enregistrés.

webmcp_execution

Dans la réponse ci-dessous, nous pouvons voir que l'agent a réussi à extraire le code avec succès :

ai_chat_response

Ces outils sont actuellement enregistrés sur ce blog au moment où nous parlons ! Ils sont accessibles et utilisables, alors n'hésitez pas à les tester vous-même.

En conclusion, les outils WebMCP offrent des capacités prêtes à l'emploi pour les agents d'IA. Ils permettent d'intégrer directement les agents aux navigateurs pour exécuter des processus ciblés. Cela réduit considérablement les risques d'erreur par rapport aux méthodes traditionnelles comme le scraping du code source HTML ou l'analyse de captures d'écran.

À mesure que les requêtes d'IA deviendront plus complexes, les définitions d'outils le deviendront également. Cela ouvre la porte à de nouveaux horizons : développer des bonnes pratiques, des frameworks et des standards pour l'enregistrement et l'utilisation de ces outils. Peut-être qu'internet sera conçu à l'avenir comme un iceberg : la pointe émergée présentant de magnifiques interfaces utilisateur conçues pour les humains, tandis qu'en coulisses, les agents d'IA travaillent sur l'immense structure immergée en dessous.