Новости

Как встроить live browser agent в React-приложение с Amazon Bedrock AgentCore

Когда вы создаете AI-приложения, пользователи должны понимать и доверять AI-агентам, которые переходят по сайтам и взаимодействуют с веб-контентом от их имени. Если агент автономно работает с веб-страницами, пользователям нужна прозрачность в этих действиях, чтобы сохранять уверенность и контроль, которых у них сейчас нет.

Компонент Amazon Bedrock AgentCore Browser BrowserLiveView решает эту задачу, показывая потоковое видео сессии браузера агента прямо внутри вашего React-приложения. Этот компонент, входящий в Bedrock AgentCore TypeScript SDK, упрощает интеграцию и позволяет встроить live browser stream всего тремя строками JSX.

Компонент BrowserLiveView использует протокол Amazon DCV для отображения браузерной сессии, обеспечивая прозрачность действий агента. Для внедрения нужен только presigned URL с вашего сервера — вам не требуется строить собственную streaming-инфраструктуру.

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

Зачем встраивать Live View в приложение

Встраивание Live View в собственное приложение дает дополнительную ценность пользователям в масштабе.

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

Пользователи, которые делегируют задачи по навигации AI-агенту, чувствуют себя увереннее, когда могут наблюдать за работой. Смотреть, как агент заполняет форму по полям, спокойнее, чем получать только текстовое подтверждение. Для регламентированных процессов визуальные доказательства действий агента могут поддержать audit requirements.

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

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

Как это работает

Интеграция состоит из трех компонентов.

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

Application server выступает как AI-агент в жизненном цикле сессии Amazon Bedrock, координируя связь между клиентскими браузерами и облачными браузерными сессиями. Он запускает сессии через Amazon Bedrock AgentCore API и генерирует SigV4-presigned URL, которые дают безопасный ограниченный по времени доступ к Live View stream. Этот слой обрабатывает управление сессиями, аутентификацию и распределение потока.

AWS Cloud размещает Amazon Bedrock AgentCore Browser и сервисы Amazon Bedrock, которые обеспечивают базовые возможности browser automation и streaming. Amazon Bedrock AgentCore размещает изолированные cloud browser sessions внутри AWS Cloud и предоставляет как automation endpoint (Playwright CDP), так и Live View streaming endpoint (DCV).

Ключевое преимущество этой архитектуры в том, что DCV Live View stream идет напрямую от Amazon Bedrock AgentCore к браузеру пользователя. Он не проходит через ваш application server. Ваш сервер генерирует URL и запускает агента, но видеопоток идет по прямому WebSocket-соединению из AWS к клиенту. Это помогает снизить задержку и уменьшить требования к инфраструктуре.

Figure 1: Solution architecture showing the data flow between three components. The numbered arrows in the diagram represent the following data flows: Arrow 1 (gray, solid): The client sends prompts and polls status from the Application Server using REST. Arrow 2 (orange, solid): The Application Server calls the Amazon Bedrock Converse API for AI model reasoning. Arrow 3 (blue, solid): The Application Server runs browser tools against Amazon Bedrock AgentCore Browser using Playwright Chrome DevTools Protocol (CDP). Arrow 4 (red, dashed): The DCV Live View stream flows directly from Amazon Bedrock AgentCore to the User Browser, bypassing the Application Server.

Требования

Перед началом убедитесь, что у вас есть следующее:

Важно: Для Live View (шаги 1 и 2) нужны только Amazon Bedrock AgentCore permissions. Он не зависит от Amazon Bedrock или какой-либо конкретной AI-модели. AI-агент на шаге 3 использует Amazon Bedrock Converse API, для которого нужны дополнительные права Amazon Bedrock, но это относится только к нашему sample. Вы можете подставить любой model provider или agent framework по своему выбору. Используйте временные учетные данные из AWS IAM Identity Center или AWS Security Token Service (AWS STS). Не используйте long-lived access keys. При настройке разрешений AWS Identity and Access Management (IAM) следуйте принципу наименьших привилегий.

Установите Amazon Bedrock AgentCore TypeScript SDK:

npm install bedrock-agentcore

Для AI-агента на шаге 3 также нужен AWS SDK for JavaScript:

npm install @aws-sdk/client-bedrock-runtime

Код в этой статье работает в двух средах: server-side код (шаги 1 и 3) выполняется в Node.js, а client-side код (шаг 2) — в React-приложении, собранном с помощью Vite. Sample application в конце статьи объединяет все это в одном пакете.

Пошаговая реализация

