Agent Browser de Vercel

Cualquiera que haya intentado que Claude Code interactúe con páginas web sabe el problema: pasarle la página entera al modelo es caro. Una screenshot de una página moderna ronda los 3.000 tokens, y si Claude tiene que clickear varias veces, terminás gastando 30k tokens en una sola tarea. Multiplicalo por agentes corriendo todo el día y la factura se va al techo.

Agent Browser de Vercel Labs es la respuesta: un navegador propio diseñado para agentes, que reduce hasta 10× el costo en tokens al reemplazar capturas por menús numerados de elementos accionables. Apache 2.0, gratis, open source. Esta nota explica los 6 use cases reales y te da 5 prompts copy-paste para arrancar.

El problema con los browsers convencionales para agentes

Cuando Claude usa Playwright/Puppeteer/Chromium "tradicional", el flujo es:

1. Abre página.
2. Toma screenshot → pasa imagen a Claude (~3.000 tokens).
3. Claude "ve" la imagen, decide qué clickear.
4. Click.
5. Espera.
6. Screenshot otra vez (~3.000 tokens).
7. Repetir.

Cinco interacciones = ~15.000 tokens solo en screenshots. Y eso sin contar el razonamiento.

La solución de Agent Browser

Agent Browser renderiza la página, identifica todos los elementos interactuables (botones, links, inputs, dropdowns), y genera un menú numerado en texto plano. En lugar de mandarle la imagen, le manda:

Página: https://example.com/dashboard

Elementos:
1. Botón: "Add new product"
2. Link: "Settings"
3. Link: "Logout"  
4. Input: Search (placeholder "Search products...")
5. Dropdown: "Sort by" (current: "Date")
6. Botón: "Filter"
7. Tab: "Products" (active)
8. Tab: "Orders"
9. Tab: "Customers"

Eso son ~300 tokens en lugar de 3.000. 10× de ahorro inmediato.

Para clickear el botón "Add new product", Claude solo dice "click 1". Agent Browser ejecuta. La siguiente página se renderiza igual: menú numerado, no screenshot.

Cómo funciona técnicamente

Por debajo, Agent Browser:

1. Renderiza la página con Chromium headless.
2. Pasa el DOM por un parser que extrae solo elementos accionables.
3. Cada elemento recibe un número y se documenta (tipo, texto visible, atributos relevantes).
4. El menú resultante se serializa a texto.
5. Cuando el agente dice "click N", Agent Browser busca el elemento N y ejecuta .click() o .fill() según el tipo.

El motor de extracción ignora ornamentos: imágenes decorativas, divs vacíos, elementos con aria-hidden. Solo cuenta lo que un humano usaría.

Instalación

npm install -g @vercel/agent-browser

En tu CLAUDE.md (global o por proyecto):

## Browser
Cuando necesites interactuar con páginas web, usá `@vercel/agent-browser`
en lugar de Playwright. La sintaxis es:

await agent.open(url)
await agent.list()  # devuelve el menú numerado
await agent.click(n)
await agent.fill(n, "texto")
await agent.snapshot()  # solo si realmente necesitás screenshot

6 use cases

1. Verificación post-deploy

El agente abre tu URL después del deploy y verifica:

• Que la home cargue (200 OK).
• Que el form de login tenga los 2 campos esperados.
• Que el botón "Sign up" funcione.
• Que no haya errores en console.

Antes: 6-8 screenshots, ~25k tokens. Con Agent Browser: ~2.5k tokens.

2. Scraping liviano

Productos de un competidor, precios, disponibilidades. Sin login, sin captcha — solo data pública.

3. Forms QA

Una landing nueva tiene un form de contacto. Agent Browser lo abre, lo llena con data de test, lo submitea, verifica que la página de éxito aparezca. Si el form se rompe, vos enterás antes que tu usuario.

4. Comparativas de competidores

Le pedís: "Andá a estas 5 URLs y traeme el precio del plan 'Pro' y las features que lo diferencian del plan 'Starter'." Agent Browser navega cada una, identifica los elementos, devuelve la comparativa estructurada.

5. Onboarding de clientes (parcial)

Si tu agente tiene que dar de alta a un cliente en una herramienta de terceros que no tiene API (más común de lo que parece), Agent Browser lo navega y completa los formularios. No es scalable a millones de usuarios pero salva del trabajo manual repetitivo.

6. Monitoring de status pages

Las status pages de servicios que usás (Stripe, AWS, Shopify, etc.) se monitorean abriéndolas y leyendo. Agent Browser lo hace cada N minutos y alerta si encuentra "incident" o "outage".

5 prompts copy-paste

Prompt 1: Verificación post-deploy

