Table of Contents
- Introducción
- El Problema con los Agentes de IA Hoy
- ¿Qué es Web Agent
- Arquitectura: Por Dentro
- Características Principales
- Comienza en 60 Segundos
- Aprendizaje Autónomo: El Agente que se Vuelve Más Inteligente con Cada Conversación
- Comparación: Web Agent vs Otras Alternativas
- Uso en el Mundo Real: Cómo lo Usamos
- Código Abierto y Comunidad
- Hoja de Ruta: ¿Qué Sigue
- Conclusión
Introducción
!Web Agent in-browser architecture: self-learning loop with DOM interaction and tool execution
Si alguna vez intentaste usar un agente de IA, ya sabes el peregrinaje: instala esta pila de Python, configura tu clave de API, crea un entorno virtual, depura esa contenedor de Docker, recuerda reiniciar el servidor, y reza para que tus variables de entorno no se pierdan entre reinicios.
¿Y si pudieras usar un agente de IA completo — habilidades, memoria, herramientas, automatización — sin instalar nada en absoluto?
Hoy liberamos como código abierto Web Agent (nombre en clave) / Web Agent — un agente de IA listo para producción que se ejecuta completamente en tu navegador mediante WebContainers, sin necesidad de instalación local. No hay Python, ni Node.js, ni servidor, ni terminal. Solo abre el navegador, crea un perfil, establece tu clave de API y empieza a trabajar.
Construido sobre la misma arquitectura de Hermes Agent (nuestro asistente de IA de escritorio), Web Agent lleva toda la potencia de los flujos autónomos de IA a cualquier navegador moderno: perfiles aislados, memoria persistente, bóveda de conocimientos, comandos diagonales, automatización cron y gateway multi-plataforma — mientras mantiene todos tus datos cifrados localmente y nunca los envía a nuestros servidores.
Este es el agente que hemos estado usando internamente en aratech para automatizar nuestros flujos de trabajo del blog de Directus, tareas de investigación y gestión de conocimientos. Ahora es tuyo, bajo licencia MIT, en github.com/nikola66/web-agent y en vivo en webagent.aratech.ae.
El Problema con los Agentes de IA Hoy
Seamos honestos: los agentes de IA hoy son poderosos, pero también increíblemente molestos de usar.
El flujo de configuración típico de un agente es:
- Instala un entorno de ejecución local — Python virtualenv, módulos Node, imágenes Docker, pulls de Ollama
- Configura tu entorno — claves de API, ajustes proxy, certificados SSL, variables de sistema
- Construye tu pipeline — scripts de pegado, configuración de frameworks, diseño de base de datos vectorial
- Reza para que siga funcionando mañana — la actualización del sistema rompe el binario de Python, una dependencia cambia, tu LLM local se estrella
Esta fricción es la razón por la que los agentes no han alcanzado adopción generalizada. La tecnología está lista, pero el mecanismo de entrega está atascado en la misma trampa de complejidad en la que estaba el desarrollo web antes de que las plataformas en la nube la abstrajeran.
Luego está el problema del estado. La mayoría de los agentes combinan tus datos, tus conversaciones, tus tareas y tus credenciales en un solo blob — o peor aún, te piden que confíes a un tercero con todo. Si se cae su servidor, se cae tu agente. Si cambian su API, se rompe tu flujo. Si deciden dejar de ofrecer el plan gratuito, te quedas fuera.
Finalmente, está la brecha de especialización. La IA promedio está entrenada en Internet entera — es como tener mil empleados, ninguno de los cuales sabe nada de tu negocio. Pasas media hora volviendo a explicar tu contexto, tus reglas y tus objetivos cada vez que empiezas una nueva conversación. Eso no es un trabajador del conocimiento, es un proceso de incorporación repetido.
Construimos Web Agent para resolver estos tres problemas de una vez.
¿Qué es Web Agent?
Web Agent (nombre en clave interno; el proyecto se llama formalmente Web Agent) es un agente de IA completo que se ejecuta de forma nativa en tu navegador usando WebContainers — la misma tecnología que impulsa CodeSandbox y StackBlitz.
Pensalo como Hermes Agent, pero portado al navegador. Mismo sistema de habilidades, misma memoria multicapa, mismas ~40 herramientas integradas, mismo bucle de aprendizaje autónomo. La diferencia: sin instalación, sin servidor, sin variables de entorno, sin Docker.
| Configuración típica de Agente de IA | Web Agent |
|---------------------------------------------|------------------------------|
| Instala Python/Node/Docker | Abre tu navegador |
| Configura tu archivo .env | Establece tu clave API (cifrado local) |
| Elige tu base de datos vectorial | Sin configuración necesaria |
| Mantén el servidor en funcionamiento | Funciona inmediatamente |
| Tus datos abandonan tu máquina | Todo se queda en el navegador |
| Un agente por instalación | Hasta 4 perfiles en simultáneo |Cada perfil en Web Agent obtiene su propio:
- Espacio de trabajo aislado — archivos, shell y estado de proyecto sandboxeados de otros perfiles
- Memoria separada — almacén de hechos, memoria de sesión, reflexiones y aprendizajes por perfil
- Credenciales cifradas — claves de API almacenadas localmente en el navegador, nunca enviadas a servidores
- Habilidades personalizadas — definiciones de habilidades por perfil que heredan de una base compartida
Si creas un perfil para uso personal, otro para trabajo de clientes, otro para contribución open-source y otro para experimentos — cada uno vive en su propio mundo, completamente aislado.
Arquitectura: Por Dentro
La arquitectura de Web Agent está separada en capas para mantener la ejecución, la persistencia y la infraestructura como preocupaciones separadas:
┌─────────────────────────────────────────────────────┐
│ Navegador: React 19 + Vite + TypeScript + xterm.js │
├─────────────────────────────────────────────────────┤
│ Sidebar │ Terminal (xterm) │ Chat Input │
│ Perfiles│ Transcript │ Lenguaje natural │
├─────────────────────────────────────────────────────┤
│ Core Orchestrator │
│ • Gestión del ciclo de vida de perfiles │
│ • Inicio/apagado de WebContainer │
│ • Bóveda de credenciales (cifrada) │
├─────────────────────────────────────────────────────┤
│ Entorno de Ejecución del Agente (Node.js en WebContainers) │
│ ┌──────────────────────────────────────────────┐ │
│ │ Bucle LLM (OpenRouter / Ollama / Custom) │ │
│ │ Registro de Herramientas (~40 integradas) │ │
│ │ Gestor de Habilidades (cargador SKILL.md) │ │
│ │ Capas de Memoria (hechos, sesión, reflejo) │ │
│ │ Planificador Cron (latido + trabajos) │ │
│ │ Gateway de Canales (Telegram, Email) │ │
│ └──────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ Persistencia: IndexedDB + OPFS (local en navegador) │
│ Sin estado de usuario en servidor │
└─────────────────────────────────────────────────────┘Esa última línea es importante: tus datos nunca abandonan tu navegador a menos que configures explícitamente un proveedor LLM externo. La demo alojada en webagent.aratech.ae solo sirve la aplicación estática; todos tus archivos, memoria y credenciales permanecen en tu propio IndexedDB o OPFS del navegador. Incluso si la demostración se desconecta, tus datos locales son accesibles mediante exportación/importación.
Este no es un producto en la nube con versión gratuita — es una herramienta que se ejecuta en tu computadora, entregada a través del navegador.
Pila Tecnológica
Características Principales
Exploremos qué hace que este agente sea útil en el uso diario.
Perfiles Aislados — Múltiples Agentes, Un solo Navegador
Piensa en un perfil como un espacio de trabajo dedicado para tu agente. Cada perfil tiene su propio:
- Sistema de archivos WebContainer (sandbox Node.js virtualizado)
- Capas de memoria (hechos, sesiones, reflexiones, aprendizajes)
- Bóveda de credenciales
- Habilidades personalizadas
- Instantánea de exportación/importación
Puedes ejecutar hasta 4 agentes concurrentes en diferentes perfiles al mismo tiempo. Uno para trabajo, uno personal, uno para un proyecto de cliente, uno para experimentación — nunca se mezclan.
Bóveda de Conocimientos (PARA + Wiki)
Inspirado en el concepto viral de "Cerebro Segundo de IA" de Karpathy, Web Agent tiene una bóveda de conocimientos de primera clase integrada.
Puedes:
/wiki-setuppara inicializar una bóveda de markdown estructurada en PARA/wiki-syncpara ingerir toda tu memoria, hechos acumulados y aprendizajes de habilidades en la bóveda/wiki-searchpara consultar tu bóveda cuando el agente necesite recuperar contexto
La bóveda crece con el tiempo a medida que usas el agente. Tus sesiones, hechos y aprendizajes se sintetizan en conocimientos estructurados — no solo un registro de chat plano. Este es el ciclo de conocimiento compuesto en acción.
Memoria Multicapa
Web Agent almacena cuatro tipos distintos de memoria, cada uno con un propósito diferente:
Usando la habilidad /memory-layers, puedes elegir conscientemente qué almacenar y dónde, evitando duplicación de contexto. Esta es la misma arquitectura de memoria que permite a Hermes Agent "recordar todo lo que importa y olvidar todo lo que no".
Bucle de Aprendizaje Autónomo
Esta es la pieza que convierte un chatbot en un agente que realmente mejora con el tiempo.
Cada interacción produce tres cosas que el sistema puede almacenar:
- Hechos — "El usuario prefiere TypeScript sobre JavaScript", "Nuestro blog de Directus usa inglés, árabe, español, alemán y francés"
- Reflexiones — "La tarea del guión de video funcionó bien esta vez porque el esquema fue aprobado antes de redactarlo", "Debo revisar errores tipográficos al escribir ejemplos de código"
- Aprendizajes — "Al trabajar con la API de Directus, siempre obtén el ID de la entrada antes de intentar asignar etiquetas"
Estos no son registros de chat. Son piezas de conocimiento estructurado, recuperables, con intención que el agente puede recordar, aplicar y reflexionar. Con el tiempo, el agente no solo "recuerda" tu conversación reciente — sino que entiende la trayectoria de tu proyecto y puede llenar vacíos de contexto sin direccionamiento explícito.
Usa skill_save para promover un flujo de trabajo particularmente bueno (como "cruza publicar en 5 idiomas con formato consistente") a una habilidad reutilizable. La próxima vez que digas "publica mi artículo", el agente extrae esa habilidad, revisa tus traducciones de Directus, formatea todo consistentemente y entrega el trabajo hecho — sin reaprender el proceso desde cero.
~40 Herramientas Integradas
Web Agent viene con un conjunto de herramientas completo desde el primer momento:
Sistema de Archivos: read_file, write_file, edit_file, multi_edit, delete_file, move_file, make_dir, tree, find_files, grep, file_diff, file_stat
Memoria: memory_save, memory_recall, memory_search, session_memory_append, session_memory_list, session_search
Habilidades: skill_list, skill_view, skill_save, skill_manage, skill_bulk_save, skill_delete, skill_recall
Automatización: cron_list, cron_register, todo_write
Web y Visión: web_search, web_fetch, vision_analyze, youtube_transcribe, email
Sistema: run_shell, system_info, artifact_present, apply_patch
Todas estas están disponibles dentro del sandbox de WebContainer. Operan en el espacio de trabajo aislado de tu perfil, así que puedes experimentar, romper cosas y recuperarte sin miedo a perder el resto de tu sistema.
Comandos Diagonales y Modo de Planificación
Web Agent usa un sistema de comandos diagonales inspirado en los mejores patrones de experiencia de terminal (Hermes Agent, Claude Code, OpenCode):
/help — mostrar todas las herramientas y comandos disponibles
/clear — reiniciar con una conversación nueva (conserva datos del perfil)
/compact — comprimir el contexto anterior, continuar en la conversación actual
/checkpoint — guardar una instantánea con nombre de la sesión actual
/rollback — cargar una punto de control
/skills — listar/buscar habilidades instaladas
/plan [objetivo] — ingresar al modo de planificación basado en especificaciones
/stop — interrumpir la ejecución de herramienta actual
/exit — terminar la sesión de terminalModo de planificación (/plan) es particularmente poderoso. Cuando quieras abordar una tarea compleja:
- Escribe
/plan crear una landing page para nuestro nuevo producto - Web Agent lee tu espacio de trabajo (solo lectura, sin modificaciones aún)
- Escribe un archivo de especificación markdown completo a
.webagent/plans/y lo presenta para tu aprobación - Revisas, editas o aceptas — luego dices "ejecuta el plan" en tu próximo mensaje
- Ejecuta el plan paso a paso, con total transparencia
Así obtienes ejecución rigurosa y supervisión humana — el plan es revisado antes de que se escriba cualquier código.
Gateway Multi-Plataforma
Web Agent no está confinado a la ventana del navegador. Incluye una arquitectura de gateway de canales que puede conectar el agente a:
- Telegram — canal de sondeo, sesiones largas en chat
- Email — vía proveedor Resend, enviar y recibir correo desde el agente
- Extensible — agrega nuevos canales colocando un módulo de capacidad bajo
src/capabilities/channels/y reconstruyendo
En nuestro flujo de gestión del blog de Directus, hemos conectado Web Agent para administrar publicaciones programadas, extraer analíticas y responder consultas editoriales — todo a través de una interfaz de chat de Telegram. El agente funciona en el navegador (demo alojada), pero las conversaciones suceden en Telegram. Ese es el tipo de versatilidad que obtienes de una capa de abstracción de canales bien implementada.
Seguridad y Privacidad
Hay una diferencia entre "afirmamos que no usamos tus datos" y "tus datos físicamente no pueden abandonar tu navegador."
Web Agent hace lo último. La arquitectura local garantiza:
- Claves API cifradas por perfil — almacenadas en el navegador, nunca transmitidas en texto claro
- Aislamiento de espacio de trabajo — los archivos y memoria de un perfil no pueden acceder a los de otro
- Sin estado de usuario en servidor — la demo alojada es solo de tránsito; cerrar tu navegador elimina tu sesión del servidor
- Proxy CORS sin estado — el sidecar de fetch no registra ni almacena tráfico
- Ocultación de secretos — las claves API y credenciales se eliminan antes de cualquier salida de registro
- Protecciones de herramientas — mensajes de confirmación para operaciones destructivas, protección de timeout de bucle
Puedes ejecutar Web Agent completamente sin conexión para trabajo local; solo las llamadas LLM y las operaciones de obtención web requieren acceso a la red — y tú controlas ambas credencia
Comienza en 60 Segundos
Aquí está toda la configuración:
# 1. Abre la demo
## → https://webagent.aratech.ae
## 2. Crea un nuevo perfil (clic "Nuevo Perfil")
## 3. Establece tu proveedor LLM y clave de API (cifrado local)
## 4. Empieza a chatear — sin configuración necesariaEso es todo. Sin variables de entorno, sin terminal, sin paso de construcción. El agente inicia su runtime WebContainer en ~5 segundos y estás listo.
Si deseas personalizar o contribuir:
git clone https://github.com/nikola66/web-agent.git
cd web-agent && npm install
npm run dev # desarrollo local con recarga en caliente
npm run build # build de producción estáticoDespliega en cualquier lugar donde se sirvan archivos estáticos — Vercel, Netlify, Cloudflare Pages, un servidor Caddy, o un simple npx serve dist. No se necesita base de datos, no se necesita API del lado del servidor.
Aprendizaje Autónomo: El Agente que se Vuelve Más Inteligente con Cada Conversación
Resaltemos el bucle de aprendizaje autónomo una vez más porque es la característica que cambiará la forma en que piensas sobre los agentes de IA.
Cada interacción produce tres cosas que el sistema puede almacenar:
- Hechos — "El usuario prefiere TypeScript a JavaScript", "Nuestro blog de Directus usa inglés, árabe, español, alemán y francés"
- Reflexiones — "La tarea del guión de video salió bien esta vez porque el esquema se aprobó antes de redactarlo", "Debo revisar los errores tipográficos al escribir ejemplos de código"
- Aprendizajes — "Al trabajar con la API de Directus, siempre obtén el ID de la entrada antes de intentarassign etiquetas"
Estos no son registros de chat. Son piezas de conocimiento estructurado, recuperables, con intención que el agente puede recordar, aplicar y reflexionar. Con el tiempo, el agente no solo "recuerda" tu conversación reciente — sino que entiende la trayectoria de tu proyecto y puede llenar vacíos de contexto sin direccionamiento explícito.
Usa skill_save para promover un flujo de trabajo particularmente bueno (como "cruza publicar en 5 idiomas con formato consistente") a una habilidad reutilizable. La próxima vez que digas "publica mi artículo", el agente extrae esa habilidad, revisa tus traducciones de Directus, formatea todo consistentemente y entrega el trabajo hecho — sin reaprender el proceso desde cero.
Comparación: Web Agent vs Otras Alternativas
¿Cómo se compara esto con lo que hay por ahí?
La diferencia honesta: Web Agent es atípico. La mayoría de herramientas de agentes de IA son extensiones de IDE (Claude Code) o servicios en la nube personalizados (V0, Cursor). Web Agent repiensa dónde vive el agente: en el navegador, bajo tu control, sin requisitos computacionales previos. Eso importa.
Uso en el Mundo Real: Cómo lo Usamos
Aquí hay una muestra representativa de cómo usamos Web Agent internamente:
Gestión Diaria del Blog Enrutamos nuestro flujo de trabajo editorial a través de un canal de Telegram conectado a Web Agent. El agente lee nuestro blog de Directus, identifica borradores listos para revisión, los formatea para publicación, programa publicaciones en 5 idiomas y marca cualquier cosa que necesite atención humana.
Investigación y Compilación de Conocimiento
Colocamos materiales crudos (videos, PDFs, notas de competidores) en el espacio de trabajo del agente, luego ejecutamos /wiki-sync para que el agente lo sintetice en una bóveda de conocimientos estructurada — el mismo patrón de Cerebro Segundo de Karpathy que comentamos públicamente. La diferencia: sucede automáticamente en el navegador, no mediante ingeniería de indicaciones manual en Claude Code.
Automatización Programada Los trabajos cron ejecutan el agente en segundo plano contra su entorno Node.js integrado. Uno hace por las noches: "explora esta carpeta en busca de nuevos diseños, genera texto alternativo usando visión y agrégalo a un registro de cambios". Todo dentro de la pestaña del navegador, sin servidor externo requerido.
Campo de Juego Experimental Cada perfil es un espacio de trabajo desechable. Probar un nuevo repositorio git, ejecutar un experimento con una API nueva, construir un prototipo rápido — crea un perfil nuevo, trabaja, exporta o descarta. Nada persiste a menos que quieras.
Código Abierto y Comunidad
Web Agent tiene licencia MIT. Lo construimos para ser lo más hackeable posible:
- Extensiones de capacidades integradas: Coloca una carpeta bajo
src/capabilities/{tools,providers,channels,skills}/y reconstruiré; el sistema la descubre y carga automáticamente - Acceso completo a los componentes internos del agente: el tiempo de ejecución integrado es TypeScript simple compilado a ESM; explóralo, modifícalo, reconstruyelo
- Sin características cerradas: todo en el repositorio está disponible en la demostración pública, sin tarjeta de crédito, sin invitación
Nos encantan sus contribuciones. Si has construido una habilidad interesante, un nuevo proveedor de herramientas o un flujo de trabajo creativo, abre una solicitud de extracción o abre un issue para contarnos.
Repositorio: https://github.com/nikola66/web-agent Demo en vivo: https://webagent.aratech.ae Apoyo (si quieres invitar a un café): http://ko-fi.com/nikola66
Hoja de Ruta: ¿Qué Sigue?
Estamos desarrollando activamente en la rama principal. El lanzamiento v0.0.6 (16 de mayo de 2026) agregó los integrados de la bóveda de conocimientos PARA (/wiki-setup, /wiki-sync, /wiki-search), proyección de memoria más segura y un conjunto de capacidades de investigación web abierta para tareas de descubrimiento profundo.
Hoja de ruta a corto plazo (próximas semanas):
- Más plantillas de habilidades integradas (gestión de Directus, publicación cruzada de blogs, producción de podcasts)
- Lista ampliada de proveedores (OpenAI, DeepSeek y otros compatibles con OpenAI)
- Mayor soporte de perfiles concurrentes
- Suite de pruebas para pruebas de humo de herramientas (en progreso)
- Registro público de habilidades — compartir y descubrir habilidades de la comunidad
Mediano plazo:
- Sistema de complementos para extensiones de nivel espacio de trabajo
- Flujos de trabajo ricos en medios (transcripción de audio, análisis de video, líneas de generación de imágenes)
- Panel de información más profundo: "¿qué ha aprendido este agente sobre mi proyecto?"
- Modos de perfiles compartidos para equipos pequeños
Conclusión
La promesa de los agentes de IA siempre ha sido: flujos de trabajo autónomos que conocen tu contexto, aprenden de tus comentarios y se vuelven más inteligentes con el tiempo. El problema ha sido la fricción — instalación, mantenimiento, aislamiento, confianza.
Web Agent elimina la fricción. Funciona en el navegador, nunca envía tus datos a nuestros servidores, mantiene tus perfiles aislados, construye una base de conocimientos creciente sobre tu trabajo y te da todo el poder de la IA autónoma — sin Docker, sin Python, sin servidor.
No es un juguete. Es el mismo sistema que construimos para nosotros mismos, ahora liberado como código abierto para cualquiera que quiera usarlo, estudiarlo, personalizarlo o aplicarlo a algo en lo que no habíamos pensado.
Nos encantaría escuchar cómo lo usas.
Pruébalo ahora: https://webagent.aratech.ae Mira el código: https://github.com/nikola66/web-agent Dale una estrella al repositorio: ⭐ https://github.com/nikola66/web-agent
¿Qué sigue para ti? Únete a nuestra comunidad, construye una habilidad, comparte tu configuración. Estamos construyendo algo diferente — contigo, no solo para ti.