1: Запустите browser session и сгенерируйте Live View URL

На application server используйте класс Browser, чтобы запустить сессию и сгенерировать presigned URL. API возвращает идентификатор сессии и streaming URL, который сервер преобразует в presigned URL со сроком действия 300 секунд по умолчанию. В query parameters содержатся SigV4 credentials, поэтому секреты не попадают в браузер. Передайте этот URL на frontend через API endpoint.

import { Browser } from 'bedrock-agentcore/browser'

const browser = new Browser({
 region: 'us-west-2'
})
await browser.startSession({
 viewport: { width: 1920, height: 1080 }
})

const signedUrl =
 await browser.generateLiveViewUrl()
// Send signedUrl to your frontend via API

2: Отобразите компонент BrowserLiveView в React-приложении

В браузере импортируйте компонент BrowserLiveView из Bedrock AgentCore TypeScript SDK и отрисуйте его с помощью presigned URL. Компонент обрабатывает WebSocket-соединение, negotiation протокола DCV, декодирование видеопотока и рендеринг кадров. Он автоматически масштабируется под размер родительского контейнера, сохраняя соотношение сторон. Значения remoteWidth и remoteHeight должны совпадать с viewport, который вы задали на шаге 1. Несовпадение приводит к обрезке изображения или черным полям.

import { BrowserLiveView }
 from 'bedrock-agentcore/browser/live-view'

<BrowserLiveView
 signedUrl={presignedUrl}
 remoteWidth={1920}
 remoteHeight={1080}
/>

После добавления этого компонента Live View начинает потоковую передачу, как только presigned URL становится действительным, а browser session активна. Вы должны увидеть рабочий стол удаленного браузера внутри контейнера компонента. Если контейнер остается пустым, проверьте, не истек ли срок действия presigned URL и работает ли browser session.

3: Подключите AI-агента для управления действиями браузера

Когда Live View уже транслируется, нужен интересный процесс для наблюдения. В приведенном примере используется Amazon Bedrock Converse API, но Live View не зависит от модели. Для управления браузером можно использовать любую AI-модель или agent framework по своему выбору.

Код создает клиент PlaywrightBrowser, который запускает новую AgentCore Browser session и подключается к ней через Playwright Chrome DevTools protocol. Это та же cloud browser session, что и на шаге 1, но доступ к ней идет через интерфейс автоматизации Playwright, а не через интерфейс Live View.

Модель сама решает, какие browser tools вызывать, включая navigate, click, type, getText, getHtml и pressKey. Ваш сервер выполняет эти инструменты и передает результаты обратно в модель для следующей итерации.

import { BedrockRuntimeClient, ConverseCommand }
 from '@aws-sdk/client-bedrock-runtime'
import { PlaywrightBrowser }
 from 'bedrock-agentcore/browser/playwright'

const browser = new PlaywrightBrowser({
 region: 'us-west-2'
})
await browser.startSession()

// Define browser tools as JSON Schema
// (navigate, click, type, getText, and more)
while (step < maxSteps) {
 const response = await bedrockClient.send(
 new ConverseCommand({
 modelId: modelId,
 system: [{ text: systemPrompt }],
 messages,
 toolConfig: browserTools,
 })
 )
 if (response.stopReason === 'tool_use') {
 // Run browser tool, add result
 // to conversation, continue loop
 } else {
 break // Final answer from model
 }
}

Модель можно настроить. Вы можете использовать Anthropic Claude, Amazon Nova или любую модель Amazon Bedrock, поддерживающую tool use. Каждый вызов инструмента, который делает модель, виден пользователю через Live View. Пользователь видит, как браузер переходит по страницам, заполняется поле поиска и загружается страница результатов.

Примечание: В TypeScript SDK также есть интеграция с Vercel AI SDK integration (BrowserTools), которая оборачивает эти browser operations в framework-native tools.

Попробуйте на sample application

Мы подготовили complete sample application на GitHub, которая объединяет шаги 1–3. В sample есть React-dashboard со встроенным Live View, activity log с reasoning и действиями агента, а также Fastify server, на котором работает AI-агент. Агент переходит в Wikipedia, ищет тему, читает содержимое страницы и суммирует найденное, пока вы наблюдаете за каждым шагом. Скачать его можно из GitHub repository.

Figure 2: Sample application в процессе работы. В левой панели показан компонент BrowserLiveView, который транслирует страницу Wikipedia, куда перешел агент. В правой панели виден activity log с отметками времени для вызовов инструментов (navigate, getText, click). Внизу отображаются поле ввода prompt и кнопка Launch Agent.