Acabás de hacer deploy a https://mi-app.vercel.app
Usá @vercel/agent-browser para:
1. Abrir la home.
2. Verificar que el menú principal tenga los items: Productos, Precios, Login.
3. Click en Login → verificar que carga el form con email y password.
4. Verificar que no haya errores en console.
Reportame el resultado en formato:
- ✅/❌ Home carga
- ✅/❌ Menú correcto
- ✅/❌ Login form OK
- ✅/❌ Sin errores en console

Prompt 2: Scrapeo de precios

Andá a https://competidor.com/pricing
Listame con agent-browser:
- Cada plan disponible
- Su precio (mensual y anual)
- Las features principales de cada uno
Devolveme tabla en markdown.

Prompt 3: Test de form

Tengo el form de contacto en https://mi-app.com/contacto
Llenalo con:
- Nombre: Test User
- Email: test@example.com
- Mensaje: "Mensaje de testing automático"
Submiteá y verificá que aparezca el mensaje de confirmación.
Si falla, mostrame qué elemento dio el error.

Prompt 4: Comparativa multi-sitio

Compará los planes de los 3 competidores:
- https://compA.com/pricing
- https://compB.com/pricing
- https://compC.com/pricing

Para cada uno: precio del plan medio, features del plan medio, qué incluye en limits.
Output: tabla comparativa lado a lado.

Prompt 5: Smoke test del flujo principal

Definí el flujo principal de mi app y testealo:
1. Home → ver hero
2. Click "Empezar gratis"
3. Llenar form de signup (test+timestamp@example.com / TestPassword123!)
4. Verificar landing post-signup
5. Click logout

Si cualquier paso falla, devolveme: paso N, qué elemento no encontró,
y la URL donde quedó parado.

Limitaciones

Tres cosas que Agent Browser NO hace bien:

1. Páginas que dependen 100% de Canvas/WebGL

Aplicaciones tipo Figma, Miro, tablero de juegos en canvas no tienen DOM accionable que el parser pueda usar. Para esas, screenshots tradicionales siguen siendo la única opción.

2. Captchas

No los resuelve. Si tu flow incluye captcha, tenés que combinarlo con servicios anti-captcha (2captcha, Anti-Captcha) o usar páginas que no los tengan en su flow normal.

3. Login con 2FA

Si el sitio requiere 2FA, Agent Browser no puede leer el código de tu teléfono. Solución: hacé login una vez manual, guardá la cookie de sesión, reutilizala. Esto es el modo "persisted session" que Agent Browser soporta nativamente.

Comparativa con alternativas

vs. Playwright puro: Playwright es más flexible pero requiere que vos diseñes la lógica de selección de elementos. Agent Browser es "Playwright + parser inteligente" — pierde flexibilidad pero gana tokens.

vs. browser-use (open source): browser-use es similar en filosofía, también open source, también con menú numerado. Vercel Agent Browser está más optimizado para entornos serverless (corre bien en Vercel Functions). browser-use es más flexible para self-host complejo.

vs. Cowork browser: Cowork está integrado en el agente y es propietario. Agent Browser es open source, podés inspeccionar y forkear. Si tu uso es 100% Vercel/Next.js, Agent Browser está hecho para eso. Si trabajás cross-platform, Cowork es más uniforme.

Por qué Apache 2.0 importa

Tres beneficios concretos:

1. Uso comercial sin restricción. Tu producto en producción puede usarlo libremente.
2. Modificaciones legales. Si el parser de extracción te falla en un sitio específico, lo forkeás y mejorás para tu caso.
3. Sin lock-in. Si Vercel discontinúa el proyecto, podés correrlo y mantenerlo vos solo.

Costos reales

Agent Browser en sí es gratis. Lo que cuesta son los recursos:

• Si corre local: 0. Solo CPU y RAM de tu máquina (cualquier portátil moderno aguanta).
• Si corre en Vercel Functions: consumo bajo. Una ejecución de 30 segundos cuesta fracciones de centavo.
• Tokens al modelo: la justificación del proyecto. 10× menos que screenshot-based.

Para uso medio (50-100 navegaciones diarias), gasto operativo es <$5/mes.

Conclusión

Si tenés agentes que tocan la web frecuentemente, Agent Browser es no-brainer: misma funcionalidad, 10× más barato en tokens, open source. Los 6 use cases cubren la mayoría de lo que realmente necesitás de un browser para agentes — verificar deploys, scrapear data simple, testear forms, monitoring.

Las 3 limitaciones (canvas, captchas, 2FA) marcan dónde tenés que combinarlo con otras herramientas. Para todo lo demás, este es el default para 2026.

Tags: agent-browser, vercel-labs, ahorro-tokens, claude-code, apache-2, anti-screenshot