Navigateur CLI : Un outil d'automatisation de navigation économe en tokens pour les agents d'IA de codage

Ce que fait Browser CLI

Browser CLI est un outil d'automatisation de navigateur conçu pour réduire la surcharge de tokens dans les agents d'IA de codage. Le créateur a remarqué que la vérification du navigateur consommait environ 30 000 tokens par session à cause de la surcharge du protocole Playwright MCP, chaque appel browser_navigate + browser_snapshot coûtant environ 1 500 tokens dans l'encadrement du schéma JSON.

La solution est un démon Chromium sans tête persistant avec lequel vous interagissez via des commandes Bash. Il utilise la même technologie de capture ARIA de Playwright en arrière-plan, mais atteint environ 50-100 tokens par appel au lieu d'environ 1 500.

Commandes et utilisation

Les commandes disponibles incluent :

• browser-cli goto https://example.com - Naviguer vers l'URL
• browser-cli snapshot -i - Arbre ARIA avec références @e
• browser-cli click @e3 - Cliquer par référence
• browser-cli fill @e5 "hello" - Remplir un champ de saisie
• browser-cli css @e3 font-size - Obtenir la valeur CSS calculée
• browser-cli inspect @e3 - Modèle de boîte complet + styles
• browser-cli screenshot /tmp/page.png - Capture d'écran
• browser-cli snapshot -D - Différence : ce qui a changé depuis la dernière capture
• browser-cli responsive /tmp - Captures d'écran pour mobile/tablette/bureau

Le serveur démarre automatiquement au premier appel (~3s), puis les appels suivants prennent ~100-200ms. Il reste actif pendant 30 minutes, préservant les cookies, les onglets et l'état entre les commandes.

Économies de tokens

Comparaison des tokens :

• Playwright MCP : ~1 500 tokens par appel, ~30 000 tokens pour 20 appels
• Browser CLI : ~75 tokens par appel, ~1 500 tokens pour 20 appels

Cela représente 95 % d'économies sur la vérification du navigateur. Pour les pipelines automatisés qui effectuent plusieurs tâches par session, cela s'accumule rapidement.

Fonctionnalités au-delà de Playwright MCP

• Inspection CSS - css @e3 padding renvoie les valeurs calculées. inspect @e3 donne le modèle de boîte complet + 16 styles clés en JSON.
• Mutation de style en direct - style @e3 color red avec style --undo. Déboguez le CSS sans toucher au code source.
• Différenciation des captures - snapshot -D compare les arbres ARIA avant/après.
• Préréglages réactifs - responsive /tmp prend des captures d'écran mobile + tablette + bureau en une seule commande.
• Profils d'authentification - handoff ouvre un Chrome visible pour la connexion manuelle SSO/MFA, resume revient au mode sans tête, auth-save admin chiffre la session (AES-256). La prochaine fois : goto-auth https://app.com/dashboard --profile admin — aucune connexion nécessaire.
• Traitement par lots de commandes - chain [["goto","url"],["snapshot","-i"],["console"]] exécute plusieurs commandes en un seul appel.

Implémentation technique

Architecture : Agent IA → Bash → Client CLI (bin/browse.mjs) → HTTP POST (localhost) → Serveur (src/server.mjs) → API Playwright → Chromium (sans tête).

Pure Node.js. Playwright est la seule dépendance. Pas de Bun, pas de Rust, pas de surcharge MCP.

Intégration avec Claude Code

Installez globalement :

npm install -g @tuandm/browser-cli

Ajoutez à .claude/settings.json :

{
  "permissions": {
    "allow": ["Bash(browser-cli*)"]
  }
}

Ajoutez une règle dans .claude/rules/browser-cli.md indiquant à Claude d'utiliser Browser CLI au lieu de Playwright MCP. Le créateur a exécuté 5 scénarios d'évaluation et Claude a choisi la bonne commande à chaque fois avec la règle chargée.

Il est également livré en tant que plugin Claude Code (plugin.json inclus) pour une distribution future sur le marketplace.

Inspiration et technologie

Inspiré par gstack de Garry Tan, qui a été le pionnier de l'approche CLI persistante de Chromium pour les agents d'IA. L'idée centrale était que les commandes Bash sont considérablement plus efficaces en tokens que MCP pour l'automatisation du navigateur. La technologie sous-jacente est Playwright de Microsoft.