comunidadbóvedaagent browser de vercel

Agent Browser de Vercel — los ojos de Claude para navegar internet sin quemarte la cuenta

Claude antes era ciego en internet. O le pegabas screenshots y se le quemaba la cuenta, o usabas Claude para Chrome y pasaba lo mismo. Vercel Labs sacó Agent Browser: un navegador que numera cada botón y cada link y le manda solo eso a Claude. Pasaste de gastar ~3,000 tokens por acción a gastar ~300. Acá te lo explico como si tuvieras 5 años, te dejo el prompt para que Claude lo instale solo y 5 prompts copy-paste para arrancar.

comunidad · mayo de 2026

10x menos tokens · 5 prompts listos · prompt de instalación incluido · navegación nativa para Claude Code · open source

Lo que cambia Agent Browser es la forma en que Claude lee una página. En vez de mandarle la captura entera (lenta y cara), arma una lista de cosas con las que se puede interactuar — botón 1, link 2, input 3 — y le manda solo eso. Es la misma idea de un menú: en vez de describirte el restaurant, te paso la carta con los números. Esta guía traduce el repo de Vercel al español, te muestra cómo lo instalás con un solo prompt y te deja 5 cosas concretas para probar el primer día — leer un link, auditar tu propia landing, bajar imágenes, llenar un form complejo y probar tu checkout end-to-end.

vercel labsskill para claude code10x menos tokensnavegación nativaopen source · apache 2.0español · eli5mayo 2026

qué pasó · mayo de 2026

Vercel le instaló a Claude su propio navegador

Si usaste Claude para Chrome o Playwright sabés cómo se siente: pedís una cosa simple, te quema mil tokens en una captura, y a la tercera acción la cuenta está fundida. Vercel Labs resolvió eso de una forma muy simple — en vez de mandar la foto entera de la página, le mandan a Claude un menú numerado de cosas con las que se puede interactuar.

Botón 1: “Iniciar sesión”. Link 2: “Ver más”. Input 3: “Tu email”. Eso ocupa nada de espacio. Y cuando vos le decís algo a Claude tipo “hacé login”, busca el botón que diga login en su lista, le dice al navegador “clickeame el 1” y listo — con una fracción del costo de cualquier otro navegador para agentes que existió hasta ahora.

Claude ahora puede ver páginas

Antes era ciego en internet. Le pegabas screenshots o le pedías que adivinara. Con Agent Browser entra a una página, la entiende y te dice qué hay — sin que vos saques captura ni copies HTML.

Hasta 10x menos tokens por acción

Claude para Chrome y Playwright mandan la captura entera (~3,000 tokens cada vez). Agent Browser numera los botones y manda solo eso (~300 tokens). Tu cuenta de Claude rinde mucho más.

Es gratis y de Vercel Labs

Lo sacó el equipo experimental de Vercel — los mismos que hacen los skills oficiales para Claude Code. Open source bajo Apache 2.0. Está en GitHub, lo instalás y lo usás sin pagar nada.

Lo que NO es Agent Browser

  • No es una extensión de Chrome. Es una herramienta separada que controla un navegador propio (Claude no se mete en tu Chrome ni con tus cookies personales).
  • No reemplaza a Claude para Chrome para todo — sirve para navegación con agentes desde código. Si querés que Claude navegue mientras vos miras la pantalla, eso es otro flujo.
  • No es magia. Si la página tiene captchas o login con 2FA, Claude se va a parar a preguntarte. Está bien — eso es lo que querés que haga.

el truco · explicado como si tuvieras 5 años

Por qué no quema tu cuenta como Claude para Chrome

Imaginate que entrás a una tienda con los ojos cerrados. Si yo te describiera todo lo que veo —la luz, las góndolas, los carteles, los colores, todo— tardaría una hora. Pero si te digo: “tenés tres puertas: 1 baño, 2 caja, 3 salida”, con eso te alcanza para moverte.

