WebMCP démystifié : rendre votre site web prêt pour les agents en e-commerce et CMS

Les agents IA deviennent une composante bien réelle de la façon dont les internautes interagissent avec le web. Ils recherchent des produits, remplissent des formulaires, prennent des rendez-vous et finalisent des achats, le tout en naviguant sur des sites web à votre place. Mais il existe un problème fondamental : les sites web sont conçus pour les humains, pas pour les machines.

Un agent IA qui observe votre site e-commerce voit un enchevêtrement de divs, de boutons et de formulaires. Il doit deviner le rôle de chaque élément, ce qui conduit à des interactions lentes et sujettes aux erreurs. WebMCP résout ce problème en vous permettant d'indiquer aux agents exactement ce que votre site web peut faire, dans un langage qu'ils comprennent.

WebMCP est un nouveau standard de navigateur (actuellement en origin trial, Chrome 149+) qui vous permet d'exposer les fonctionnalités de votre site web sous forme d'« outils » structurés destinés aux agents IA. Aucune modification du backend, aucune API distincte. Juste votre site web existant, rendu compatible avec les agents.

Dans cet article, nous expliquons ce qu'est WebMCP, ce qu'il permet pour les sites e-commerce et CMS, et comment vous pouvez commencer à l'utiliser, que vous soyez développeur ou propriétaire de site web.

Qu'est-ce que WebMCP ?

WebMCP (Web Model Context Protocol) est une proposition de standard W3C qui fournit deux API complémentaires pour enregistrer des outils sur une page web :

• L'API impérative : enregistrement d'outils en JavaScript via document.modelContext.registerTool()
• L'API déclarative : annotations par attributs HTML sur des éléments <form> existants (toolname, tooldescription, toolparamdescription)

Les deux API remplissent le même objectif : elles rendent les capacités de votre site web découvrables et exécutables par les agents IA fonctionnant dans le navigateur (l'agent intégré de Chrome, des extensions de navigateur, ou d'autres plateformes d'agents).

Comment ça marche

┌─────────────────────────────────────────────┐
│              Web Browser                     │
│  ┌───────────────────────────────────────┐  │
│  │  Running Page (your website)          │  │
│  │  ┌─────────────────────────────────┐  │  │
│  │  │  WebMCP Tools                   │  │  │
│  │  │  - search_products()            │  │  │
│  │  │  - add_to_cart()                │  │  │
│  │  │  - submit_order()               │  │  │
│  │  └─────────────────────────────────┘  │  │
│  └───────────────────────────────────────┘  │
│              │                               │
│  Browser AI Agent                           │
└──────────────┼───────────────────────────────┘
               │
    Agent invokes tools → UI updates visibly

La différence essentielle par rapport aux intégrations backend traditionnelles (comme les serveurs MCP) est que les outils WebMCP s'exécutent à l'intérieur de l'onglet du navigateur, sur la page que l'utilisateur consulte déjà. L'agent agit sur le DOM en direct, dans la session de l'utilisateur, avec un accès complet aux cookies, à l'état d'authentification et aux données en temps réel.

Ce que WebMCP permet pour l'e-commerce

Recherche et découverte de produits

Au lieu qu'un agent parcoure des centaines de pages produits pour trouver ce qui correspond à la demande d'un utilisateur, un outil search_products bien défini permet à l'agent d'interroger directement votre catalogue :

await document.modelContext.registerTool({
  name: "search_products",
  description: "Search the product catalog by category, price range, and features.",
  inputSchema: {
    type: "object",
    properties: {
      category: { type: "string", description: "Product category" },
      max_price: { type: "number", description: "Maximum price in EUR" },
      features: {
        type: "array",
        items: { type: "string" },
        description: "Required features, e.g. ['organic', 'gluten-free']"
      }
    },
    required: ["category"]
  },
  async execute({ category, max_price, features }) {
    const results = await fetch(`/api/products?category=${category}&max_price=${max_price}&features=${features.join(",")}`);
    return results.json();
  }
});

Un utilisateur peut alors dire : « Trouve-moi des petits pots bio à moins de 5 € pour mon enfant d'un an », et l'agent appelle directement votre outil, en renvoyant des résultats structurés que votre interface sait déjà afficher.

Parcours de commande et d'achat

Les outils WebMCP peuvent guider les agents à travers des parcours de commande complexes :

C'est particulièrement utile pour les achats récurrents. Un utilisateur qui demande « Recommande les grains de café que j'ai achetés le mois dernier » peut être pris en charge par un outil get_order_history() qui renvoie les commandes passées, suivi de add_to_cart() et submit_order().

Support client

Les parcours de support complexes (réclamations de garantie, retours, échanges) nécessitent souvent de naviguer entre plusieurs pages et formulaires. Les outils WebMCP peuvent :

• Naviguer vers la bonne page de support (start_claim_process())
• Préremplir les champs connus (populate_product_details())
• Soumettre le formulaire complété (submit_claim())

L'utilisateur voit le formulaire se remplir en temps réel sur son écran, ce qui préserve la confiance et la visibilité.

Ce que WebMCP permet pour les CMS

Recherche et récupération de contenu

Un site propulsé par un CMS peut exposer la recherche et le filtrage sous forme d'outils :

await document.modelContext.registerTool({
  name: "search_articles",
  description: "Search articles by topic, date, author, or keywords.",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string", description: "Search query" },
      category: { type: "string", description: "Article category" },
      date_from: { type: "string", description: "Start date (YYYY-MM-DD)" },
      date_to: { type: "string", description: "End date (YYYY-MM-DD)" }
    },
    required: ["query"]
  },
  async execute({ query, category, date_from, date_to }) {
    // Query your CMS search index
    return await cmsSearch({ query, category, date_from, date_to });
  }
});

