Sensay.io - DOM-Agent Синхронізація

Архітектура та компоненти

DOM-Agent Sync реалізовано як модульну інтеграцію для додатків Next.js 15, що передає події DOM до AI-агента та отримує керовані команди в реальному часі. В основі — React hook та компонент інтеграції: useAgentDomBridge (збір подій, debounce, генерація селекторів) та DomAgentIntegration (монтування, життєвий цикл, візуальний зворотний зв'язок). Утиліти на кшталт dom-utils.ts та типи в dom-agent.ts забезпечують детерміновану генерацію селекторів, карту DOM та суворе TypeScript-типізування для подій і команд агента.

Потік даних йде напряму через WebRTC data channel для мінімальної латентності: користувач → DOM-подія → useAgentDomBridge → WebRTC → AI агент, і назад для команд. Всі події та дії агента опціонально логуються через POST до API /api/log для збереження, аналітики та налагодження. Використовуються debounced обробники, requestAnimationFrame для плавних оновлень та селективні слушачі, щоб знизити навантаження на складних сторінках.

Пріоритет — безпека та надійність: вхідні команди валідовуються за схемами, виконання селекторів перевіряється і обмежується за розміром, а обробка помилок не дозволяє сторінці впасти при некоректних командах. Для продуктивності застосовано throttling подій, обмеження innerText до 100 символів і автоочищення таймерів та обробників.

Багатомовна підтримка вбудована: інтеграція постачається зі шарами перекладів (dom-agent-translations.ts та мовні файли), що дозволяє автоматично локалізувати команди й описи агента. Додавання нових мов — це просто додавання файлу перекладу без змін у ядрі.