Eso hace Agent Browser. No le manda a Claude la foto de la página — le manda la lista de cosas con las que puede interactuar, cada una con su número. Cuando vos le decís “pagá”, Claude busca el botón que diga “pagar” en su lista, le dice al navegador “haceme click en el 7” y listo. La página cambia, Agent Browser le manda la nueva lista numerada, y Claude sigue.

screenshot por acción

Antes (Claude para Chrome / Playwright)

~3,000 tokens / acción

  • Manda la imagen entera de la página cada vez que hace algo.
  • La cuenta se quema en 10 o 15 minutos de uso real.
  • Lento — Claude tiene que procesar pixeles antes de pensar.
  • Si la página tiene mucho contenido, ni siquiera entra completa.

refs numeradas

Ahora (Agent Browser)

~300 tokens / acción

  • Manda solo la lista de botones, links e inputs (cada uno con un número).
  • La cuenta dura horas haciendo el mismo trabajo.
  • Rápido — solo procesa texto estructurado, no imágenes.
  • Cualquier página entra completa, sin importar el largo.

Es lo mismo que hacés vos cuando navegás

No leés la imagen entera de Amazon píxel por píxel — leés los nombres de los productos y clickeás el que querés. Agent Browser le da a Claude exactamente esa misma habilidad. Por eso es tan barato y tan rápido: porque imita cómo nuestro cerebro entiende una página, no cómo una cámara la fotografía.

instalación · 2 minutos

Pegale el prompt y queda listo

El video lo dice claro: o lo instalás con un comando, o le pegás el link a Claude y le pedís que lo instale por vos. Las dos formas funcionan. La segunda es la que recomendamos si nunca lo hiciste —Claude lee el README, identifica el método correcto y baja todo lo que necesita sin que vos toques nada.

Los 3 pasos en detalle:

paso 01

Abrí Claude Code en el folder de tu proyecto

Cualquier folder sirve, pero conviene uno donde ya estés trabajando. La instalación queda en ese proyecto.

paso 02

Pegá el prompt de instalación de abajo

Le pasás el link del repo de Vercel y le pedís que lo instale. Claude lee el README, identifica el comando correcto y baja todo lo que necesita (incluido un Chrome de testing si hace falta).

paso 03

Probalo visitando un link de prueba

Pedíle que abra https://example.com y te devuelva el título. Si te lo devuelve, está funcionando. Listo para usar.

Opción A · pegale este prompt a Claude Code (recomendado)

Instalar Agent Browser desde cero

Pegá esto en Claude Code. Lee el README del repo, identifica el método de instalación correcto y deja Agent Browser listo. Si algo falla, te pega el error en vez de inventar un fix.

Quiero que instales Agent Browser de Vercel Labs en este proyecto, para que después puedas usarlo para navegar páginas web por mí.

Repositorio: https://github.com/vercel-labs/agent-browser

Pasos:
1. Leé el README del repositorio para identificar el método de instalación recomendado para Claude Code. El comando probable es:
   npx skills add https://github.com/vercel-labs/agent-browser
   Pero confirmalo contra el README antes de correrlo.

2. Instalá la herramienta y todo lo que necesite (probablemente baja un Chrome de testing — está bien, dejalo).

3. Verificá que quedó registrada como skill o como MCP server, según el método que use.

4. Probala así: abrí https://example.com, sacame el título de la página y devolvémelo en chat. Si me devolvés "Example Domain" sé que está funcionando.

Si algo falla durante la instalación, no inventes un fix. Pegame el error exacto y lo discutimos. Quiero que esto quede bien instalado, no medio funcionando.

Si Claude pide permiso para instalar dependencias o bajar Chrome de testing, dáselos. Solo escribe en el folder del proyecto y en su carpeta de skills — no toca nada más de tu sistema.

Opción B · el comando manual (si ya sabés lo que hacés)

Instalar Agent Browser desde la línea de comandos

npx skills add https://github.com/vercel-labs/agent-browser

