Claude Code ya puede ver: qué es el Agent Browser de Vercel
La mayor limitación de Claude Code desapareció. Ahora puede navegar páginas, hacer clic, llenar formularios y trabajar con apps que ni siquiera tienen API — aquí te mostramos exactamente cómo.
El problema que resolvió esta herramienta
Hasta hace poco, Claude Code trabajaba a ciegas. Podía escribir código, leer archivos y ejecutar comandos — pero no podía ver lo que pasaba en el navegador. Si necesitaba información visual, tenías que pasársela tú: capturas de pantalla, texto copiado, descripciones manuales.
Vercel lanzó Agent Browser, una CLI de automatización de browsers diseñada específicamente para agentes de IA. El resultado: Claude Code ahora puede ver tu pantalla, navegar páginas, hacer clics y llenar formularios — sin que tengas que intervenir.
Antes: Claude Code necesitaba screenshots. Tú eras sus ojos: abrir la página, sacarle captura, pasársela, describirle lo que veías.
Ahora con Agent Browser: Claude navega solo. Ve la página, identifica elementos, hace clics y escribe en formularios — todo de forma autónoma.
📎 Fuente verificada: repositorio oficial github.com/vercel-labs/agent-browser — 34.4k estrellas en GitHub.
Cómo funciona por dentro
Agent Browser no es magia — es una arquitectura bastante elegante. Cuando Claude Code le da una instrucción, esto es lo que pasa:
- Claude emite un comando via la CLI, procesado por un binario escrito en Rust.
- Ese binario traduce el comando a instrucciones en formato JSON.
- Un daemon de Node.js recibe las instrucciones y controla un navegador Chromium usando Playwright.
- Los resultados vuelven en JSON para que Claude los procese y decida el próximo paso.
La diferencia clave con herramientas como Playwright puro es que Agent Browser usa un sistema de referencias de elementos en lugar de selectores CSS. Los selectores CSS se rompen si alguien cambia el nombre de una clase o reestructura el DOM. Las referencias son más estables — Claude identifica el elemento por lo que es, no por su nombre técnico en el código.
Con Agent Browser, una página típica ocupa unos pocos cientos de tokens en lugar de miles. Claude puede hacer más ciclos de prueba antes de llegar a sus límites de contexto.
Instalación paso a paso
Hay dos formas de instalarlo. La más limpia y recomendada es via npm, que mantiene la skill siempre actualizada:
Opción 1 — Instalación via npm (recomendada)
npm install -g agent-browser
Luego agrega la skill a Claude Code para darle contexto enriquecido:
npx skills add https://github.com/vercel-labs/agent-browser --skill agent-browser
Opción 2 — Copiar el archivo de skill manualmente
mkdir -p .claude/skills/agent-browser
curl -o .claude/skills/agent-browser/SKILL.md \
https://raw.githubusercontent.com/vercel-labs/agent-browser/main/skills/agent-browser/SKILL.md
Importante: No copies el SKILL.md desde node_modules — se queda desactualizado. El comando curl lo descarga directo del repo y siempre coincide con la versión instalada.
Para resultados más consistentes, agrega esto a tu archivo de instrucciones globales de Claude (~/.claude/CLAUDE.md):
## Browser Automation
Use `agent-browser` for web automation.
Run `agent-browser --help` for all commands.
Qué puedes hacer con esto — casos de uso reales
Aquí es donde se pone interesante. Muchas de las limitaciones que tenía Claude Code hasta hace unos días desaparecen. Algunos ejemplos concretos:
-
Testing automatizado — Claude construye un formulario y lo prueba él mismo: valida que los campos funcionen, que los mensajes de error aparezcan, que el envío llegue. Sin que abras el browser.
-
Investigación y scraping sin API — Páginas que no tienen API pública — directorios, portales, plataformas cerradas — ahora son accesibles. Claude navega, lee y extrae la información como lo haría una persona.
-
Llenar formularios complejos — Portales de proveedores, sistemas internos, paneles de administración. Claude puede completar flujos de múltiples pasos de forma autónoma.
-
Verificar diseño responsive y dark mode — Claude puede revisar cómo se ve tu app en distintos tamaños de pantalla y con distintos temas, sin que tengas que hacerlo manualmente.
-
Flujos completos de trabajo — Combinado con otros MCPs y skills: Claude busca información en la web, la procesa y actúa en consecuencia — todo en una sola instrucción tuya.
Compatibilidad — no es solo para Claude Code
Agent Browser funciona con Claude Code, pero también con Codex, Cursor, Gemini CLI, GitHub Copilot, Goose, OpenCode y Windsurf. Si usas cualquiera de estas herramientas, puedes aprovecharlo.
Cómo empezar ahora mismo
Si ya tienes Claude Code instalado, el camino más corto es:
- Instala Agent Browser con
npm install -g agent-browser - Agrega la skill al proyecto con el comando
npx skills addde arriba - Abre Claude Code y pídele que navegue una página o complete una tarea en el browser
Si todavía no tienes Claude Code, puedes buscar el repo oficial en GitHub (vercel-labs/agent-browser) y pedirle a Claude que te ayude a instalarlo paso a paso.
¿Qué sigue?
En próximos videos voy a estar probando casos de uso reales con esta herramienta. Sigue en Instagram para verlos primero.