CLI do Navegador: Uma Ferramenta de Automação de Navegador Eficiente em Tokens para Agentes de IA de Codificação

O que o Browser CLI faz

Browser CLI é uma ferramenta de automação de navegador criada para lidar com a sobrecarga de tokens em agentes de IA de codificação. O criador percebeu que a verificação do navegador estava consumindo ~30.000 tokens por sessão devido à sobrecarga do protocolo MCP do Playwright, com cada chamada de browser_navigate + browser_snapshot custando ~1.500 tokens na estrutura do esquema JSON.

A solução é um daemon persistente do Chromium headless com o qual você interage por meio de comandos Bash. Ele usa a mesma tecnologia de snapshot ARIA do Playwright por baixo, mas alcança ~50-100 tokens por chamada em vez de ~1.500.

Comandos e uso

Os comandos disponíveis incluem:

• browser-cli goto https://example.com - Navegar para URL
• browser-cli snapshot -i - Árvore ARIA com referências @e
• browser-cli click @e3 - Clicar por referência
• browser-cli fill @e5 "hello" - Preencher campo de entrada
• browser-cli css @e3 font-size - Obter valor CSS calculado
• browser-cli inspect @e3 - Modelo de caixa completo + estilos
• browser-cli screenshot /tmp/page.png - Captura de tela
• browser-cli snapshot -D - Diferença: o que mudou desde o último snapshot
• browser-cli responsive /tmp - Capturas de tela em mobile/tablet/desktop

O servidor inicia automaticamente na primeira chamada (~3s), então as chamadas subsequentes são ~100-200ms. Ele permanece ativo por 30 minutos, preservando cookies, abas e estado entre os comandos.

Economia de tokens

Comparação de tokens:

• Playwright MCP: ~1.500 tokens por chamada, ~30.000 tokens para 20 chamadas
• Browser CLI: ~75 tokens por chamada, ~1.500 tokens para 20 chamadas

Isso representa uma economia de 95% na verificação do navegador. Para pipelines automatizados que executam múltiplas tarefas por sessão, isso se acumula rapidamente.

Funcionalidades além do Playwright MCP

• Inspeção CSS - css @e3 padding retorna valores calculados. inspect @e3 fornece o modelo de caixa completo + 16 estilos principais como JSON.
• Mutação de estilo ao vivo - style @e3 color red com style --undo. Depure CSS sem tocar no código-fonte.
• Diferença de snapshots - snapshot -D compara árvores ARIA antes/depois.
• Predefinições responsivas - responsive /tmp tira capturas de tela mobile + tablet + desktop em um único comando.
• Perfis de autenticação - handoff abre um Chrome visível para login manual SSO/MFA, resume volta para o modo headless, auth-save admin criptografa a sessão (AES-256). Na próxima vez: goto-auth https://app.com/dashboard --profile admin — sem necessidade de login.
• Agrupamento de comandos - chain [["goto","url"],["snapshot","-i"],["console"]] executa múltiplos comandos em uma única chamada.

Implementação técnica

Arquitetura: Agente de IA → Bash → Cliente CLI (bin/browse.mjs) → HTTP POST (localhost) → Servidor (src/server.mjs) → API Playwright → Chromium (headless).

Puro Node.js. Playwright é a única dependência. Sem Bun, sem Rust, sem sobrecarga MCP.

Integração com Claude Code

Instale globalmente:

npm install -g @tuandm/browser-cli

Adicione ao .claude/settings.json:

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

Adicione uma regra em .claude/rules/browser-cli.md instruindo o Claude a usar o Browser CLI em vez do Playwright MCP. O criador executou 5 cenários de avaliação e o Claude escolheu o comando correto todas as vezes com a regra carregada.

Ele também é distribuído como um plugin do Claude Code (plugin.json incluído) para distribuição futura na loja.

Inspiração e tecnologia

Inspirado pelo gstack de Garry Tan, que pioneirou a abordagem de CLI persistente do Chromium para agentes de IA. A percepção central foi que comandos Bash são dramaticamente mais eficientes em tokens do que MCP para automação de navegador. A tecnologia subjacente é o Playwright da Microsoft.