Mismo método que usan los otros skills oficiales de Vercel Labs. Si el repo cambia el comando recomendado, fijate en el README oficial: https://github.com/vercel-labs/agent-browser.

Cómo confirmás que está instalado

Pedíle a Claude que abra https://example.com y te devuelva el título de la página. Si te contesta “Example Domain”, ya está listo. Si te dice que no puede o que no encuentra la herramienta, volvé al prompt de instalación y pegáselo de nuevo.

para qué sirve · ejemplos del día a día

Lo que ahora le podés pedir a Claude

Estos son los pedidos del video — los que más se repiten en cuanto la gente lo instala. Son cosas que antes se hacían a mano (abrir 5 pestañas, copiar, pegar, comparar) y que ahora Claude hace solo, sin que vos te muevas del chat.

Leé este link y resumímelo

El más simple. Le pasás la URL de un artículo, un blog o un anuncio y Claude vuelve con un resumen accionable. Sin que vos copies y pegues nada.

Bajame la imagen de esta página

Le pasás un link y Claude entra, identifica la imagen principal (o la que vos le pidas) y la jala al proyecto. Sirve para references de diseño y assets de marca.

Mirame este Google Doc / Notion

Si el doc es público (o estás logueado en el navegador que controla), Claude lo abre, lo lee entero y te responde sobre el contenido. Sin export, sin copy-paste.

Arreglá los precios de mi tienda Shopify

Claude entra al admin, identifica los productos, los modifica y verifica que el cambio quedó. Lo mismo aplica a WordPress, Webflow o cualquier panel con login.

Entrá a mi proyecto y arreglá lo que está mal

Claude abre tu app en el navegador, prueba el flujo, ve dónde se rompe y vuelve al código a arreglarlo. El loop completo de testing manual lo hace solo.

Llename este formulario por mí

Le pasás el link al form y los datos. Claude completa cada campo, verifica antes de mandar y te confirma cuando termina. Sirve para reportes, applications y todo lo repetitivo.

Lo bueno es que estos seis casos son la primera capa. Cuando Claude ya tiene navegador, se empiezan a abrir flujos que antes ni se imaginaban —probar tu app cada vez que hacés deploy, completar planillas internas, monitorear precios de competidores, sacar data de dashboards que no tienen API. Si encontrás un uso nuevo, mandánoslo: el próximo prompt de la guía sale de la comunidad.

5 prompts listos · copy-paste

Cosas concretas para probar apenas lo instales

Cada prompt está pensado para que lo pegues en Claude Code apenas terminás la instalación. Reemplazá lo que está entre corchetes [ASÍ] con lo tuyo y mandalo. No hace falta que entiendas cómo funciona el repo por dentro — los prompts ya tienen las instrucciones específicas que necesita Claude para usar Agent Browser bien.

Leer un link y resumirlo en bullets accionables

El uso más simple. Sirve para artículos, posts de blog, transcripts y comunicados. Claude entra, lee, y vuelve con la versión corta — sin que vos abras ni una pestaña.

Usá Agent Browser para abrir este link y leer toda la página: [PEGÁ LA URL ACÁ]

Devolveme:
1. Resumen en 3 bullets — qué dice la página, en una frase cada bullet.
2. 3 acciones concretas que yo podría tomar después de leer esto.
3. Si hay algo que no se entiende o que parece marketing inflado, marcalo aparte como "ojo".

No me copies párrafos enteros — quiero la versión destilada. Si el link redirige o pide login, avisame en vez de inventar.

Auditar la landing de tu propio producto

Claude entra a tu landing como si fuera un visitante nuevo y te dice qué se entiende, qué no, y dónde se cae el embudo. Mucho más útil que leerla vos mismo.

Usá Agent Browser para entrar a mi landing: [PEGÁ LA URL]