Interactions basées sur des formulaires

Les sites CMS disposent souvent de formulaires de contact, d'inscriptions à des newsletters, d'inscriptions à des événements et de systèmes de réservation. L'API déclarative vous permet de transformer ces éléments en outils WebMCP avec seulement quelques attributs HTML, sans aucun JavaScript.

<form
  toolname="book_event"
  tooldescription="Register for a public event at our venue."
  toolautosubmit
>
  <label for="name">Full Name</label>
  <input name="name" type="text"
    toolparamdescription="Attendee's full name" required />

  <label for="email">Email</label>
  <input name="email" type="email"
    toolparamdescription="Contact email address" required />

  <label for="date">Event Date</label>
  <input name="date" type="date"
    toolparamdescription="Date of the event" required />

  <label for="guests">Number of Guests</label>
  <select name="guests"
    toolparamdescription="Number of attendees (1-50)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5+</option>
  </select>

  <button type="submit">Register</button>
</form>

Lorsqu'un agent invoque cet outil, le navigateur met le focus sur le formulaire, remplit les champs et, avec toolautosubmit, le soumet automatiquement. L'utilisateur voit tout se dérouler à l'écran.

Filtrage et navigation du contenu

Pour les sites disposant de vastes collections de contenu (portails d'actualités, catalogues, documentation), les outils de filtrage permettent aux agents d'affiner les résultats avec précision :

await document.modelContext.registerTool({
  name: "filter_articles",
  description: "Refine article results by reading time, language, or tags.",
  inputSchema: {
    type: "object",
    properties: {
      max_read_time: { type: "number", description: "Maximum reading time in minutes" },
      language: {
        type: "string",
        enum: ["en", "fr", "de", "es"],
        description: "Article language"
      },
      tags: {
        type: "array",
        items: { type: "string" },
        description: "Article tags to include"
      }
    }
  },
  async execute({ max_read_time, language, tags }) {
    // Apply filters to current results
    return applyFilters({ max_read_time, language, tags });
  }
});

Déclaratif vs impératif : lequel utiliser ?

WebMCP propose deux API. Elles ne sont pas concurrentes ; elles sont complémentaires. Voici comment choisir.

L'API déclarative

Ce que c'est : vous ajoutez des attributs HTML à des éléments <form> existants. C'est tout. Aucun JavaScript.

Idéale pour :

• Les formulaires qui existent déjà et fonctionnent pour les utilisateurs humains
• Les formulaires de contact, d'inscription, de réservation, de recherche
• Les sites construits avec des plateformes CMS qui génèrent le HTML des formulaires
• Les gains rapides : vous pouvez ajouter la prise en charge de WebMCP à un site existant en quelques minutes

Avantages :

• Aucun JavaScript requis
• Fonctionne avec n'importe quel formulaire HTML
• Facile à maintenir aux côtés de votre balisage existant
• Excellente pour la collecte de données simples et structurées

Inconvénients :

• Limitée aux interactions basées sur des formulaires
• Moins de contrôle sur la logique d'exécution
• Impossible d'enregistrer/désenregister dynamiquement des outils selon l'état de la page
• La génération du schéma est implicite (basée sur la structure du formulaire)

À utiliser quand : votre besoin principal est de rendre les formulaires accessibles aux agents. Si les interactions clés de votre site sont des soumissions de formulaires (contact, réservation, recherche, inscription), commencez par là.

L'API impérative

Ce que c'est : vous appelez document.modelContext.registerTool() depuis JavaScript, en définissant des outils avec des noms, des descriptions, des schémas JSON et des fonctions d'exécution.

Idéale pour :

• Les interactions complexes au-delà des formulaires (recherche de produits, gestion du panier, filtrage)
• L'enregistrement dynamique d'outils (des outils qui apparaissent/disparaissent selon le contexte)
• Les outils qui doivent appeler des API, transformer des données ou renvoyer des résultats structurés
• Les sites qui nécessitent un contrôle fin du comportement de l'agent

Avantages :

• Contrôle total sur le comportement des outils et les valeurs de retour
• Enregistrement et désenregistrement dynamiques
• Peut appeler des API backend, transformer des données, renvoyer du JSON
• Prise en charge riche de JSON Schema (enums, types, validation)
• Prise en charge des iframes cross-origin avec exposedTo

Inconvénients :

• Nécessite une implémentation JavaScript
• Davantage d'effort de développement
• Vous devez gérer le cycle de vie des outils

À utiliser quand : vos interactions vont au-delà de simples soumissions de formulaires : catalogues de produits e-commerce, filtrage dynamique, workflows en plusieurs étapes, ou tout scénario où vous devez renvoyer des données structurées à partir de l'exécution d'un outil.

Matrice de décision

Peut-on utiliser les deux ?

Absolument. Un site bien conçu peut utiliser l'API déclarative pour les formulaires statiques (contact, newsletter) et l'API impérative pour les interactions dynamiques (recherche de produits, gestion du panier). Elles coexistent sur la même page sans conflit.

WebMCP vs MCP : non pas concurrents, mais partenaires

Il est important de comprendre que WebMCP n'est pas un remplacement du Model Context Protocol (MCP). Ils résolvent des problèmes différents :

Voyez les choses ainsi : MCP est votre couche de services backend : il gère la logique métier centrale, la récupération des données et les tâches en arrière-plan. WebMCP est votre couche frontend : il connecte les agents directement au site web que l'utilisateur regarde, permettant des interactions contextuelles et intégrées au navigateur.

Les applications agentiques les plus efficaces utilisent les deux : MCP pour le gros du travail (données, authentification, logique métier) et WebMCP pour l'expérience interactive (actionnement de l'UI, retour en temps réel, workflows avec l'humain dans la boucle).

Pour commencer

Disponibilité

WebMCP est actuellement disponible dans Chrome 149+ via un origin trial. Pour y participer :

1. Inscrivez-vous à l'origin trial sur le portail des origin trials de Chrome
2. Ajoutez la balise meta d'origin trial à votre HTML
3. Implémentez vos outils à l'aide de l'une des deux API

Pour le développement local, vous pouvez activer WebMCP via chrome://flags/#enable-webmcp-testing.

Sécurité

Les outils WebMCP sont encadrés par :

• L'isolation d'origine — les outils ne fonctionnent que dans des documents à origine isolée
• La Permissions Policy — la politique tools a pour valeur par défaut self, désactivant les outils dans les iframes cross-origin sauf autorisation explicite avec allow="tools"

Les outils sont éphémères : ils n'existent que tant que la page est ouverte. Dès que l'utilisateur quitte la page ou ferme l'onglet, l'agent perd l'accès.

Bonnes pratiques

1. Un outil, une tâche : chaque outil doit accomplir une seule tâche bien définie. Évitez les outils qui se chevauchent.
2. Nommage clair : utilisez des verbes qui décrivent exactement ce qui se passe (create-event plutôt que start-event-creation-process).
3. Descriptions positives : décrivez ce qu'un outil peut faire, pas ce qu'il ne peut pas faire.
4. Acceptez l'entrée brute : ne demandez pas à l'agent d'effectuer des calculs ou de formater des chaînes. Laissez l'outil s'en charger.
5. Validez strictement dans le code, souplement dans le schéma : les contraintes de schéma aident mais ne sont pas garanties.
6. Gérez le cycle de vie des outils : enregistrez les outils lorsqu'ils sont pertinents, désenregistrez-les lorsqu'ils ne le sont plus.
7. Faites confiance à l'agent : décrivez les capacités, ne prescrivez pas des parcours exacts.

Exemples concrets

Google a publié plusieurs démos qui présentent WebMCP en action :

• Pizza Maker (impératif) : commander une pizza avec une personnalisation par couches
• Flight Search (impératif, React) : rechercher des vols avec des filtres complexes
• Le Petit Bistro (déclaratif) : formulaire de réservation de restaurant avec annotations HTML

Ces démos illustrent les deux API côte à côte et constituent un excellent point de départ pour l'expérimentation.

Et ensuite ?

WebMCP est encore en développement actif. La spécification est en cours d'affinage sur GitHub, et l'implémentation de Chrome est susceptible d'évoluer. Angular dispose également d'une prise en charge expérimentale de l'enregistrement d'outils WebMCP.

Pour les développeurs qui construisent des plateformes e-commerce, des solutions CMS ou toute application web où des agents IA doivent interagir avec des pages destinées aux utilisateurs, WebMCP représente un changement fondamental : au lieu que les agents devinent le fonctionnement de votre site, votre site leur indique exactement ce qu'il peut faire.

Le résultat : des interactions plus rapides, plus fiables et plus transparentes — avec l'utilisateur toujours aux commandes.

Cet article s'appuie sur la documentation officielle des développeurs Chrome, la spécification W3C WebMCP et les démos WebMCP de Google. WebMCP est une proposition de standard et est susceptible d'évoluer.