00:00:00Les agents d'IA commencent désormais à s'intégrer dans tous les aspects de notre vie.
00:00:03Et l'un des domaines où cela est le plus flagrant est le navigateur.
00:00:06Toutes les grandes entreprises d'IA ont compris que le navigateur est l'outil que tout le monde utilise
00:00:11absolument tous les jours.
00:00:12Alors, pourquoi ne pas y intégrer l'IA ?
00:00:14Mais la vérité, c'est qu'ils sont tous médiocres.
00:00:15Et ce n'est pas une question d'optimisation.
00:00:17Il y a un problème fondamental qu'aucune amélioration ne pourra résoudre.
00:00:20Pourtant, Google, en collaboration avec Microsoft, vient de lancer WebMCP.
00:00:24Au lieu de rendre les agents plus aptes à utiliser les sites, il rend les sites plus aptes
00:00:29à communiquer avec les agents.
00:00:30C'est une approche totalement différente.
00:00:32Et cela permet des choses que nous n'avions jamais vues auparavant.
00:00:35Voici une simple page HTML s'exécutant sur un serveur local.
00:00:38En ouvrant l'onglet des extensions, nous trouvons l'extension WebMCP.
00:00:41En l'ouvrant, sous le nom du site, on voit un outil : “BookTable”.
00:00:45Nous avons connecté ce pont WebMCP à Claude Code et lui avons indiqué qu'un formulaire
00:00:49de réservation de restaurant était ouvert avec des outils WebMCP disponibles.
00:00:52Nous lui avons confié la tâche de réserver pour deux avec une date, un nom et une requête spéciale.
00:00:57Tous ces champs sont présents dans le formulaire.
00:00:59Il a confirmé la date, utilisé l'outil WebMCP fourni par le site, rempli les champs
00:01:03et a réussi la réservation.
00:01:06Actuellement, un agent a deux façons de comprendre ce qui s'affiche à l'écran.
00:01:09La première méthode repose sur la vision.
00:01:11L'agent prend une capture d'écran de la page, annote chaque élément visible et
00:01:15transmet l'image à un modèle qui tente de déterminer où cliquer.
00:01:19La deuxième méthode est l'analyse du DOM.
00:01:21L'agent récupère le code HTML brut de la page.
00:01:24Si vous avez déjà ouvert l'inspecteur d'élément sur un site, vous voyez le genre.
00:01:28Des milliers de lignes de code.
00:01:29L'agent parcourt tout cela pour essayer d'identifier le bon bouton.
00:01:33Ces deux approches partagent le même problème fondamental.
00:01:35Elles sont non déterministes.
00:01:36L'agent fait simplement de son mieux pour deviner à chaque fois.
00:01:39Si rien de tout cela ne fonctionne de manière fiable, c'est parce qu'Internet a été conçu
00:01:43pour les yeux humains.
00:01:45Chaque site part du principe qu'une personne le regarde.
00:01:47Il n'y a aucune structure pour les machines.
00:01:48Ainsi, chaque agent, quel que soit le modèle, se retrouve à interpréter quelque chose
00:01:53qui n'a jamais été conçu pour être lu par une machine.
00:01:55Avec WebMCP, au lieu que l'agent essaie de déchiffrer votre site, votre site enregistre
00:02:00ses actions disponibles sous forme d'outils.
00:02:01Quand un agent arrive sur une page, il ne devine plus.
00:02:04Il lit simplement les outils disponibles et les appelle directement.
00:02:07Pour l'instant, WebMCP n'est disponible qu'en avant-première.
00:02:10À mesure que le Web agentique évolue, les sites doivent aussi s'adapter.
00:02:13Et comme vous l'avez vu, en définissant ces outils, nous facilitons l'interaction
00:02:18des agents avec nos sites.
00:02:19La démonstration a fonctionné car c'était un simple formulaire HTML.
00:02:21Mais la plupart des sites réels sont bien plus complexes.
00:02:23WebMCP propose donc deux approches différentes selon vos besoins.
00:02:28Il existe deux façons de permettre aux agents de prendre le contrôle du navigateur.
00:02:31L'API déclarative est destinée aux processus simples, comme les formulaires HTML vus plus tôt.
00:02:35L'API impérative sert aux applications web complètes avec plusieurs pages, ce qui nécessite
00:02:40une mise en œuvre plus poussée que nous détaillerons plus tard.
00:02:43À ce jour, il n'y a pas de documentation officielle, mais il existe un dépôt d'outils WebMCP
00:02:48dans Google Chrome Labs avec deux démos, dont une seule est hébergée.
00:02:52Il y a une démo de recherche de vols et une extension officielle d'inspection d'outils.
00:02:56Une fois installée, vous pourrez détecter les outils sur n'importe quel site utilisant WebMCP
00:03:01via l'extension, et faire d'autres choses assez cool.
00:03:05Le schéma d'entrée des outils s'affiche directement ici.
00:03:07Actuellement, il n'y a qu'un outil sur cette page : “Search Flights”.
00:03:10Ils ont proposé deux options pour l'utiliser.
00:03:12Vous pouvez soit fournir des arguments personnalisés que le modèle d'IA doit remplir, soit
00:03:16configurer votre clé API Gemini, donner une instruction en langage naturel, et la page sera
00:03:21pilotée en conséquence.
00:03:22Ici, nous avons les entrées par défaut.
00:03:24Nous les avons modifiées et le système a réellement cherché des vols et obtenu des résultats.
00:03:28En revenant plus tard, le site de voyage WebMCP proposait quatre outils, dont trois
00:03:32étaient désormais des filtres applicables.
00:03:35Les arguments d'entrée de la page avaient également changé.
00:03:37J'ai ajouté un argument et une notification a confirmé la mise à jour des filtres.
00:03:41Aucun vol ne correspondait aux réglages, mais ils ont tous été appliqués.
00:03:44Nous avons alterné entre Zen Browser et Chrome car, bien que WebMCP soit un protocole
00:03:48ouvert utilisable par tout navigateur, il ne fonctionne pour l'instant que sur
00:03:54la version Canary de Chrome.
00:03:55C'est en attendant qu'ils publient le standard pour que tout le monde puisse l'utiliser.
00:03:58Voilà donc l'état actuel de l'outillage officiel.
00:04:01Pas de doc, deux démos, limité à Chrome Canary, et incompatible avec Claude Code
00:04:05car c'est destiné prioritairement aux agents de navigation.
00:04:09Nous avons donc trouvé ce pont WebMCP personnalisé à installer sur votre système,
00:04:14qui fournit un serveur MCP ainsi qu'une extension.
00:04:16C'est ce qui permet à Claude Code d'utiliser WebMCP pour naviguer et exploiter les outils
00:04:22proposés par n'importe quel site web.
00:04:23Pour montrer comment les sites l'implémentent, commençons par l'approche la plus simple.
00:04:27Avec l'API déclarative, utilisée pour le formulaire HTML, il suffit de déclarer
00:04:31trois éléments dans le formulaire : le nom de l'outil, sa description et la description
00:04:36des paramètres.
00:04:37Pas besoin d'entrer dans les détails techniques.
00:04:39Il faut juste s'assurer que votre agent les intègre.
00:04:41Nous avons créé deux guides par rétro-ingénierie depuis le dépôt WebMCP et nous y avons
00:04:46donné accès à Claude Code.
00:04:47Durant le processus, nous avons rencontré des problèmes courants et avons dû corriger
00:04:51ces guides en cours de route.
00:04:53Les deux sont disponibles sur AI Labs Pro, notre communauté où vous trouverez des
00:04:57modèles prêts à l'emploi.
00:04:58Vous pouvez les intégrer directement à vos projets pour cette vidéo et les précédentes.
00:05:01L'enseignement principal est dans la vidéo, mais si vous voulez les fichiers réels,
00:05:05les liens sont dans la description.
00:05:06Si votre agent ajoute ces déclarations, le reste est géré par le navigateur qui les lit
00:05:10directement dans le HTML.
00:05:12La deuxième méthode est l'API impérative, pour les interactions complexes nécessitant
00:05:17l'exécution de JavaScript.
00:05:18Nous avons initialisé une application Next.js, fourni le guide à Claude Code, et c'est tout ce
00:05:23dont il a eu besoin pour l'implémenter.
00:05:24Dans les applications React, cela crée un nouveau fichier dans le dossier “lib” où sont
00:05:29déclarés tous les outils nécessaires au site.
00:05:30Voici les fonctions et leurs définitions respectives.
00:05:33Mais comme ces applications web peuvent devenir immenses et proposer plus de 100 outils,
00:05:38on retrouve le même problème qu'avec Claude Code : la surcharge de contexte qui fait
00:05:41tout planter.
00:05:43Au lieu de charger tous les outils du site, il vaut mieux ne charger que ceux utiles
00:05:47à la page actuelle.
00:05:48C'est ce qu'on appelle le chargement contextuel.
00:05:50Voici l'application Next.js que Claude Code a générée.
00:05:53C'est une petite démo fonctionnelle avec un backend implémenté.
00:05:57Sur la page d'accueil, ce site ne propose que 3 outils.
00:06:01En allant sur la page du panier, on passe à 4 outils et les noms ont changé.
00:06:05La disponibilité des outils s'adapte en fonction de la page où vous vous trouvez.
00:06:09C'est là que les fonctions d'enregistrement interviennent.
00:06:11Dès que vous arrivez sur la page d'accueil, la fonction “register home tools” s'exécute,
00:06:15et quand vous la quittez, c'est “unregister home tools”.
00:06:18Selon les outils propres à chaque page, le système les active ou les désactive.
00:06:23C'est pourquoi cela ne dépend pas uniquement du navigateur, mais aussi du code qui gère
00:06:27l'intégration.
00:06:28Ici, nous n'utilisons pas WebMCP avec un agent de navigation natif, ce que Google préconise
00:06:32et ce que chaque navigateur devrait implémenter.
00:06:34Nous utilisons un pont qui relie Claude Code à WebMCP, et c'est ainsi que nous
00:06:39contrôlons les sites.
00:06:40Si vous voulez tirer davantage de Claude Code, nous avons d'ailleurs une vidéo sur les 10
00:06:44meilleures façons de prendre l'avantage avec lui.
00:06:46Ce pont est un projet communautaire, et avec l'API impérative, le changement d'outils
00:06:51ne fonctionne pas très bien avec ce serveur MCP.
00:06:54Quand j'ai ouvert le site, nous étions sur la page de paiement et avons lancé la session
00:06:58Claude Code à cet endroit.
00:06:59Quand nous lui avons demandé de revenir à l'accueil, il n'a pas pu voir les outils
00:07:03disponibles sur cette page.
00:07:04Ensuite, sur la page produit, nous avions un bouton “ajouter au panier”.
00:07:08Mais une fois sur la page, il n'arrivait pas vraiment à détecter ce bouton.
00:07:11Nous avons dû ajouter manuellement un article au panier pour la démonstration.
00:07:14Cependant, quand nous lui avons demandé de finaliser l'achat, il a automatiquement rempli
00:07:18les détails et passé la commande, complétant tout le cycle d'achat.
00:07:21C'est une limite actuelle de ce MCP, ce qui nous amène à un autre point.
00:07:25WebMCP est open source, avec de grands noms du Web et de la tech parmi les participants.
00:07:30Pourtant, seul Chrome Canary le supporte pour l'instant, et l'agent privilégié
00:07:34est Gemini, l'IA de Google directement intégrée au navigateur.
00:07:38Si vous êtes propriétaire d'un site et implémentez WebMCP aujourd'hui, le seul agent
00:07:42capable d'utiliser vos outils nativement est Gemini.
00:07:44Claude Code a besoin d'un pont communautaire qui flanche lors du chargement contextuel.
00:07:49Tous les agents non-Google sont donc désavantagés.
00:07:51Claude pourrait-il rattraper son retard ?
00:07:52Bien sûr, ils ont leur propre extension de navigateur.
00:07:55Et comme c'est aussi un agent de navigation, il pourrait découvrir ces outils de la même
00:07:59manière que Gemini.
00:08:00Mais la question est : combien de personnes vont faire l'effort d'installer l'extension Claude
00:08:04plutôt que d'utiliser Gemini déjà présent dans Chrome ?
00:08:08Chrome a des milliards d'utilisateurs qui n'ont rien à installer.
00:08:11À notre avis, Google ne bloque personne.
00:08:13Ils profitent simplement de leur architecture et de leur audience actuelle.
00:08:17Un standard ouvert qui tourne mieux sur leur propre navigateur avec l'agent qu'ils
00:08:21fournissent d'office.
00:08:22Cela ne signifie pas qu'il ne faut pas l'implémenter.
00:08:23Le standard est réellement utile, et rendre son site accessible aux agents est un choix judicieux,
00:08:28peu importe l'agent qui en profite en premier.
00:08:30Voici quelques points à connaître pour l'implémentation.
00:08:33Les spécifications recommandent de ne pas dépasser 50 outils par page.
00:08:36Le but n'est pas d'exposer toute votre application.
00:08:38Il s'agit de proposer des actions ciblées, ce qu'un utilisateur voudrait réellement
00:08:42faire sur cette page précise.
00:08:43Les descriptions des outils sont aussi plus cruciales qu'on ne le pense.
00:08:46Les agents s'en servent pour décider quel outil appeler.
00:08:49Une description vague, et l'agent choisira le mauvais outil ou l'ignorera complètement.
00:08:53Rédigez-les comme si vous expliquiez l'action à quelqu'un qui ne connaît pas votre site.
00:08:57Et n'oubliez pas que c'est encore expérimental.
00:08:58L'API va encore évoluer.
00:09:00Chrome 146 sortira en mars avec un support plus large.
00:09:03Mais d'ici là, c'est une phase d'essai pour les développeurs.
00:09:05Ne le déployez pas encore en production.
00:09:06Si vous suivez cette chaîne, vous savez que l'IA exige de solides bases techniques.
00:09:11C'est pourquoi j'adore Brilliant.
00:09:13C'est une plateforme interactive avec des leçons conçues par des enseignants de classe
00:09:17mondiale venant du MIT, de Harvard et de Stanford.
00:09:19Je recommande vivement leurs cours sur le clustering, la classification et le fonctionnement de l'IA.
00:09:23Ils vous apprennent à déceler des motifs cachés et à comprendre la logique des
00:09:27grands modèles de langage de manière interactive.
00:09:28Comme vous le voyez à l'écran, ils proposent une immense variété de cours allant
00:09:33des maths fondamentales à l'informatique avancée et à la science des données.
00:09:37Brilliant offre également à nos spectateurs 20 % de réduction sur l'abonnement annuel Premium,
00:09:42donnant un accès illimité à tout le contenu de la plateforme.
00:09:44Pour tester Brilliant gratuitement pendant 30 jours, allez sur brilliant.org/ailabs, scannez
00:09:50le code QR à l'écran ou cliquez sur le lien en description.
00:09:53Prenez l'habitude d'apprendre dès aujourd'hui et boostez vos compétences grâce
00:09:56à Brilliant.
00:09:57Cela nous amène à la fin de cette vidéo.
00:09:59Si vous souhaitez soutenir la chaîne et nous aider à continuer, vous pouvez
00:10:03utiliser le bouton “Merci” ci-dessous.
00:10:06Comme toujours, merci d'avoir regardé et à la prochaine.