Внедрение живого AI-агента браузера в React-приложение с Amazon Bedrock

При создании приложений с использованием ИИ, пользователи должны понимать и доверять ИИ-агентам, которые взаимодействуют с веб-контентом от их имени. Когда агент автономно взаимодействует с веб-контентом, пользователям необходима видимость этих действий для поддержания уверенности и контроля. Компонент BrowserLiveView от Amazon Bedrock AgentCore решает эту задачу, предоставляя потоковое видео сессии просмотра агента в реальном времени прямо в вашем React-приложении.

Этот компонент, являющийся частью TypeScript SDK Bedrock AgentCore, упрощает интеграцию, внедряя живой поток браузера с помощью трех строк JavaScript XML (JSX). Компонент BrowserLiveView использует протокол Amazon DCV для отображения сессии браузера, создавая прозрачность в действиях агента. Реализация требует только предварительно подписанного URL с вашего сервера, без необходимости создания инфраструктуры потоковой передачи.

В этой статье описаны три шага: запуск сессии и генерация URL для Live View, рендеринг потока в вашем React-приложении и подключение ИИ-агента, который управляет браузером, пока пользователи наблюдают. В конце вы получите рабочее примерное приложение, которое сможете клонировать и запустить.

Внедрение Live View в ваше приложение открывает дополнительную ценность для пользователей в масштабах. С встроенным Live View пользователи могут следить за каждой навигацией, отправкой форм и поисковыми запросами, которые выполняет агент. Они получают мгновенное визуальное подтверждение того, что агент находится на правильной странице, взаимодействует с нужными элементами и продвигается по рабочему процессу. Этот обратный поток обратной связи дает конечным пользователям прямое понимание поведения агента без ожидания окончательного результата.

Пользователи, которые делегируют задачи просмотра ИИ-агенту, чувствуют себя более уверенно, когда могут наблюдать за работой. Наблюдение за тем, как агент заполняет форму по полям, более успокаивает, чем получение текстового подтверждения. Для регулируемых рабочих процессов визуальные доказательства действий агента могут поддерживать требования аудита. В рабочих процессах, требующих человеческого контроля, таких как обработка клиентских аккаунтов и работа с чувствительными данными, супервайзер может использовать встроенный Live View для наблюдения за агентом в реальном времени и вмешаться при необходимости, не покидая ваше приложение.

Организации также получают поддержку аудиторских следов через визуальные доказательства действий агента, что оказывается ценным для соблюдения требований и сценариев устранения неполадок. В сочетании с записями сессий в Amazon Simple Storage Service (Amazon S3) и воспроизведением сессий на консоли вы получаете как реальное наблюдение, так и последующий обзор.

Интеграция состоит из трех компонентов. Веб-браузер пользователя запускает React-приложение, содержащее компонент BrowserLiveView, который получает предварительно подписанный URL и устанавливает постоянное соединение WebSocket для получения видео потока DCV из удаленной сессии браузера. React-приложение обрабатывает рендеринг видео и представление пользовательского интерфейса, поддерживая соединение WebSocket для непрерывной потоковой передачи. Сервер приложения функционирует как ИИ-агент в рамках жизненного цикла сессии Amazon Bedrock, организуя соединение между клиентскими браузерами и облачными сессиями браузеров.