Saltar al contenido
Volver a Recursos
GuíaAvanzado

Dale ojos a tu IA · que no construya a ciegas (agent-browser)

Hay un problema silencioso con casi toda la IA que construye código: trabaja a ciegas. Genera una pantalla, te dice "listo, ya funciona"… pero nunca la ABRIÓ para comprobarlo. No tiene ojos. agent-browser —una herramienta open-source de Vercel— le da exactamente eso: la capacidad de abrir tu app en un navegador real, mirarla, hacer clic, llenar formularios, comprobar que de verdad funciona, y avisarte qué está roto. La instalas en tu agente (Claude Code, Cursor, Codex) y le pides que VALIDE constantemente lo que construye, en vez de adivinar. Y eso es solo el principio: con ojos en la web, tu IA también puede navegar sitios, extraer información, automatizar tareas repetitivas. En esta guía verás cómo instalarlo, el prompt para que valide sin que se lo recuerdes, y el mundo de posibilidades que abre.

Jun 22, 202612 min
¿Para quién es esto?
Para quien construye con un agente de código (Claude Code, Cursor, Codex) y quiere que deje de adivinar y compruebe lo que hace. Es el recurso más avanzado de la serie (requiere un agente de terminal), pero el concepto sirve a todos: una IA que valida lo que construye es una IA en la que puedes confiar.

El problema · tu IA construye a CIEGAS

Esto le pasa a todo el que construye con IA, y casi nadie lo nota: la IA genera una pantalla, un formulario, un flujo… y te dice "listo, ya funciona". Pero, ¿lo abrió para verlo? No. La IA escribe el código y asume que está bien — no tiene ojos para comprobarlo. Es como un cocinero que sirve el plato sin probarlo. A veces sale bien; otras, el botón no hace nada, el login está roto, o la imagen no carga — y te enteras tú, en producción, frente a un cliente.

El dolor del que nace · el "listo" que no era listo
El "ya funciona" que en realidad estaba roto es uno de los momentos más frustrantes de construir con IA. Pierdes la confianza: cada "listo" lo tienes que ir a verificar TÚ a mano, abriendo el navegador, haciendo clic, revisando. Eso es lento y agotador. ¿Y si la IA lo hiciera ella misma, antes de decirte "listo"?
Una historia real (la nuestra)
Esto no es teoría. Construyendo este mismo producto, al principio le pedíamos a la IA que fuera a revisar lo que había hecho — y respondía, con honestidad, "no tengo cómo abrir la app para verlo". Construía a ciegas. Todo cambió al instalarle agent-browser: desde ese día la IA empezó a abrir la app, navegarla y comprobar lo que construía — y hasta a validar estas mismas guías en vivo. El antes y el después es real, y es justo lo que esta guía te enseña a montar.

¿Qué es agent-browser? · los ojos de tu IA

agent-browser es una herramienta open-source de Vercel que le da a tu agente de IA la capacidad de manejar un navegador real: abrir tu app, ver lo que hay en pantalla, hacer clic, escribir en campos, llenar formularios, tomar capturas y leer los errores de la consola. En cristiano: le da ojos y manos en el navegador. Deja de adivinar; ahora comprueba.

Imagínalo así · el cocinero que prueba el plato
Una IA sin agent-browser es un cocinero que cocina y sirve sin probar — confía en que quedó bien. Con agent-browser, es el cocinero que prueba cada plato antes de sacarlo: lo abre, lo mira, confirma que está bueno, y solo entonces te dice "listo". La diferencia entre cruzar los dedos y tener certeza.
¿Y no es lo mismo que webapp-testing?
Se parecen, pero agent-browser va más allá. La skill webapp-testing (del recurso de las 5 skills) prueba TU app. agent-browser hace eso y además navega cualquier sitio de la web, extrae información, automatiza tareas, y trae un servidor MCP y un vault de credenciales cifrado. Es una herramienta de navegación completa, no solo un probador. Aquí el foco es doble: validar lo que construyes + abrir el mundo de la web a tu IA.

El beneficio #1 · que valide constantemente (no a ciegas)

Este es el uso que cambia tu forma de trabajar: le pides a tu IA que, cada vez que construya algo, lo abra y lo valide ella misma antes de decirte que está listo. Construyó un login → que se registre con una cuenta de prueba y confirme que entra. Hizo un formulario → que lo llene y verifique que envía. Cambió una pantalla → que la abra y compruebe que se ve bien y no hay errores en consola. Pasa de "creo que funciona" a "lo probé y funciona".

El hábito · "no me digas listo sin haberlo visto"
Vuélvelo una regla permanente para tu agente: ninguna tarea se da por terminada sin validarla en el navegador. Es el mismo espíritu del protocolo C-A-R, pero para la interfaz: construir → abrir y comprobar → recién entonces "listo". Una IA que se autocomprueba comete muchísimos menos errores que llegan a ti.

El beneficio #2 · abre un mundo de posibilidades

Dar ojos a tu IA no sirve solo para validar lo tuyo. Con un navegador a su disposición, puede hacer muchísimo más:

Lo que tu IA puede hacer con ojos en la web
  • Validar tu app end-to-end: registrarse, navegar, probar tu flujo clave y reportar qué rompe.
  • Extraer información de sitios web (precios, datos, listados) y traértela ordenada.
  • Llenar formularios repetitivos y automatizar tareas tediosas del navegador.
  • Investigar: abrir varias páginas, leerlas y resumirte lo importante.
  • Reusar tu sesión: si ya estás logueado en Chrome, puede trabajar con esa sesión (con tu permiso).

