Google & Microsoft veulent révolutionner la navigation IA (avec WebMCP)

BBetter Stack
AI/미래기술경제 뉴스컴퓨터/소프트웨어

Transcript

00:00:00Une nouvelle proposition soutenue par Google et Microsoft pourrait bien façonner
00:00:03l'avenir de notre utilisation du web, et j'aime plutôt ça. Ça s'appelle WebMCP,
00:00:08mais ne le confondez pas avec un serveur MCP classique. WebMCP est en fait
00:00:13une API de navigateur qui permettra aux développeurs front-end d'exposer
00:00:18les fonctionnalités de leurs sites comme outils pour les agents IA, transformant
00:00:23chaque site en mini-serveur MCP. Même si certains sites ont déjà commencé
00:00:27à lancer leurs propres serveurs MCP, c'est un peu différent ici. Le but est de
00:00:32laisser vos agents utiliser le site pour vous, au lieu de simplement accéder
00:00:37à vos API. Tout se passera côté front-end. Si cette nuance vous semble
00:00:46confuse, passons à une démo pour voir pourquoi je trouve ça génial.
00:00:49D'abord, je l'avoue : cette démo n'aura rien de spectaculaire visuellement,
00:00:54mais c'est justement tout l'intérêt de WebMCP. Il prend quelque chose de déjà
00:00:58possible pour le rendre bien plus efficace. J'utilise ici la version Canary
00:01:02de Chrome où ils testent cette proposition, sur un site configuré avec
00:01:06des outils WebMCP. À droite, j'ai une extension capable d'interagir avec eux,
00:01:10mais imaginez qu'à l'avenir, ce soit l'IA intégrée de votre navigateur :
00:01:15Gemini, ChatGPT Atlas ou la nouvelle version d'Arc. Si j'envoie un prompt
00:01:19pendant que je suis sur ce site, par exemple : "Je veux réserver un vol
00:01:23aller-retour pour deux de Londres à New York à ces dates", et que je valide,
00:01:28l'IA me redirige vers la page de résultats. Elle a utilisé le site pour moi.
00:01:33Impressionnant, non ? Comme je l'ai dit, ça semble très basique,
00:01:38mais l'essentiel réside dans la méthode. Actuellement, pour qu'une IA utilise
00:01:42un site, on utilise Playwright, le parsing HTML ou des captures d'écran
00:01:48pour simuler un humain. Mais c'est inefficace, gourmand en tokens,
00:01:53et sujet aux erreurs. C'est là que WebMCP intervient. WebMCP permet
00:01:58au développeur d'exposer des outils MCP qui interagissent directement
00:02:03avec le JavaScript côté client. Quand une IA choisit d'utiliser un de ces outils,
00:02:07elle exécute simplement une fonction JavaScript que vous, le développeur,
00:02:12avez définie. Sur cette page de démonstration de vols, j'ai un outil WebMCP
00:02:16nommé "search flights". Il prend des arguments comme l'origine, la destination
00:02:20et le type de trajet, ce qui correspond exactement au formulaire présent ici.
00:02:25Le point crucial, c'est que l'IA sait qu'elle peut utiliser cet outil. Donc,
00:02:29quand on lance le prompt, elle ne remplit pas le formulaire via Playwright
00:02:34ou le parsing HTML. Elle n'a même pas besoin de savoir à quoi ressemble
00:02:38le site ou son code HTML. Elle sait juste qu'elle dispose de cet outil WebMCP,
00:02:43l'appelle avec les bons arguments, et j'ai défini ce qui se passe ensuite
00:02:47via une fonction JavaScript. Ici, cela met à jour l'état React, ce qui déclenche
00:02:52la navigation vers les résultats. Si on regarde le code front-end,
00:02:55c'est incroyablement simple et tout deviendra plus clair. La première étape
00:02:59consiste à enregistrer les outils WebMCP disponibles pour une page donnée
00:03:04via window.navigator.model_context. C'est l'API qui devra être intégrée
00:03:09aux navigateurs si la proposition est adoptée ; elle est déjà dans Chrome Canary.
00:03:13Une fois l'API Model Context accessible, on enregistre les outils
00:03:18avec la fonction registerTool. Ici, j'enregistre l'outil "search flights"
00:03:22utilisé tout à l'heure. Un outil n'est qu'une simple définition d'objet.
00:03:26On a un nom, une description (transmise à l'IA pour qu'elle sache quand
00:03:30l'utiliser) et un schéma d'entrée pour les arguments. Dans mon cas,
00:03:34j'avais l'origine et la destination pour correspondre au formulaire.
00:03:38On peut aussi ajouter du contexte pour aider l'IA à comprendre
00:03:42ce que ces arguments doivent être. La partie vitale est la fonction execute.
00:03:47C'est le JavaScript client qui s'exécutera sur votre site lors de l'appel.
00:03:51Il peut faire pratiquement tout ce que vous voulez. J'utilise ici
00:03:55la fonction "search flights". Sans entrer dans les détails de l'implémentation,
00:03:59je récupère les paramètres remplis par l'IA et j'émet un événement
00:04:03nommé "search flights" avec ces données. Dans mon code React,
00:04:08j'ajoute simplement un écouteur sur cet événement. Quand il est reçu,
00:04:12je lance la fonction handleSearchFlights. C'est là qu'on peut faire
00:04:15tout ce que React permet. Dans mon exemple, je prends les paramètres
00:04:19pour mettre à jour les critères de recherche, ce qui change la page.
00:04:24C'est aussi simple que ça, et c'est pourquoi j'adore cette approche.
00:04:29Non seulement c'est économe en tokens, mais cela me permet de définir
00:04:34les interactions : l'IA suit mes règles. C'est une solution élégante pour
00:04:39concevoir des sites pensés à la fois pour l'humain et l'assistant IA,
00:04:43contrairement à l'approche actuelle où l'on crée un site pour l'humain
00:04:48et un serveur MCP séparé pour l'IA, en espérant que l'IA s'en sorte.
00:04:51Notez que ces outils WebMCP ne servent pas qu'à déclencher des actions
00:04:55ou remplir des formulaires. Ils sont aussi très utiles pour extraire
00:05:00des informations de la page. Si, en tant qu'humain, je commence à ajuster
00:05:05les filtres (prix moins de 500$, départ avant midi), il reste encore
00:05:11beaucoup de vols. Je veux que l'IA m'aide à choisir le meilleur.
00:05:15Je lui demande : "Quel vol recommanderais-tu sur cette page ?"
00:05:20Aujourd'hui, on utiliserait le parsing HTML pour analyser toute la page
00:05:24et tenter d'en extraire des données structurées. Avec WebMCP, c'est inutile.
00:05:29J'ai simplement créé un outil WebMCP appelé "list flights". Il a accès
00:05:33à l'état React actuel, donc à toutes les informations affichées à l'utilisateur,
00:05:38mais dans un format JSON propre. Si je pose ma question à l'IA,
00:05:42elle appelle l'outil, liste les vols visibles et me donne une recommandation,
00:05:46par exemple le vol 56, que je peux retrouver directement sur la page.
00:05:51Ce processus consomme bien moins de tokens et est beaucoup plus précis.
00:05:56Enfin, je veux vous montrer comment profiter de WebMCP sans même
00:06:00utiliser de JavaScript. Jusqu'ici, on a vu l'API impérative, où j'écris
00:06:05le code pour gérer les appels et enregistrer les outils.
00:06:10Il existe une seconde méthode : l'API déclarative. Elle est beaucoup plus simple
00:06:14et s'adresse aux cas classiques de formulaires HTML. Voici un formulaire
00:06:19de réservation. Je peux demander à l'IA de me réserver une table en lui
00:06:23donnant les infos nécessaires, et elle va remplir le formulaire pour moi.
00:06:27C'est possible car elle a accès à un outil WebMCP nommé "book table".
00:06:32Le plus beau, c'est que je n'ai écrit aucune ligne de JavaScript pour cela.
00:06:36Avec l'API déclarative, il suffit d'ajouter des attributs de nom
00:06:40et de description d'outil directement sur votre formulaire HTML.
00:06:44Le navigateur convertit alors automatiquement le formulaire en outil WebMCP,
00:06:49en déduisant les arguments des champs de saisie. On voit ici
00:06:53un "tool name" (book table) et une description pour que l'IA sache
00:06:57quand l'appeler. C'est un formulaire HTML standard. La seule différence,
00:07:02ce sont les attributs "tool param description" sur certains champs
00:07:06pour donner plus de contexte à l'IA. Pour le reste, le navigateur
00:07:10analyse le type et le nom de l'input pour créer l'outil MCP.
00:07:14On le voit dans l'inspecteur : les arguments (nom, téléphone, date, etc.)
00:07:18ont été correctement identifiés. Tout cela fonctionne grâce à la logique
00:07:23du formulaire, sans aucun JavaScript. C'est l'essentiel de la proposition
00:07:27WebMCP actuelle. Comme je l'ai dit, je suis très enthousiaste.
00:07:31J'aime la façon dont elle comble le fossé entre applications web et agents IA,
00:07:34en éliminant les incertitudes quand un agent explore un site, tout en
00:07:38laissant le contrôle aux développeurs. De plus, je ne suis pas encore
00:07:43totalement pro-IA pour tout ; j'apprécie qu'un outil aide l'agent
00:07:47à travailler avec moi plutôt qu'à me remplacer. Je n'aime pas l'idée
00:07:51de réserver mes vols ou restos via l'interface de ChatGPT. Je préfère
00:07:56aller sur le site moi-même et, si besoin, demander à l'IA de m'assister
00:08:00sur la page. C'est un meilleur système pour garder l'humain dans la boucle
00:08:05et laisser les développeurs définir l'expérience. Mais n'oubliez pas que
00:08:08ce n'est qu'une proposition. Cela prendra du temps avant d'arriver
00:08:12dans nos navigateurs. Il reste aussi des défis, notamment la sécurité.
00:08:16Certains sites pourraient proposer des outils ou descriptions malveillants.
00:08:21Quel accès aura l'IA aux données utilisateur et quel sera son contrôle
00:08:25réel sur le navigateur ? J'espère qu'ils trouveront des réponses,
00:08:29car le projet est prometteur. Dites-moi ce que vous en pensez
00:08:33en commentaire, abonnez-vous, et on se retrouve à la prochaine !

Key Takeaway

WebMCP révolutionne la navigation assistée par IA en permettant aux développeurs d'exposer directement les fonctionnalités et les données de leurs sites via une API de navigateur native, rendant les interactions plus précises, rapides et économiques.

Highlights

Introduction de WebMCP

Timeline

Introduction à WebMCP et concept fondamental

Le narrateur présente WebMCP comme une proposition majeure de Google et Microsoft pour l'avenir du web. Contrairement aux serveurs MCP traditionnels, WebMCP est une API de navigateur qui permet aux développeurs front-end d'exposer des outils directement aux agents IA. L'idée est de transformer chaque site en un mini-serveur capable d'interagir avec des agents sans passer par des API back-end complexes. Cette approche permet aux agents d'utiliser le site de la même manière qu'un humain, mais avec une efficacité technique accrue. La distinction entre l'accès aux données et l'interaction directe via le front-end est cruciale pour comprendre cette innovation.

Démonstration pratique dans Chrome Canary

La démonstration s'appuie sur une version de test de Chrome (Canary) pour montrer comment une IA peut réserver un vol. Actuellement, les IA utilisent des méthodes gourmandes comme Playwright ou des captures d'écran pour simuler des actions humaines, ce qui est source d'erreurs. WebMCP élimine ces frictions en permettant à l'IA d'appeler des fonctions JavaScript définies par le développeur. Dans cet exemple, l'IA remplit les critères de recherche Londres-New York de manière instantanée et précise. Ce passage souligne que l'intérêt de WebMCP réside dans la méthode sous-jacente plutôt que dans le visuel.

L'API impérative et l'intégration avec React

L'auteur détaille ici le fonctionnement technique de l'API impérative via l'objet window.navigator.model_context. Le développeur enregistre des outils avec la fonction registerTool, en précisant un nom, une description et un schéma d'entrée JSON. Lors de l'exécution, l'IA appelle une fonction JavaScript qui peut mettre à jour l'état d'une application React via des événements personnalisés. Cette approche permet de garder un contrôle total sur les règles d'interaction de l'IA, garantissant qu'elle suit la logique métier du site. C'est une solution élégante qui évite de maintenir deux versions séparées du site, l'une pour les humains et l'autre pour les machines.

Extraction d'informations et manipulation de données

Cette section explore l'utilisation de WebMCP pour l'extraction de données structurées à partir d'une page web complexe. Au lieu de demander à l'IA d'analyser le code HTML pour trouver le meilleur vol, le développeur expose un outil qui renvoie directement l'état JSON des résultats. L'IA peut ainsi analyser des données propres et fournir des recommandations précises, comme suggérer un numéro de vol spécifique présent à l'écran. Cette méthode est beaucoup moins coûteuse en tokens et réduit considérablement les risques d'hallucinations ou d'erreurs de lecture. Elle montre comment l'IA devient un assistant analytique puissant travaillant sur les données réelles du site.

L'API déclarative et perspectives d'avenir

Le narrateur présente enfin une méthode simplifiée appelée API déclarative, ne nécessitant aucune ligne de JavaScript. En ajoutant simplement des attributs spécifiques aux formulaires HTML standards, le navigateur les convertit automatiquement en outils utilisables par l'IA. Cette accessibilité est un atout majeur pour la démocratisation de la technologie auprès de tous les développeurs web. Malgré son enthousiasme, l'auteur rappelle que ce n'est qu'une proposition qui doit encore répondre à des questions de sécurité et de confidentialité. Il conclut sur l'importance de garder l'humain dans la boucle en privilégiant l'assistance sur site plutôt que la délégation totale à des plateformes tierces.

Community Posts

View all posts