Face à l’essor des agents d’intelligence artificielle capables de naviguer à notre place, le web traditionnel montre ses limites. Scraping fragile, interprétation visuelle coûteuse et formulaires complexes freinent l’automatisation. Le WebMCP (Web Model Context Protocol) émerge comme la solution clé : une norme web qui permet aux sites d’exposer leurs fonctionnalités sous forme d’outils structurés, directement lisibles et exécutables par les IA depuis le navigateur. Découvrez la genèse, le fonctionnement interne et les exemples de code de ce protocole qui redéfinit l’expérience web de demain.
Du web pour humains au web pour agents
Pendant près de trois décennies, le World Wide Web a été pensé, conçu et optimisé pour une seule cible : l’œil humain et ses interactions via la souris ou le tactile.
Cependant, l’arrivée des agents d’IA autonomes (capables d’exécuter des tâches complexes comme planifier des voyages, remplir des démarches administratives ou effectuer des achats) a mis en lumière une dette technique majeure. Pour interagir avec un site web classique, une IA doit aujourd’hui :
- Analyser le code HTML/CSS brut ou traiter des captures d’écran (DOM/Vision).
- Tenter de deviner la fonction de chaque bouton ou champ de saisie.
- Simuler des clics et des frappes au clavier de manière imprécise.
Cette approche, souvent basée sur le DOM scraping ou l’automatisation headless, est lente, gourmande en jetons (tokens), très coûteuse et extrêmement instable à la moindre mise à jour du design d’un site.
Le WebMCP apporte un paradigme fondamentalement nouveau : plutôt que de forcer l’IA à deviner la structure visuelle d’une page, le site web lui-même déclare ses fonctionnalités de manière structurée et sécurisée.
Genèse et Origines : La rencontre du MCP et des standards du W3C
Pour comprendre le WebMCP, il faut revenir aux deux piliers qui lui ont donné naissance :
- Le protocole MCP (Model Context Protocol) : Popularisé fin 2024 par Anthropic, le MCP initial est un protocole client-serveur (souvent basé sur JSON-RPC) permettant de connecter un LLM à des sources de données locales ou distantes et à des outils tiers (bases de données, API, fichiers).
- Le W3C et les géants du Web : Rapidement, la communauté des standards web et des éditeurs de navigateurs (notamment via le groupe de travail W3C Web Machine Learning, soutenu par des acteurs comme Google et Microsoft) s’est emparée du sujet. La question était simple : comment intégrer nativement cette notion d’outils pour IA au sein même du navigateur web ?
Le WebMCP est le résultat de cette convergence. Il transpose l’architecture du MCP classique dans le contexte d’une page HTML/JavaScript traditionnelle, tirant parti de la sécurité, du contexte et de la session du navigateur.
Architecture et Fonctionnement : Comment marche le WebMCP ?
Le fonctionnement du WebMCP repose sur le principe de la découverte dynamique d’outils (Tool Discovery) et de l’exécution contrôlée.
+-----------------------------------------------------------------------+
| NAVIGATEUR WEB (Session Active) |
| |
| +---------------------+ (1) Déclare Outils +------------------+ |
| | Site Web | ---------------------> | Context Manager | |
| | (Code JS / HTML) | | (WebMCP Engine) | |
| +---------------------+ +------------------+ |
| ^ ^ |
| | (4) Exécute action | (2) Expose |
| | avec cookies/session | outils |
| v v |
| +-----------------------------------------------------------------+ |
| | AGENT D'IA (LLM) | |
| | (3) Décide d'utiliser l'outil 'search' | |
| +-----------------------------------------------------------------+ |
+-----------------------------------------------------------------------+Le flux d’interaction standard :
- Enregistrement : Lors du chargement de la page, le site web enregistre un ou plusieurs outils auprès de l’API WebMCP du navigateur.
- Exposition : L’agent IA présent dans le navigateur (extension, fonctionnalité native ou assistant injecté) consulte la liste des outils disponibles via le protocole.
- Appel d’outil (Tool Call) : Quand l’utilisateur demande à l’IA d’effectuer une action, le modèle choisit l’outil approprié et génère des arguments au format JSON strictement validé.
- Exécution dans le contexte : L’outil est exécuté directement par le code de la page web. Cela signifie qu’il bénéficie automatiquement des cookies, du jeton d’authentification (JWT), et du state local de l’utilisateur déjà connecté.
Les deux approches d’intégration pour les développeurs
Le WebMCP propose deux modes de déclaration complémentaires pour s’adapter à la complexité des sites web.
A. L’API Déclarative (Markup HTML)
Pour des tâches simples comme des formulaires de recherche ou de contact, le WebMCP permet aux développeurs de simplement annoter le HTML existant sans écrire de JavaScript complexe.
B. L’API Impérative (JavaScript)
Pour des applications web riches (SaaS, e-commerce, tableaux de bord), l’API JavaScript permet de définir des outils aux fonctionnalités avancées avec validation de schéma JSON.
Exemple Concret de Code
Prenons l’exemple d’un site de réservation de billets de train. Le développeur souhaite permettre à l’IA de rechercher un trajet disponible pour l’utilisateur.
Voici comment le code JavaScript est implémenté sur le site web :
// Vérification du support de l'API WebMCP dans le navigateur
if ('modelContext' in navigator) {
// Enregistrement de l'outil de recherche de billets
navigator.modelContext.registerTool({
name: "search_train_tickets",
description: "Recherche des billets de train disponibles entre deux villes à une date donnée.",
// Définition des paramètres attendus par l'outil (Schéma JSON)
inputSchema: {
type: "object",
properties: {
origin: {
type: "string",
description: "Nom de la ville de départ (ex: Paris)"
},
destination: {
type: "string",
description: "Nom de la ville d'arrivée (ex: Lyon)"
},
date: {
type: "string",
format: "date",
description: "Date du voyage au format YYYY-MM-DD"
}
},
required: ["origin", "destination", "date"]
},
// Fonction exécutée lorsque l'IA appelle cet outil
async execute({ origin, destination, date }) {
try {
// L'API utilise les identifiants/cookies de la session actuelle
const response = await fetch(`/api/trains/search?from=${origin}&to=${destination}&date=${date}`);
const data = await response.json();
return {
content: [
{
type: "text",
text: JSON.stringify(data.results)
}
]
};
} catch (error) {
return {
isError: true,
content: [{ type: "text", text: "Impossible de récupérer les trajets." }]
};
}
}
});
}Que se passe-t-il côté IA ?
Lorsque l’utilisateur dit à son assistant : « Trouve-moi un train Paris-Lyon pour le 15 mai prochain », l’IA n’essaie plus de cliquer sur le calendrier du site. Elle lit la définition de search_train_tickets, formate directement les arguments { "origin": "Paris", "destination": "Lyon", "date": "2026-05-15" }, exécute la fonction et restitue le résultat de manière claire à l’utilisateur.
Avantages Stratégiques et Enjeux de Sécurité
Les Bénéfices Majeurs :
- Fiabilité maximale : Plus de cassure lors d’un changement de design CSS ou de mise en page HTML.
- Performance et économie de tokens : Évite d’envoyer tout le DOM ou des captures d’écran lourdes au LLM ; seuls les Schémas JSON et les données brutes circulent.
- Respect de la confidentialité : L’agent n’a pas besoin de connaître les identifiants ou mots de passe de l’utilisateur. Il agit sous le couvert de la session déjà ouverte par l’humain.
Les Défis et la Sécurité :
Le principal enjeu du WebMCP réside dans le contrôle des actions critiques :
- Confirmation utilisateur (Human-in-the-loop) : Pour des actions destructrices ou financières (ex: payer un panier, supprimer un compte), le protocole impose des validations explicites côté navigateur avant l’exécution.
- Protection contre l’injection de prompts (Prompt Injection) : Un site malveillant pourrait déclarer des outils piégés pour tenter de lire les données personnelles stockées dans l’IA. Les politiques de sécurité (Same-Origin Policy, permissions du navigateur) jouent un rôle crucial pour isoler le contexte de chaque domaine.
Vers le « Web Agent-Ready »
De la même manière que le SEO (Search Engine Optimization) a été indispensable pour rendre les sites visibles auprès de Google dans les années 2000, le WebMCP jette les bases du AEO (Agent Engine Optimization) ou du web « Agent-Ready ».
En transformant le web d’un ensemble de documentations visuelles en une vaste bibliothèque d’APIs sécurisées et contextualisées, le WebMCP représente le maillon manquant pour faire passer l’intelligence artificielle du rôle de simple assistant conversationnel à celui d’acteur véritablement exécutif dans notre quotidien numérique.
