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 !