WebMCP & Architecture Agent-Ready : le cahier des charges du web de demain

IA, WebMCP, Stratégie, Développement, Agent-Native
775 words
Illustration : Une structure de données émergeant d'un écran de navigateur
Illustration : Une structure de données émergeant d'un écran de navigateur

Depuis quelques mois, tout le monde parle du Model Context Protocol (MCP) côté serveur. Mais la véritable révolution silencieuse est en train de se jouer dans le navigateur avec WebMCP. J'en ai d'ailleurs fait le cœur de mon interface de pilotage Dexter sur Telegram.

Portée par Microsoft et Google (proposition W3C), cette extension du protocole MCP au frontend va transformer nos sites web. On ne parlera plus de "pages à lire", mais de "services à appeler". Voici comment j'ai structuré mon cahier des charges pour préparer l'infrastructure de mes clients à cette mutation.

Pourquoi WebMCP change la donne marketing ?

Aujourd'hui, quand un agent IA (ChatGPT Search, Perplexity, ou un assistant autonome) interagit avec votre site, il fait du "scraping". Il essaie de deviner où est le bouton, de comprendre le texte, et de simuler un clic humain. C'est lent, c'est fragile, et ça casse dès que votre HTML change.

WebMCP renverse le paradigme. Au lieu que l'IA s'adapte à votre interface (UI), c'est votre site qui expose ses fonctionnalités comme des outils structurés. L'agent IA ne demande plus : "Où est le formulaire ?". Il demande : "Quels outils sont disponibles sur ce domaine ?". Votre site répond : "Je possède un outil request_quote et un outil check_availability".

Ma méthodologie de conception "Agent-Ready"

Pour chaque nouveau site client chez Visible Ici, j'ai mis en place un framework en 4 étapes pour intégrer cette dimension dès la conception.

Étape 1 — Cartographier les actions utilisateur

On ne se limite plus aux formulaires. On dresse l'inventaire de chaque interaction qui modifie un état ou déclenche un processus business (réservation, calcul de tarif, filtrage de produit).

Étape 2 — Classifier les outils par niveau

Chaque action est rangée dans l'une des trois catégories :

  • Lecture : Récupérer une info (ex: get_opening_hours).
  • Calcul : Traiter une donnée (ex: estimate_fire_safety_cost).
  • Action : Déclencher un processus (ex: submit_lead).

Étape 3 — Spécifier chaque outil (Le Contrat)

Chaque outil fait l'objet d'une fiche technique :

  • Nom : Identifiant unique (ex: add-to-cart).
  • Description : En langage clair (c'est ce que l'agent IA lit pour comprendre quand utiliser l'outil).
  • Paramètres : Schéma de données (inputSchema) précisant les types attendus.

Étape 4 — Choisir l'approche d'implémentation

WebMCP propose deux voies. La force du standard est de pouvoir mixer les deux.

  • Approche Déclarative (HTML) : Pour les formulaires classiques. On ajoute simplement des attributs tool-name et tool-description sur les balises <form> et <input>.
  • Approche Impérative (JavaScript) : Via l'API navigator.modelContext. Indispensable pour les outils complexes (simulateurs, appels API dynamiques).

L'architecture technique cible (Stack Astro)

Pour un site moderne sous Astro, l'intégration ne modifie pas le code visuel. Elle ajoute une couche de "service" invisible. Voici la structure de fichiers que je préconise :

  • src/schemas/tools.ts : Centralisation des schémas de validation (Zod).
  • src/scripts/webmcp/ : Un fichier par outil impératif.
  • src/scripts/sevya-bridge.ts : Le cœur du système. Ce middleware intercepte les appels des agents IA pour alimenter notre chaîne de tracking.

Le pont SEVYA : L'attribution entre Agents

C'est ici que mon expertise sur Sevya prend tout son sens.

Chaque appel d'outil WebMCP par un agent IA constitue un événement de conversion traçable. Le SEVYA Bridge capture les métadonnées de l'appel. Nous ne saurons pas seulement qu'un lead est arrivé, mais nous saurons que l'agent IA de votre client a appelé l'outil check_availability avec les paramètres date: "2026-03-15" avant de soumettre le formulaire.

C'est l'attribution de demain : l'analyse du dialogue entre votre infrastructure et l'agent personnel de votre prospect.

Checklist de sécurité & Dégradation gracieuse

Exposer ses fonctions au web n'est pas sans risque. Mon cahier des charges impose :

  1. Validation serveur obligatoire : On ne fait jamais confiance aux données envoyées par un agent.
  2. Rate limiting : Empêcher un agent mal configuré de boucler sur vos formulaires de devis.
  3. Confirmation utilisateur : Toute action "destructive" ou engageante doit requérir une validation humaine explicite via l'agent.

Enfin, WebMCP est conçu pour la dégradation gracieuse. Si le navigateur ne supporte pas le protocole, le site fonctionne normalement pour l'humain. Les attributs HTML sont simplement ignorés.

Conclusion : Anticiper pour dominer

Il est encore tôt (Chrome 146 propose un aperçu derrière un flag), mais ignorer WebMCP aujourd'hui, c'est commettre la même erreur que ceux qui ignoraient le mobile en 2010.

Le web ne se regarde plus, il s'utilise par procuration. En structurant vos données et vos services dès maintenant, vous devenez l'infrastructure de confiance que les agents choisiront de recommander.

Vous concevez un nouveau site vitrine ? Ne construisez pas un simple dépliant numérique. Construisez un service Agent-Ready.