Hacé esto:
1. Llegá como si fueras un visitante completamente nuevo (no tenés contexto previo).
2. En los primeros 3 segundos, decime qué entendiste que vendo.
3. Después leé hasta el primer CTA — ¿qué se rompe? ¿qué te confunde? ¿hay claims sin prueba? ¿hay frases vacías tipo "soluciones innovadoras"?
4. Bajá hasta el footer y decime qué hay (FAQ, testimonios, precio, garantía).
5. Mandame las 3 cosas concretas que cambiaría YA para subir la conversión.

No me digas "está buena la landing". Decime qué se rompe y qué cambiarías.

Bajar imágenes y assets de una página de referencia

Cuando ves una landing que te gusta y querés inspirarte. Claude entra, identifica las imágenes clave y las jala al proyecto sin que vos toques el inspector.

Usá Agent Browser para entrar a esta página: [PEGÁ LA URL]

Quiero que:
1. Identifiques la imagen del hero (la principal arriba de todo).
2. Identifiques las imágenes de las secciones siguientes (features, testimonios, etc.) — máximo 5.
3. Las descargues a /public/references/ con nombres descriptivos (hero-1.jpg, feature-pricing.jpg, etc.).
4. Me devuelvas un resumen: cuántas imágenes bajaste, dónde están, y qué dice cada una.

Si la página tiene SVGs inline en vez de imágenes reales, copiame el código del SVG en un archivo aparte.

Llenar un formulario complejo paso a paso

Para esos forms larguísimos de aplicaciones, reportes o registros. Claude completa cada campo y verifica antes de mandar.

Usá Agent Browser para llenar este formulario: [PEGÁ LA URL]

Mis datos:
- Nombre: [TU NOMBRE]
- Email: [TU EMAIL]
- [AGREGÁ TODOS LOS DATOS QUE NECESITE EL FORM]

Reglas importantes:
1. Antes de tocar cualquier campo, sacá un snapshot de la página y mandame la lista de campos para que confirme que están todos.
2. Llená un campo a la vez. Después de cada uno, verificá que quedó bien antes de pasar al siguiente.
3. NO toques el botón de enviar / submit hasta que yo te lo confirme. Mostrame primero todo lo que llenaste.
4. Si hay un campo que no entendés o que pide algo que yo no te di, parate y preguntame.

Probar el flujo de checkout end-to-end

Vos sabés que tu checkout funciona porque vos lo probaste una vez. Pero ¿funciona en mobile? ¿con tarjeta de prueba? Claude lo recorre entero y te reporta dónde se traba.

Usá Agent Browser para probar el checkout completo de mi tienda: [PEGÁ LA URL DEL PRODUCTO]

Recorrido:
1. Entrá a la página del producto.
2. Agregá al carrito.
3. Andá al checkout.
4. Llená los datos con esta tarjeta de prueba (Stripe test mode): 4242 4242 4242 4242, fecha 12/30, CVC 123.
5. Antes de confirmar el pago, parate y mandame un resumen de todo lo que ves: subtotal, envío, total, qué método de pago aceptó, qué validaciones hizo.
6. NO completes el pago. Solo reportame el estado.

Si en cualquier paso algo no carga, no se ve, da error o se traba — parate ahí y mandame screenshot + descripción del problema. Eso es lo que más me sirve.

el sistema de la comunidad

Agent Browser es la pieza que le faltaba al stack: ojos para Claude en internet, sin que la cuenta arda. Está pensado para combinarse con los otros skills de Vercel Labs (que tenemos cubiertos en la bóveda) y con flujos como auditoría de landing, debugging end-to- end y automatización de paneles. Si lo instalás y le encontrás un uso nuevo, comentanos qué harías con esta herramienta — los próximos prompts salen de tu data.

¿Para quién NO es esta herramienta?

Si solo usás Claude para chatear y nunca toca código, no necesitás Agent Browser. Esto es para los que ya están construyendo cosas con Claude Code y necesitan que pueda salir a internet sin quemarles la cuenta cada vez que abre una página. Si nunca instalaste un skill antes, empezá por la guía de Vercel Skills primero —explica el flujo completo— y después volvé acá.