Sensay.io - DOM-Agent Sync

Architecture & Components

The DOM-Agent Sync is implemented as a modular integration for Next.js 15 applications designed to stream DOM events to an AI agent and receive actionable commands in real time. At its core are a React hook and a lightweight integration component: useAgentDomBridge (event capture, debounce, selector generation) and DomAgentIntegration (mounting, lifecycle, visual feedback). Utility modules such as dom-utils.ts and typed contracts in dom-agent.ts provide deterministic selector generation, DOM mapping and strict TypeScript typing for events and agent commands.

Data flows directly over a WebRTC data channel to minimize latency: user → DOM event → useAgentDomBridge → WebRTC data channel → AI agent, and back for commands. All events and agent actions are optionally POSTed to the server API at /api/log for persistence, analytics and debugging. The system supports debounced handlers, requestAnimationFrame for visual updates, and selective listeners to keep overhead low on complex pages.

Security and robustness were prioritized: incoming commands are validated against type schemas, selector execution is sanitized and size-limited, and error handling ensures the page never breaks if an agent-sent command is malformed. Performance optimizations include event throttling, limiting innerText capture to 100 characters, and auto-cleanup of timers and listeners to prevent leaks.

Multilingual support is built-in. The integration ships with translation layers (dom-agent-translations.ts and language files) so agent commands and descriptions are automatically localized and can be extended by adding translation modules. This enables localized voice and chat interactions as well as translated agent prompts without changing core logic.