Durante el desarrollo del framework CAMEL AI rediseñamos por completo la automatización del navegador para que los agentes de IA puedan completar tareas web complejas de forma fiable y eficiente.
Al principio usamos una implementación pura en Python basada en los bindings de Playwright, pero pronto surgieron problemas frecuentes: snapshots poco estables, dificultad para entender layouts visuales complejos y fiabilidad limitada en el relleno de formularios. Estas carencias nos llevaron a replantear la arquitectura y a migrar la capa de interacción con el navegador a TypeScript, manteniendo en Python la orquestación y la lógica del agente.
La razón técnica fue clara: Playwright es de facto nativo en TypeScript y muchas funciones avanzadas aparecen primero en la versión de Node.js. Funciones como snapshotForAI permiten generar snapshots optimizados para modelos, manejando ARIA, jerarquías, interactividad y otras reglas complejas que sería muy costoso replicar con miles de líneas de JavaScript desde Python. Además, ejecutar lógica directamente en el contexto del navegador resulta mucho más eficiente para operaciones como detección de oclusión o inyección visual.
La nueva arquitectura separa responsabilidades: la capa TypeScript gestiona Playwright y todas las operaciones DOM con acceso a APIs nativas y renderizado en el navegador; la capa Python se centra en llamadas a LLM, toma de decisiones y control de flujo. La comunicación entre ambas se realiza de forma asíncrona por WebSocket, evitando bloqueos y manteniendo la experiencia de uso transparente para el desarrollador.
Esta decisión aporta beneficios concretos: menor latencia, mejor rendimiento, acceso a las últimas funciones de Playwright, async nativo, manejo de eventos en tiempo real, mejor tipado en tiempo de compilación y trazas de error más claras. En conjunto mejora la estabilidad de agentes IA que interactúan con interfaces web.
Un reto clave fue el equilibrio entre coste y precisión en salidas multimodales. Las snapshots puramente textuales son baratas y precisas para tareas sencillas como rellenar formularios, pero pierden información en layouts complejos o tareas visuales. Las capturas de pantalla aportan contexto visual indispensable para acciones como mover elementos en un diseño. Por eso ofrecemos herramientas primitivas separadas: browser_get_page_snapshot para texto y browser_get_som_screenshot para capturas SoM, permitiendo al agente decidir libremente según coste y necesidad.
Optimizamos la generación de snapshots en varios frentes. Eliminamos ruido de elementos decorativos mediante filtrado jerárquico que conserva el padre clicable y suprime iconos y divisores irrelevantes. Implementamos viewportLimit para excluir elementos fuera de la vista y así evitar que el agente intente interactuar con elementos no visibles. Para oclusiones usamos document.elementsFromPoint para detectar elementos bloqueados y marcarlos como occluded o directamente filtrarlos, evitando intentos de clic fallidos.
Para las capturas SoM inyectamos marcadores DOM en el navegador y luego tomamos la captura en lugar de dibujar sobre imágenes en Python. Este enfoque aprovecha el motor de renderizado del navegador para obtener calidad visual perfecta, consistencia entre plataformas, menor transferencia de datos y posicionamiento inteligente de etiquetas mediante algoritmos que prueban arriba, abajo, izquierda, derecha y diagonales para evitar solapamientos.
Además cuidamos la gestión del contexto para evitar la explosión de memoria: las imágenes SoM no se almacenan directamente en el contexto del agente, sino que el toolkit registra instrucciones y la imagen se pasa por referencia cuando es necesario. Esto permite mantener el histórico liviano y delegar el análisis multimodal a la capa de agente.
En el relleno de formularios abordamos casos reales complejos: relleno en batch para múltiples inputs en una sola operación, detección inteligente de dropdowns con snapshot diff para identificar opciones surgidas tras teclear, manejo de elementos read only como date pickers con clicks previos y búsqueda de input anidado en hijos si el fill inicial falla. Todo envuelto en estrategias de recuperación de errores que registran información de depuración sin interrumpir la ejecución hasta agotar alternativas.
De cara al futuro trabajamos en snapshots aún más eficientes, con filtrado semántico y agregación jerárquica de elementos no interactivos, además de soporte para modelos puramente visuales que interactúan por coordenadas. Planeamos ofrecer un entorno de evaluación donde clicks predichos por modelos visuales se validen frente a posiciones ground truth para entrenamiento y benchmarking de agentes basados en visión.
Otro objetivo estratégico es diseñar una memoria a largo plazo confiable para agentes de navegador, combinando compresión semántica, cachés jerárquicos y reconstrucción adaptativa de contexto para mantener coherencia en secuencias largas sin sobrecargar tokens ni perder trazabilidad.
En Q2BSTUDIO como empresa especializada en desarrollo de software y aplicaciones a medida llevamos años aplicando principios similares para construir soluciones robustas de inteligencia artificial y automatización. Nuestro equipo combina experiencia en software a medida, servicios cloud aws y azure, ciberseguridad y servicios inteligencia de negocio para ofrecer productos integrales que cubren desde la arquitectura hasta la producción. Si buscas potenciar tus proyectos con agentes IA o desplegar soluciones a medida puedes conocer nuestros servicios de inteligencia artificial en Inteligencia artificial para empresas y nuestras capacidades en desarrollo de aplicaciones en aplicaciones a medida y software a medida.
Palabras clave integradas en nuestra oferta: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi. Además podemos integrar soluciones de Business Intelligence y visualización con Power BI para cerrar el ciclo de datos y decisiones.
Este viaje de CAMEL refleja cómo las decisiones arquitectónicas adecuadas, la colocación de lógica en el entorno más eficiente y la atención a detalles como la calidad de snapshots y la interacción visual permiten crear agentes IA más fiables y útiles. En Q2BSTUDIO estamos listos para ayudarte a aplicar estas ideas en proyectos reales, desde automatización de procesos hasta plataformas seguras y escalables.
Gracias a la comunidad por las contribuciones que impulsaron estas mejoras. Si quieres explorar casos de uso, auditorías de seguridad o desarrollos personalizados, contacta con nuestro equipo y descubre cómo transformar la interacción con interfaces web mediante agentes IA y arquitecturas híbridas Python y TypeScript.