CLI del Navegador: Una Herramienta de Automatización de Navegadores Eficiente en Tokens para Agentes de IA de Programación

Qué hace Browser CLI

Browser CLI es una herramienta de automatización de navegadores creada para abordar la sobrecarga de tokens en agentes de codificación con IA. El creador notó que la verificación del navegador consumía ~30,000 tokens por sesión debido a la sobrecarga del protocolo Playwright MCP, donde cada llamada de browser_navigate + browser_snapshot costaba ~1,500 tokens en el marco del esquema JSON.

La solución es un demonio persistente de Chromium sin interfaz con el que interactúas mediante comandos Bash. Utiliza la misma tecnología de instantánea ARIA de Playwright internamente, pero logra ~50-100 tokens por llamada en lugar de ~1,500.

Comandos y Uso

Los comandos disponibles incluyen:

• browser-cli goto https://example.com - Navegar a la URL
• browser-cli snapshot -i - Árbol ARIA con referencias @e
• browser-cli click @e3 - Hacer clic por referencia
• browser-cli fill @e5 "hello" - Rellenar campo de entrada
• browser-cli css @e3 font-size - Obtener valor CSS calculado
• browser-cli inspect @e3 - Modelo de caja completo + estilos
• browser-cli screenshot /tmp/page.png - Captura de pantalla
• browser-cli snapshot -D - Diferencia: qué cambió desde la última instantánea
• browser-cli responsive /tmp - Capturas de pantalla en móvil/tableta/escritorio

El servidor se inicia automáticamente en la primera llamada (~3s), luego las llamadas posteriores son de ~100-200ms. Permanece activo durante 30 minutos, conservando cookies, pestañas y estado entre comandos.

Ahorro de Tokens

Comparación de tokens:

• Playwright MCP: ~1,500 tokens por llamada, ~30,000 tokens por 20 llamadas
• Browser CLI: ~75 tokens por llamada, ~1,500 tokens por 20 llamadas

Eso es un ahorro del 95% en verificación del navegador. Para flujos automatizados que realizan múltiples tareas por sesión, esto se acumula rápidamente.

Características más allá de Playwright MCP

• Inspección CSS - css @e3 padding devuelve valores calculados. inspect @e3 proporciona el modelo de caja completo + 16 estilos clave como JSON.
• Mutación de estilos en vivo - style @e3 color red con style --undo. Depura CSS sin tocar el código fuente.
• Detección de diferencias en instantáneas - snapshot -D compara árboles ARIA antes/después.
• Preajustes responsivos - responsive /tmp toma capturas de pantalla móvil + tableta + escritorio en un solo comando.
• Perfiles de autenticación - handoff abre un Chrome visible para inicio de sesión manual SSO/MFA, resume vuelve al modo sin interfaz, auth-save admin cifra la sesión (AES-256). La próxima vez: goto-auth https://app.com/dashboard --profile admin — sin necesidad de iniciar sesión.
• Procesamiento por lotes de comandos - chain [["goto","url"],["snapshot","-i"],["console"]] ejecuta múltiples comandos en una sola llamada.

Implementación Técnica

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

Puro Node.js. Playwright es la única dependencia. Sin Bun, sin Rust, sin sobrecarga MCP.

Integración con Claude Code

Instalar globalmente:

npm install -g @tuandm/browser-cli

Agregar a .claude/settings.json:

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

Agregar una regla en .claude/rules/browser-cli.md indicando a Claude que use Browser CLI en lugar de Playwright MCP. El creador ejecutó 5 escenarios de evaluación y Claude eligió el comando correcto cada vez con la regla cargada.

También se distribuye como un complemento de Claude Code (plugin.json incluido) para distribución futura en el mercado.

Inspiración y Tecnología

Inspirado por gstack de Garry Tan, que fue pionero en el enfoque de CLI persistente de Chromium para agentes de IA. La idea central fue que los comandos Bash son dramáticamente más eficientes en tokens que MCP para automatización de navegadores. La tecnología subyacente es Playwright de Microsoft.