Lo importante de los agentes de codificación es que solo se pueden utilizar para realizar codificación o programación. Sin embargo, son agentes mucho más generalizados y son capaces de realizar esencialmente todas las tareas de oficina, aunque con distintos grados de éxito.
Sin embargo, un área que ha recibido mucha atención es la navegación utilizando navegadores web con agentes de codificación como Claude Code y OpenAI’s Codex.
Los agentes se han vuelto increíblemente competentes en la navegación por la web, lo cual es muy útil para muchas tareas diferentes.
Por supuesto, la navegación web puede resultar útil en muchas situaciones diferentes, como buscar información en Internet o rellenar formularios por usted. Sin embargo, vale la pena señalar que algunos de los casos de uso pueden infringir los términos de servicio, por lo que definitivamente debes tener esto en cuenta. El área de uso principal que cubriré hoy es definitivamente completamente legal y cubre la navegación por las aplicaciones que usted mismo está desarrollando con los agentes de codificación para probar y verificar las implementaciones.
Anteriormente, hablé mucho sobre la creación de tareas verificables cada vez que le pides a los agentes de codificación que realicen acciones por ti. Dar acceso a los agentes de codificación a su navegador para probar implementaciones es una parte crucial de esta verificabilidad.
Por qué los agentes codificadores deberían utilizar su navegador
En primer lugar, me gustaría explicar por qué debería importarle ejecutar navegadores con sus agentes de codificación. Los navegadores son una interfaz importante que utilizan los humanos para interactuar con el mundo. A través de su navegador, puede realizar muchas acciones diferentes, como leer información, completar solicitudes, etc.
Dado que se trata de una interfaz tan importante para que los humanos interactúen con el mundo, se ha centrado mucha atención e investigación en la navegación eficaz de los navegadores. Existen numerosas empresas que se especializan en la navegación por navegador, y también todos los laboratorios fronterizos ofrecen dicha integración en sus productos, como OpenAI’s Codex y Anthropic’s Claude Code.
Imagínese si le está diciendo a un agente de codificación que implemente un diseño siguiendo un archivo de diseño HTML. El agente codificador es, por supuesto, bueno con el código front-end y puede comenzar a implementarlo de inmediato; sin embargo, si el agente de codificación no puede navegar por el navegador, le resultará imposible verificar su propio trabajo.
Esto aumenta enormemente la posibilidad de que un agente de codificación cometa errores y no implemente el diseño exacto que usted desea implementar.
Afortunadamente, existe una solución muy sencilla para este problema. Dale a tu agente de codificación acceso al navegador. Permítale tomar capturas de pantalla del diseño que ha implementado y compárelo con las capturas de pantalla del diseño que deseaba que implementara. Luego, el agente de codificación puede continuar iterando hasta que el código implementado se vea exactamente como el archivo de diseño.
Esto le ahorra, como programador, mucho tiempo ya que no tiene que verificar e instruir repetidamente al agente de codificación sobre los errores que comete al realizar la implementación del diseño. Nuevamente, esto le permite realizar muchas otras tareas diferentes y ser más productivo como ingeniero.
como funciona
Antes de pasar a cómo navegar en los navegadores con Claude Code, también quiero tener una sección sencilla que cubra cómo funciona.
En teoría, es bastante sencillo navegar por el navegador. El agente codificador navega abriendo el navegador, por supuesto, donde tiene acceso a algunas acciones:
Tomar captura de pantalla Hacer clic (basado en coordenadas) Ingresar texto
Estas son las tres acciones principales que realiza el agente de codificación, que son básicamente todas las acciones necesarias para interactuar con un navegador:
El agente codificador necesita tomar capturas de pantalla porque así es como descubre qué hay en cada página y dónde hacer clic. El agente codificador también debe poder hacer clic en diferentes lugares del sitio web, por ejemplo, hacer clic en botones o hacer clic en campos de entrada.
Esto se basa en coordenadas.
Entonces, si el agente codificador quiere hacer clic en una ubicación específica, genera el siguiente texto:
hacer clic(x=0,754, y=0,328)
Básicamente utiliza la función de hacer clic y proporciona las coordenadas donde quiere hacer clic. Las coordenadas normalmente se normalizan para estar en un rango establecido, como entre 0 y 1.
Luego, una vez que el agente ha hecho clic en una ubicación específica, puede ingresar texto para hacer todo lo que quiera en el navegador. Por supuesto, el agente codificador también puede realizar diferentes tipos de clics, como hacer clic derecho para obtener más opciones en la página.
Este bucle luego se itera. El agente codificador toma una captura de pantalla, elige qué acción realizar, comprueba si ha logrado su objetivo o no y repite. Vuelve a tomar una captura de pantalla, elige una acción, comprueba si logró un objetivo y continúa. El agente simplemente continúa así hasta que logra su objetivo en el navegador.
Cómo navegar en los navegadores con Claude Code
A continuación, quiero cubrir exactamente cómo navegar en los navegadores usando Claude Code, y los principios que cubriré aquí básicamente se aplican a cualquier agente de codificación. No voy a cubrir técnicas que no puedan generalizarse fácilmente básicamente a cualquier otro agente de codificación.
En primer lugar, si estás usando Claude Code, tiene una integración integrada con Chrome que puedes habilitar simplemente escribiendo el siguiente comando mientras estás en la ventana de Claude Code.
/cromo
Codex también tiene un comando correspondiente.
Esto simplemente le da a Claude acceso para abrir Chrome en su computadora y usarlo para verificar tareas.
Creo que la implementación de Chrome en Claude funciona bien, pero no es óptima.
Tengo una mejor experiencia usando Playwright MCP, que puedes simplemente instalar en Claude Code diciéndole a Claude Code que lo instale:
Instale Playwright MCP para interactuar con el navegador
Después de que Claude lo haya instalado, deberá reiniciar Claude Code y tendrá acceso a Playwright MCP. En mi experiencia, Claude es más eficaz a la hora de completar tareas si utiliza Playwright MCP en lugar de interactuar con la implementación /chrome que ya está presente en el código Claude básico.
Por supuesto, si tiene algún otro agente de codificación, puede hacer exactamente lo mismo: decirle que instale Playwright MCP. El agente instalará el MCP, usted reiniciará el agente y tendrá acceso a Playwright.
¿Cómo hago para que mi agente pruebe mi implementación?
Ahora que implementó Playwright MCP y le dio a su agente acceso para interactuar con el navegador, puede usarlo para probar sus implementaciones.
Siempre que su agente haya implementado algo (por ejemplo, haya implementado un nuevo diseño a partir de un archivo de diseño), simplemente dígale que verifique su trabajo de un extremo a otro revisándolo en Chrome con Playwright MCP y verificando su propio trabajo.
También es útil decirle al agente que no se detenga y que regrese a usted antes de que haya verificado su trabajo de principio a fin. Verificar el trabajo de un extremo a otro, en este caso, significa literalmente interactuar con el navegador y ver si algo funciona.
Normalmente también uso la función /goal, que está disponible tanto en Codex como en Claude Code, que es básicamente una forma en que el agente continúa trabajando para lograr una tarea hasta que la logra. Entonces normalmente escribiré algo como:
/objetivo continúe trabajando en la tarea, implementándola hasta que la haya implementado por completo y la haya probado y verificado de principio a fin interactuando con el navegador usando el dramaturgo MCP, tomando capturas de pantalla y verificando su trabajo; solo regrese a mí una vez que haya implementado y probado completamente la implementación con éxito.
Esto hará que el agente continúe trabajando para lograr el objetivo y verificándolo, y solo regresará a usted una vez que haya verificado su trabajo. Esto me ha ahorrado una increíble cantidad de tiempo y es especialmente útil si solo desea que el agente implemente diseños.
Conclusión
En este artículo, cubrí cómo aplicar Claude Code para verificar el trabajo en su navegador. Primero hablé de por qué los agentes de codificación pueden y deben interactuar con su navegador. Luego, le expliqué cómo funciona realmente la navegación del navegador con agentes de codificación, que en realidad es un concepto bastante simple. Por último, expuse específicamente cómo navegar por los navegadores utilizando Claude Code u otros agentes de codificación.
Creo que la navegación por navegador seguirá siendo importante porque muchas de las formas en que los humanos interactúan con el mundo se realizan a través de un navegador. Sin embargo, vale la pena señalar que los agentes de codificación siguen siendo mucho más efectivos en el uso de API y MCP, por lo que si puede interactuar con un servicio a través de esos medios, básicamente siempre debe hacerlo.
👋 Ponte en contacto
👉 Mi libro electrónico y seminario web gratuitos:
🚀 10 veces su ingeniería con LLM (curso gratuito por correo electrónico de 3 días)
📚 Obtenga mi libro electrónico gratuito sobre Modelos de lenguaje de visión
💻 Mi seminario web sobre modelos de lenguaje de visión
👉 Encuéntrame en las redes sociales:
💌 Subpila
🐦X/Twitter