Sensay.io - Sincronización DOM-Agent

Arquitectura y Componentes

DOM-Agent Sync se implementa como una integración modular para aplicaciones Next.js 15, diseñada para transmitir eventos del DOM a un agente de IA y recibir comandos accionables en tiempo real. En el núcleo están un hook React y un componente de integración: useAgentDomBridge (captura de eventos, debounce, generación de selectores) y DomAgentIntegration (montaje, ciclo de vida, retroalimentación visual). Módulos utilitarios como dom-utils.ts y contratos tipados en dom-agent.ts proporcionan generación determinista de selectores, mapeo del DOM y tipado TypeScript estricto para eventos y comandos.

El flujo de datos va directamente a través de un canal de datos WebRTC para minimizar la latencia: usuario → evento DOM → useAgentDomBridge → WebRTC data channel → agente IA, y de vuelta para comandos. Todos los eventos y acciones del agente pueden registrarse mediante POST en la API /api/log para persistencia, análisis y depuración. La solución incorpora handlers con debounce, requestAnimationFrame para actualizaciones visuales y listeners selectivos para mantener la carga baja en páginas complejas.

Se priorizaron seguridad y fiabilidad: los comandos entrantes se validan con esquemas tipados, la ejecución de selectores se sanea y limita en tamaño, y el manejo de errores garantiza que la página no falle si un comando enviado por el agente está mal formado. Optimizaciones de rendimiento incluyen throttling de eventos, limitación del innerText a 100 caracteres y limpieza automática de timers y listeners para evitar fugas.

Soporte multilenguaje integrado: la integración incluye capas de traducción (dom-agent-translations.ts y archivos por idioma) para que los comandos y descripciones del agente se localicen automáticamente. Esto permite interacciones de voz y chat en varios idiomas sin modificar la lógica central.