عرضت AWS كيفية تضمين العرض المباشر لوكيل AI في React عبر Bedrock AgentCore

9 апреля 2026 года AWS опубликовала технический разбор, как встроить в React-приложение живой просмотр работы браузерного AI-агента через Amazon Bedrock AgentCore. Вместо режима чёрного ящика пользователь видит в интерфейсе каждый переход, клик и ввод данных, пока агент выполняет задачу.

Зачем нужен Live View Главная идея поста — не в очередной автоматизации браузера, а в прозрачности.

Если агент сам ходит по сайтам, ищет данные, заполняет формы и принимает промежуточные решения, пользователю нужно понимать, что именно происходит на экране. AWS предлагает встроить этот визуальный слой прямо в продукт: в панели React можно показывать удалённую браузерную сессию в реальном времени, не заставляя человека переключаться в консоль, отдельный стриминг-сервис или внешнюю админку.

Пользователям нужна видимость действий агента, чтобы сохранять уверенность и контроль.

Такой подход особенно полезен там, где нужна ручная проверка или аудит: в клиентских кабинетах, внутренних операционных системах, сервисах с чувствительными данными и регулируемых сценариях. В AWS отдельно подчёркивают, что наблюдение за действиями агента снижает недоверие: когда человек видит, как модель открывает нужную страницу, вводит запрос и получает результат, это воспринимается надёжнее, чем сухое текстовое сообщение «задача выполнена». Дополнительно сессии можно записывать в Amazon S3 и потом разбирать их постфактум.

Как устроена схема Архитектура состоит из трёх частей.

На клиенте работает React-приложение с компонентом `BrowserLiveView`, который получает подписанный URL и поднимает постоянное WebSocket-соединение для видеопотока. На сервере приложение создаёт браузерную сессию через Bedrock AgentCore API, управляет её жизненным циклом и генерирует временный SigV4 URL. Сама облачная часть AWS держит изолированную браузерную сессию и отдаёт поток через Amazon DCV, так что отдельную стриминговую инфраструктуру разработчику собирать не нужно.

Важный нюанс в том, что видео не проходит через сервер приложения. Бэкенд только запускает сессию, подписывает временный URL и связывает клиента с нужным сеансом, а сам поток идёт напрямую из AgentCore в браузер пользователя по WebSocket. Это уменьшает задержку, снижает требования к инфраструктуре и избавляет команду от отдельного медиасервиса или собственного проксирования видеотрафика.

В базовой схеме AWS предлагает такой путь: сервер стартует браузерную сессию и генерирует Live View URL React-компонент `BrowserLiveView` рендерит поток в интерфейсе AI-агент управляет браузером через `PlaywrightBrowser` модель вызывает инструменты вроде `navigate`, `click`, `type` и `getText` * пользователь видит каждое действие в реальном времени Для запуска достаточно трёх основных шагов: создать сессию, передать во фронтенд подписанный URL и отрисовать компонент с теми же размерами viewport, что были заданы на сервере. AWS отдельно предупреждает: если `remoteWidth` и `remoteHeight` не совпадут с параметрами сессии, интерфейс получит обрезание картинки или чёрные поля. Для примера в посте используется разрешение 1920 на 1080 и TTL ссылки 300 секунд по умолчанию.

Что есть в примере Вместе с гайдом AWS выложила готовое demo-приложение на GitHub.

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

В образце используется Amazon Bedrock Converse API, а в качестве движка можно выбрать Anthropic Claude, Amazon Nova или другую модель Bedrock с поддержкой tool use. Для фронтенда проект собран на Vite, и тут есть ещё один практический момент: `BrowserLiveView` опирается на Amazon DCV Web Client SDK, поэтому в конфиге сборщика нужны alias, dedupe зависимостей и копирование runtime-файлов в build. Для локального запуска AWS советует использовать только временные креды, а для production сразу добавлять аутентификацию, HTTPS, ограничения CORS и rate limiting.

Что это значит AWS двигает браузерных AI-агентов из режима фоновой

автоматизации в сторону наблюдаемого интерфейса, где человеку проще доверять системе и вовремя вмешаться. Для команд, которые строят агентные продукты на React, это снижает порог запуска: можно взять готовый компонент, подключить облачный браузер и быстро собрать опыт, в котором действия модели видны не только разработчику, но и конечному пользователю.