👀Donnez des yeux à votre IA · qu'elle ne construise pas à l'aveugle (agent-browser)

Le problème · votre IA construit à L'AVEUGLE

Ça arrive à tous ceux qui construisent avec l'IA, et presque personne ne le remarque : l'IA génère un écran, un formulaire, un parcours… et vous dit « c'est bon, ça marche ». Mais l'a-t-elle ouvert pour le voir ? Non. L'IA écrit le code et suppose que c'est correct — elle n'a pas d'yeux pour le vérifier. C'est comme un cuisinier qui sert le plat sans le goûter. Parfois ça passe ; d'autres fois, le bouton ne fait rien, le login est cassé, ou l'image ne charge pas — et c'est vous qui le découvrez, en production, face à un client.

C'est quoi, agent-browser ? · les yeux de votre IA

agent-browser est un outil open-source de Vercel qui donne à votre agent IA la capacité de piloter un vrai navigateur : ouvrir votre app, voir ce qu'il y a à l'écran, cliquer, écrire dans des champs, remplir des formulaires, prendre des captures et lire les erreurs de la console. En clair : ça lui donne des yeux et des mains dans le navigateur. Elle arrête de deviner ; désormais, elle vérifie.

Le bénéfice n°1 · qu'elle valide en permanence (pas à l'aveugle)

C'est l'usage qui change votre façon de travailler : vous demandez à votre IA qu'à chaque fois qu'elle construit quelque chose, elle l'ouvre et le valide elle-même avant de vous dire que c'est prêt. Elle a construit un login → qu'elle s'inscrive avec un compte de test et confirme qu'elle entre. Elle a fait un formulaire → qu'elle le remplisse et vérifie qu'il s'envoie. Elle a changé un écran → qu'elle l'ouvre et vérifie que ça s'affiche bien et qu'il n'y a pas d'erreurs en console. Vous passez de « je crois que ça marche » à « je l'ai testé et ça marche ».

Le bénéfice n°2 · ça ouvre un monde de possibilités

Donner des yeux à votre IA ne sert pas qu'à valider ce qui est à vous. Avec un navigateur à sa disposition, elle peut faire bien plus :

Ce qui le rend spécial (sans jargon technique)

Contrairement aux outils d'automatisation traditionnels (comme Playwright), agent-browser est conçu pour les agents IA : au lieu de lire toute la page (ce qui consomme énormément de tokens), il donne à l'IA une « carte » compacte des éléments avec lesquels elle peut interagir. Ça veut dire moins cher et plus rapide pour votre agent. C'est open-source, signé Vercel, sous licence permissive.

Comment l'installer (il vous faut un agent de code)

Ça s'installe sur votre ordinateur avec une commande, et la première fois ça télécharge son navigateur. Ensuite, votre agent IA l'utilise. (Il y a plusieurs façons de faire — npm est la plus courante.)

npm install -g agent-browser
agent-browser install

Prompt 1 · Qu'elle valide TOUT ce qu'elle construit (la règle d'or)

C'est le prompt qui change votre façon de travailler. Collez-le à votre agent pour qu'il arrête de construire à l'aveugle :

Tu as agent-browser installé. À partir de maintenant, NE me dis PAS que quelque chose « marche déjà » sans l'avoir vérifié toi-même dans le navigateur avec agent-browser.

Chaque fois que tu construis ou modifies quelque chose dans l'interface :
1. Ouvre mon app (elle tourne sur [ton URL, ex. http://localhost:3000]) avec agent-browser.
2. Navigue jusqu'à ce que tu viens de construire ou de modifier.
3. Teste-le comme un vrai utilisateur : clique, remplis les champs, complète le parcours clé [décris ton parcours, ex. « s'inscrire → entrer dans le dashboard »].
4. Vérifie que ça s'affiche bien et qu'il n'y a PAS d'erreurs dans la console du navigateur.
5. Si quelque chose est cassé ou s'affiche mal, corrige-le et revalide, jusqu'à ce que ça marche vraiment.
6. Alors seulement, dis-moi « c'est prêt », et raconte-moi ce que tu as validé et ce que tu as vu.

Règle d'or : aucune tâche d'interface n'est considérée comme terminée sans l'avoir validée dans le navigateur. Ne construis pas à l'aveugle.

Prompt 2 · Automatiser / extraire de l'info du web

Pour tirer parti de l'autre superpouvoir — naviguer et automatiser —, ce prompt demande à votre IA d'utiliser agent-browser pour une tâche web concrète :

Utilise agent-browser pour cette tâche sur le web, pas à pas :

Je veux que tu [décris ta tâche, ex : « ouvres cette page [URL], extraies la liste des produits avec leurs prix, et me les rapportes dans un tableau organisé » / « entres dans mon panneau de [service] et me dises l'état de X » / « remplisses ce formulaire avec ces données »].

1. Ouvre la page et prends un snapshot pour voir avec quels éléments tu peux interagir.
2. Fais la tâche pas à pas, en vérifiant à chaque étape que le bon élément est bien là.
3. Si je dois me connecter, dis-moi comment enregistrer mes credentials de façon sécurisée (agent-browser a un coffre-fort chiffré ; ne mets jamais mes mots de passe en texte clair).
4. Rends-moi le résultat organisé et dis-moi si quelque chose n'a pas pu être fait.