Чтобы клонировать и запустить sample application

Выполните следующие шаги, чтобы клонировать и запустить sample application.

  1. Склонируйте репозиторий и перейдите в папку sample.

git clone https://github.com/awslabs/bedrock-agentcore-samples-typescript.git
cd bedrock-agentcore-samples-typescript
cd use-cases/browser-live-view-agent
  1. Установите зависимости.

npm install
  1. Экспортируйте учетные данные AWS.

export AWS_ACCESS_KEY_ID=<your-access-key>
export AWS_SECRET_ACCESS_KEY=<your-secret-key>
export AWS_SESSION_TOKEN=<your-session-token>
export AWS_REGION=us-west-2

Важно: Используйте временные учетные данные. Не коммитьте credentials в source control.

  1. Запустите приложение. 

    npm run dev
  1. Откройте http://localhost:5173, введите prompt и выберите Launch Agent.

Bundler configuration

Компонент BrowserLiveView использует Amazon DCV Web Client SDK, который поставляется с vendored files внутри npm-пакета bedrock-agentcore. Отдельно скачивать или устанавливать DCV не нужно. Для конфигурации Vite требуются три добавления:

  • resolve.alias указывает bare specifiers dcv и dcv-ui на vendored SDK files.
  • resolve.dedupe проверяет, что React и общие зависимости разрешаются из вашего node_modules, а не из vendored path.
  • viteStaticCopy копирует DCV runtime files (workers, WASM decoders) в output сборки.

В vite.config.ts из sample application уже есть полная готовая конфигурация. Подробнее о компоненте BrowserLiveView см. в live-view source directory в TypeScript SDK.

Очистка ресурсов

Чтобы не нести лишние расходы, после завершения остановите browser session и закройте приложение:

  1. В интерфейсе приложения выберите Stop Session, чтобы завершить Amazon Bedrock AgentCore Browser session.
  2. В терминале нажмите Ctrl+C, чтобы остановить development servers.
  3. Если для этого демо вы создавали отдельные IAM roles или policies, удалите их в консоли IAM.

Сессии Amazon Bedrock AgentCore Browser тарифицируются, пока они активны. Подробности о ценах см. на странице Amazon Bedrock AgentCore pricing page.

Что дальше

Теперь, когда у вас есть working Live View integration, вот что можно исследовать дальше.

Для начала склонируйте sample application, подставьте ваши AWS credentials и запустите npm run dev, чтобы увидеть полный demo в действии. Инструкции есть в разделе To clone and run the sample application в этой статье.

По умолчанию sample application использует Anthropic Claude, но вы можете переключиться на Amazon Nova или другую модель Amazon Bedrock с поддержкой tool use, задав переменную окружения BEDROCK_MODEL_ID. Список доступных моделей и их возможностей tool use см. в Amazon Bedrock model documentation.

React-dashboard из sample application — это отправная точка для собственной реализации. Вы можете адаптировать layout под свой design system, встроить Live View в существующее приложение или добавить элементы управления, позволяющие пользователям вмешиваться в середине workflow. За рекомендациями по созданию React-приложений с AgentCore SDK обратитесь к Bedrock AgentCore TypeScript SDK documentation.

Компонент BrowserLiveView поддерживает несколько экземпляров на одной странице, каждый из которых транслирует отдельную browser session. Это полезно для monitoring dashboards. Исходный код компонента, включая логику масштабирования и DCV authentication flow, доступен в live-view source directory в TypeScript SDK.

Заключение

В этой статье вы узнали, как использовать компонент BrowserLiveView, чтобы встроить Live View сессии Amazon Bedrock AgentCore Browser в React-приложение. Трехшаговая реализация и архитектура, которая передает видео напрямую из AWS в браузеры клиентов, делает live visualization действий агента доступной без специальной streaming-экспертизы.

Чтобы глубже изучить возможности Amazon Bedrock AgentCore Browser, обратитесь к Amazon Bedrock AgentCore Browser documentation. Если у вас есть вопросы или отзывы, откройте issue в GitHub repository.

Важно: Этот sample application предназначен для локальной разработки и демонстрации. Для production use добавьте аутентификацию к API endpoints, включите HTTPS, ограничьте CORS origins, реализуйте rate limiting и следуйте security pillar AWS Well-Architected Framework.

Материал — перевод статьи с английского.

Оригинал: Embed a live AI browser agent in your React app with Amazon Bedrock AgentCore

Подписаться на новости в Telegram

Больше записей