Agent Browser — l'outil Vercel qui fait naviguer Claude (15× moins de tokens que les screenshots)

Claude peut maintenant ouvrir un navigateur, cliquer sur les boutons, remplir des formulaires, scroller, extraire les données — tout seul. Et au lieu de cramer ta fenêtre de contexte avec des screenshots haute résolution comme les autres outils, Agent Browser lit la page comme un plan structuré. Résultat : environ 15× moins de tokens par interaction.

Le problème que tu connais avec les outils de navigation IA

Quand tu connectes Claude (ou n'importe quelle IA) à un navigateur, le problème classique c'est la vision par screenshots. À chaque action, l'outil envoie une capture d'écran complete à l'IA pour qu'elle voie la page.

Un screenshot haute résolution = facilement 15 000 tokens. À chaque clic. À chaque scroll. Au bout de 10 interactions, ta fenêtre de contexte est explosée, et ta facture API aussi.

Claude for Chrome, Browserbase, les autres solutions « vision-based » ont toutes ce défaut. Ça marche techniquement, mais c'est inutilisable pour des tâches longues (5-10 étapes max avant que le contexte tombe en saturation).

Agent Browser résout ça en arrêtant de raisonner en pixels et en se mettant à raisonner en structure de page.

C'est quoi exactement Agent Browser

Open source sur GitHub : github.com/vercel-labs/agent-browser. Créé par Vercel Labs, distribué également sur leur directory officiel skills.sh.

C'est un CLI qui pilote un vrai navigateur Chromium via CDP (le protocole de Chrome). Tu lui donnes une commande haut niveau, il l'exécute, il te retourne l'état de la page.

La différence clé avec les autres outils : il retourne pas une image. Il retourne une arbre d'accessibilité compact, où chaque élément interactif a un identifiant court (@e1, @e2, @e3...).

Concrètement :

Pour cliquer sur un bouton « Se connecter », au lieu d'envoyer un screenshot, l'outil te dit :

@e1: button "Se connecter"
@e2: input "Email"
@e3: input "Mot de passe"
@e4: link "Mot de passe oublié"

Claude voit la structure de la page (qu'il y a un bouton de connexion, qu'il s'appelle « Se connecter », qu'il est cliquable). Pour le cliquer, il dit juste click @e1. Pas de XPath, pas de sélecteur CSS, pas de coordonnées. Juste une référence courte.

Les chiffres qui changent tout :

Sur une session de 20 interactions, tu passes de ~200 000 tokens consommés à ~6 000. Ta facture chute, ton contexte reste libre pour le raisonnement réel.

Setup en 3 minutes

Prérequis

• Node.js 20+ installé (node --version pour vérifier)
• Un harness compatible : Claude Code, Cursor, Codex, GitHub Copilot, Gemini CLI, Goose, OpenCode ou Windsurf

Option 1 — Install comme skill (recommandé)

Dans ton terminal :

npx skills add vercel-labs/agent-browser

Le skill s'install dans ton agent (Claude Code par défaut), reste à jour automatiquement, et fonctionne sur les 8 harnesses supportés sans config.

Option 2 — Install globale CLI (pour usage avancé)

npm i -g agent-browser
agent-browser install

La deuxième commande provisionne le binaire Chromium nécessaire. Ça peut prendre 30-60 secondes selon ta connexion.

Premier test

Dans Claude Code, tape :

Utilise agent-browser pour ouvrir google.com et me dire ce qui est sur la page.

Claude appelle agent-browser open google.com, puis agent-browser snapshot -i pour récupérer l'accessibility tree, et te décrit la page. Si ça marche, t'es opérationnel.

5 cas d'usage qui changent vraiment ton quotidien

1. Remplir un formulaire long automatiquement

Tu donnes à Claude un PDF de contrat, ou des données client structurées. Tu lui dis : « Va sur cette URL d'inscription, remplis le formulaire avec ces infos, et soumets. » Il ouvre la page, snapshot les champs, remplit chacun avec les bonnes valeurs, clique sur Submit. Tu vois rien sauf le résultat final.

2. Scraper des données depuis une plateforme sans API

Les outils qui n'ont pas d'API publique (vieux SaaS, intranets, dashboards propriétaires) deviennent accessibles à Claude. Tu lui demandes : « Va dans mon dashboard [outil X], extrait les 50 dernières ventes, formate en CSV. » Claude navigue, paginate, extrait, te livre le CSV.

3. Tester ton propre site avant un lancement

« Va sur staging.monsite.com, fais le parcours d'achat complet avec ce produit, valide que tout marche bout en bout. Reporte chaque étape où ça coince. » Claude reproduit le user journey, te flag chaque friction. Test E2E sans écrire une seule ligne de Playwright.

4. Veille concurrentielle en direct

« Toutes les semaines, visite [concurrent.com/pricing], capture les prix actuels, compare avec la semaine dernière, alerte-moi si ça bouge. » Combine avec un hook SessionEnd ou un cron job, t'as une vraie veille tarifaire automatique.

5. Automatiser une tâche admin récurrente

Valider 30 demandes de congés dans ton outil RH. Répondre à 20 messages Linkedin avec une réponse personnalisée. Updater 50 lignes dans un CRM sans API. Tout ce qui te bouffe une heure par semaine en clics répétitifs devient une commande Claude.

Mes 3 conseils

1. Active le flag --annotate quand tu veux comprendre ce que Claude voit. Sur les pages complexes, parfois l'accessibility tree est ambigu (deux boutons « Valider » par exemple). Le flag génère un screenshot avec les numéros [N] superposés sur chaque élément. Tu vois exactement ce que @e1, @e2, etc. désignent. Combine visuel et textuel pour les cas chauds.
2. Garde des sessions persistantes pour les workflows longs. Agent Browser supporte des sessions qui restent ouvertes entre tes commandes. Au lieu de relancer un navigateur à chaque étape (lent, perd les cookies), tu reste dans la même session. Le navigateur garde ton login, tes onglets, tes cookies. Parfait pour les automations qui touchent plusieurs pages.
3. Combine avec le mode « real Chrome » pour les sites qui détectent les bots. Par défaut, Agent Browser utilise un Chromium headless qui est facilement détecté comme bot par Cloudflare et autres protections. Pour les sites protégés (Linkedin, Facebook Ads Manager, etc.), passe en mode « real Chrome avec profil utilisateur ». Tu utilises ton vrai navigateur, ton vrai profil, tes vrais cookies. Plus naturel, moins détecté.

Les limites à garder en tête

1. Ça ne remplace pas la vision pour toutes les tâches. L'accessibility tree est parfait pour les pages « classiques » (formulaires, listes, dashboards). Sur des pages très graphiques (cartes interactives, jeux web, design tool) où l'info est dans les pixels, t'auras quand même besoin d'un screenshot. Agent Browser peut toujours en faire un avec la commande screenshot, mais tu perds le gain de tokens sur ces moments-là.
2. Les sites avec beaucoup de JS dynamique demandent du tuning. Si une page charge ses éléments en plusieurs vagues (SPA React lourd), tu peux te retrouver à snapshot trop tôt et rater des éléments. Utilise les commandes de wait (wait-for-selector, wait-for-load) pour synchroniser.
3. C'est un outil offensif quand il s'agit de scraper. Beaucoup de sites interdisent le scraping dans leurs CGU. Avant d'automatiser massivement sur une plateforme tier, lis leurs conditions. Sur tes propres outils c'est OK, sur les outils tiers c'est ta responsabilité légale.
4. Pas adapté aux interactions visuelles fines. Drag and drop précis, dessins, gestes multi-touch — ce n'est pas le sweet spot d'Agent Browser. Pour ce type d'usage, Playwright ou Puppeteer direct sont plus appropriés.

Le mot de la fin

La différence entre une IA qui peut « voir un écran » et une IA qui peut utiliser le web comme un humain, c'est rarement la sophistication du modèle. C'est le format avec lequel la page est représentée à l'IA. Tant que c'est des pixels, t'es coincé à 10 interactions max. Quand c'est une structure, t'as virtuellement plus de limite.

Installe Agent Browser ce soir avec npx skills add vercel-labs/agent-browser. Lance ta première automation cette semaine sur la tâche admin récurrente qui te bouffe le plus de temps. Tu vas voir.