Lo que lo hace especial (sin tecnicismos)

A diferencia de las herramientas de automatización tradicionales (como Playwright), agent-browser está hecho para agentes de IA: en vez de leer toda la página (que gasta muchísimos tokens), le da a la IA un "mapa" compacto de los elementos con los que puede interactuar. Eso significa más barato y más rápido para tu agente. Es open-source, de Vercel, con licencia permisiva.

vercel-labs/agent-browserREPO

agent-browser de Vercel — CLI de automatización de navegador hecha para agentes de IA. Le da a tu agente (Claude Code, Cursor, Codex) ojos y manos en el navegador: abrir, ver, clic, llenar, extraer, validar. Usa snapshots del árbol de accesibilidad (eficiente en tokens) y trae servidor MCP. Open-source.

RustApache-2.0Ver en GitHub

Cómo instalarlo (necesitas un agente de código)

Se instala en tu computadora con un comando, y la primera vez descarga su navegador. Luego tu agente de IA lo usa. (Hay varias formas — npm es la más común.)

Instalar agent-browser (npm)bash
npm install -g agent-browser
agent-browser install
Si prefieres, que lo instale tu agente
Como en toda la serie: no tienes que pelear con la terminal. Pásale a tu agente el enlace del repo (github.com/vercel-labs/agent-browser) y dile "instala agent-browser y configúralo para que puedas validar lo que construyes en el navegador". Él se encarga, y te dice si algo lo tienes que hacer tú. También existe en Homebrew (brew install agent-browser) y Cargo si prefieres.

Prompt 1 · Que valide TODO lo que construye (el regla de oro)

Este es el prompt que cambia tu forma de trabajar. Pégaselo a tu agente para que deje de construir a ciegas:

Pégalo a tu agente · valida, no adivinestexto
Tienes agent-browser instalado. De ahora en adelante, NO me digas que algo "ya funciona" sin haberlo comprobado tú mismo en el navegador con agent-browser.

Cada vez que construyas o cambies algo en la interfaz:
1. Abre mi app (corre en [tu URL, ej. http://localhost:3000]) con agent-browser.
2. Navega hasta lo que acabas de construir o cambiar.
3. Pruébalo como un usuario real: haz clic, llena los campos, completa el flujo clave [describe tu flujo, ej. "registrarse → entrar al dashboard"].
4. Revisa que se vea bien y que NO haya errores en la consola del navegador.
5. Si algo está roto o se ve mal, arréglalo y vuelve a validar, hasta que de verdad funcione.
6. Solo entonces dime "listo", y cuéntame qué validaste y qué viste.

Regla de oro: ninguna tarea de interfaz se da por terminada sin validarla en el navegador. No construyas a ciegas.

Prompt 2 · Automatizar / extraer info de la web

Para aprovechar el otro superpoder —navegar y automatizar—, este prompt le pide a tu IA que use agent-browser para una tarea web concreta:

Pégalo a tu agente · navegar y extraertexto
Usa agent-browser para esta tarea en la web, paso a paso:

Quiero que [describe tu tarea, ej: "abras esta página [URL], extraigas la lista de productos con sus precios, y me los traigas en una tabla ordenada" / "entres a mi panel de [servicio] y me digas el estado de X" / "llenes este formulario con estos datos"].

1. Abre la página y toma un snapshot para ver con qué elementos puedes interactuar.
2. Haz la tarea paso a paso, comprobando en cada paso que el elemento correcto está ahí.
3. Si necesito iniciar sesión, dime cómo guardar mis credenciales de forma segura (agent-browser tiene un vault cifrado; nunca pongas mis contraseñas en texto plano).
4. Entrégame el resultado ordenado y dime si algo no se pudo hacer.
Seguridad · tus credenciales, cifradas
Si la IA va a entrar a sitios con tu sesión, NUNCA le pegues tus contraseñas en el chat. agent-browser trae un vault de credenciales cifrado: guardas el acceso por nombre y la IA lo usa sin ver la contraseña. Y los archivos de sesión (que llevan tokens) van al .gitignore, nunca a GitHub. (Conecta con la guía de seguridad de la serie.)
Combínalo con el C-A-R
agent-browser es el complemento perfecto de la fase de auditar del protocolo C-A-R: cuando la IA audita su propio trabajo, ahora puede ABRIR la app y comprobar de verdad que funciona, no solo releer el código. Auditar con ojos es muchísimo más potente que auditar a ciegas.
En NeuralOS, validar es parte del flujo
La filosofía de "no construir a ciegas" está en el corazón de NeuralOS: que lo que se construye se compruebe, no se asuma. La idea de una IA que se autovalida antes de entregar es parte de cómo pensamos el producto. Si quieres ese rigor sin montar herramientas, ese es el camino.
El protocolo C-A-R · auditar con ojos, no a ciegasagent-browser potencia la fase de auditar: la IA comprueba en el navegador, no solo relee el código.Blindaje de seguridad · protege tus credencialesSi tu IA navega con tu sesión, guarda tus credenciales cifradas y nunca subas los tokens a GitHub.
#agent-browser#automatizacion#validacion#claude-code