WebMCP permet aux applications React d'exposer des API d'outils structurées directement aux agents IA, remplaçant le fragile scraping d'interface utilisateur par des appels fiables et indépendants de l'interface. La fonctionnalité est disponible dans un essai d'origine (origin trial) pour Chrome 149 et versions ultérieures, et vous pouvez l'activer via chrome://flags/#enable-webmcp-testing.

Le problème de l'apprentissage du clic pour les agents

La plupart des tentatives actuelles pour permettre aux agents IA d'interagir avec une page web reposent sur des indices visuels. Un agent analyse le DOM, devine quel élément est un bouton, simule des clics, fait défiler la page et remplit des champs de formulaire. Dès qu'un bouton se déplace, qu'une étiquette change ou qu'une mise en page est ajustée, le script échoue. Cette approche est lente car elle attend que le navigateur affiche chaque étape, et une refonte de routine peut briser toute une chaîne d'automatisation.

WebMCP inverse le modèle

WebMCP est un nouveau standard web introduit par Google Chrome. Au lieu d'exposer une surface visuelle que l'agent doit explorer, une page annonce un ensemble d'outils — des opérations nommées et typées que la page peut exécuter. Un agent IA demande d'abord « quels outils sont disponibles ? » ; la page répond avec une liste telle que « searchProducts » ou « checkout ». L'agent invoque ensuite un outil en envoyant une charge utile JSON qui correspond au schéma d'entrée déclaré de l'outil, par exemple searchProducts(query: "jacket"). Le navigateur achemine la requête directement vers le JavaScript de la page, qui exécute la logique sous-jacente sans aucune implication de l'interface utilisateur.

Le résultat est une interaction instantanée, qui fonctionne indépendamment des changements de CSS et qui reste fonctionnelle tant que les définitions des outils restent stables.

Des avantages concrets pour les développeurs

  • Vitesse – La communication reste à l'intérieur du système de messagerie du navigateur, éliminant l'aller-retour du rendu des clics et l'attente des mises à jour de la page.
  • Fiabilité – Les outils appellent les mêmes fonctions que le site utilise déjà pour sa propre interface, ainsi une refonte ne casse pas l'API.
  • Contrôle – Les développeurs décident quelles opérations sont exposées, quels paramètres elles acceptent et ce que l'agent peut voir dans la réponse.
  • Indépendance de l'interface utilisateur – Le style, la mise en page ou le remaniement de composants n'affectent plus la capacité de l'agent à invoquer une fonctionnalité.

WebMCP ne remplace pas le MCP (Message-Channel-Protocol) existant utilisé côté serveur. Le MCP continue de gérer la récupération de données lourdes et l'orchestration backend, tandis que WebMCP gère les interactions en direct dans l'onglet.

Comment les développeurs React peuvent commencer

Le code React peut enregistrer des outils en utilisant soit une API JavaScript impérative, soit une API déclarative basée sur des formulaires HTML. Un modèle courant consiste à encapsuler l'enregistrement dans un hook personnalisé :

  1. Appeler une fonction d'enregistrement avec le nom de l'outil et une courte description.
  2. Fournir un schéma d'entrée (par exemple, un schéma JSON décrivant les champs obligatoires).
  3. Fournir un callback execute qui exécute la logique métier existante — souvent la même fonction qu'un clic sur un bouton déclencherait.

Lorsque le hook est exécuté, le navigateur ajoute l'outil au manifeste WebMCP de la page. Un agent IA qui découvre le manifeste peut alors invoquer l'outil sans jamais toucher au DOM.

Comme l'enregistrement se produit lors du montage du composant, les outils peuvent être limités à des routes spécifiques ou à des feature flags, offrant aux équipes un contrôle granulaire sur ce que l'IA peut faire en production par rapport à un environnement de test.

Avertissements et points de vigilance

WebMCP est encore en phase d'essai d'origine. Il ne fonctionne que dans Chrome 149+ et doit être activé manuellement via un flag.

Quelles sont les prochaines étapes

Google a ouvert l'essai aux développeurs qui souhaitent expérimenter des expériences web natives pour l'IA. Les prochaines étapes pour les personnes intéressées sont :

  • Activer le flag dans Chrome et recharger le site cible.
  • Ajouter un enregistrement d'outil simple dans un composant React et observer le manifeste apparaître dans les DevTools du navigateur.
  • Tester un client IA (par exemple, un script local suivant le protocole WebMCP) pour appeler l'outil et vérifier la réponse.
  • Suivre la page de statut de l'essai pour les mises à jour sur le déploiement de la version stable.

À retenir : WebMCP offre aux développeurs React un moyen de rendre leurs applications directement appelables par des agents IA, transformant les éléments d'interface utilisateur en services stables et typés. Ce changement élimine le cauchemar de maintenance du scraping d'écran et ouvre la voie à des applications web véritablement natives pour l'IA — à condition que les équipes soient à l'aise avec le travail dans un environnement Chrome expérimental.