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

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

Решая эту фундаментальную проблему, Amazon Web Services представляет мощное решение: компонент Amazon Bedrock AgentCore BrowserLiveView. Этот инновационный инструмент позволяет разработчикам встраивать живой, видеопоток в реальном времени сессии браузера AI-агента непосредственно в свои React-приложения. Эта интеграция не только развеивает мифы о поведении агента, но и предоставляет пользователям беспрецедентную видимость и решающее ощущение контроля.

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

Повышение прозрачности AI-агентов с помощью BrowserLiveView

В современном быстро развивающемся ландшафте Агентского ИИ возможность делегировать задачи веб-серфинга AI-агентам обещает огромный выигрыш в эффективности. Однако это обещание часто омрачается опасениями относительно надежности, точности и безопасности агентов. Без четкого окна в операции агента пользователи вынуждены доверять системе, которую они не могут наблюдать, что может препятствовать принятию и ограничивать развертывание в чувствительных сценариях.

Компонент BrowserLiveView непосредственно решает эту проблему, открывая 'глаза' AI-агента для пользователя. Представьте себе AI-агента, которому поручено заполнить сложную онлайн-форму или получить конкретную информацию с нескольких веб-сайтов. Традиционно пользователь получал бы только конечный результат или сводку действий, оставляя его гадать о промежуточных шагах. Благодаря встроенному Live View пользователи могут следить за каждой навигацией, отправкой формы и поисковым запросом в реальном времени, когда агент их выполняет.

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

Архитектура, лежащая в основе наблюдения за агентами в реальном времени

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

Взаимодействие начинается с веб-браузера пользователя, который запускает ваше React-приложение. В этом приложении компонент BrowserLiveView отображается, ожидая безопасный, ограниченный по времени предварительно подписанный SigV4 URL. Этот URL, сгенерированный вашим сервером приложений, является ключом к установлению постоянного WebSocket-соединения непосредственно со службой Bedrock AgentCore в облаке AWS.

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

Основная работа по автоматизации браузера и потоковой передаче видео происходит в облаке AWS. Amazon Bedrock AgentCore размещает изолированные облачные сессии браузера, предоставляя как конечную точку автоматизации, с которой ваш AI-агент взаимодействует с использованием Playwright Chrome DevTools Protocol (CDP), так и конечную точку потоковой передачи Live View, работающую на базе Amazon DCV. Такая конструкция гарантирует, что поток Live View DCV поступает напрямую из Amazon Bedrock AgentCore в браузер пользователя. Это прямое WebSocket-соединение обходит ваш сервер приложений, минимизируя задержки, снижая накладные расходы на вашу инфраструктуру и обеспечивая плавный просмотр в реальном времени.

Предварительные условия для развертывания вашего живого AI-агента

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

1. Среда Node.js: Вам потребуется Node.js версии 20 или новее, установленная в вашей системе, для запуска серверных компонентов вашего приложения.
2. Учетная запись AWS и регион: Требуется активная учетная запись AWS с доступом к поддерживаемому региону AWS, где доступен Amazon Bedrock AgentCore.
3. Учетные данные и разрешения AWS: Ваши учетные данные AWS должны иметь соответствующие разрешения Amazon Bedrock AgentCore Browser. Крайне важно следовать принципу наименьших привилегий при настройке разрешений AWS Identity and Access Management (IAM). Для повышения безопасности всегда используйте временные учетные данные, полученные из AWS IAM Identity Center или AWS Security Token Service (AWS STS), избегая долгосрочных ключей доступа.
4. Доступ к AI-модели: Если вы планируете использовать AI-модель для управления агентом (как показано в примере, который использует Amazon Bedrock Converse API с Anthropic Claude), вам потребуется доступ к этой конкретной модели и любым связанным с ней разрешениям AWS Bedrock. Однако помните, что сам Live View не зависит от модели, что позволяет вам интегрировать любого поставщика моделей или фреймворк агентов по вашему выбору.
5. Установка SDK:
   • Установите bedrock-agentcore TypeScript SDK для взаимодействия с AgentCore:

     npm install bedrock-agentcore
     

   • Если вы используете AWS Bedrock для вашей AI-модели, установите AWS SDK для JavaScript:

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

Кодовая база для реализации Live View обычно разделена: серверный код (для управления сессиями и логики AI-агента) запускается в Node.js, а клиентский код (для отображения Live View) запускается в React-приложении, часто с использованием таких инструментов, как Vite.

Пошаговая интеграция: от сессии к потоку

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

1. Запуск сессии браузера и генерация URL Live View

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

Вы будете использовать класс Browser из SDK bedrock-agentcore. Этот класс обрабатывает сложность создания и управления изолированными средами браузера в облаке. Ключевым результатом этого шага является предварительно подписанный SigV4 URL, который предоставляет безопасный, временный доступ к живому видеопотоку сессии браузера.

// Пример кода на стороне сервера (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Инициализируйте клиент Bedrock AgentCore (убедитесь, что учетные данные AWS настроены правильно)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Используйте желаемый регион

async function startLiveSession() {
    // Создайте новую сессию браузера
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Сгенерируйте URL Live View
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Сохраните browser.sessionId, чтобы позже подключить вашего AI-агента или завершить сессию
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Этот liveViewUrl будет отправлен вашему React-клиенту.

Этот URL затем передается вашему React-фронтенду, который будет использовать его для установления живого потока.

2. Отображение Live View в вашем React-приложении

Как только ваше React-приложение получает liveViewUrl от вашего сервера, отображение потока в реальном времени становится удивительно простым, благодаря компоненту BrowserLiveView.

// Пример кода на стороне клиента (компонент React)
import React, { useEffect, useState } from 'react';
import { BrowserLiveView } from 'bedrock-agentcore';

interface LiveAgentViewerProps {
    liveViewUrl: string;
}

const LiveAgentViewer: React.FC<LiveAgentViewerProps> = ({ liveViewUrl }) => {
    if (!liveViewUrl) {
        return <p>Waiting for Live View URL...</p>;
    }

    return (
        <div style={{ width: '100%', height: '600px', border: '1px solid #ccc' }}>
            <BrowserLiveView url={liveViewUrl} />
        </div>
    );
};

// В вашем основном компоненте App или на странице:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Получите liveViewUrl с вашего бэкенда
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>AI Agent Live View</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Всего лишь с url={liveViewUrl} компонент BrowserLiveView обрабатывает сложные детали установления WebSocket-соединения, потребления потока DCV и рендеринга живого видеопотока в указанных вами размерах. Эта минимальная интеграция JSX значительно упрощает разработку фронтенда, позволяя вам сосредоточиться на пользовательском опыте вокруг живого агента.

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

Заключительный шаг соединяет интеллект вашего AI-агента с фактическими действиями браузера в изолированной сессии. В то время как BrowserLiveView обеспечивает визуальную обратную связь, ваш AI-агент использует Playwright CDP (Chrome DevTools Protocol) для программного взаимодействия с браузером.

Ваш сервер приложений, который также размещает вашего AI-агента, будет использовать свойство page объекта Browser (которое является объектом Playwright Page) для выполнения действий браузера.

// Пример кода на стороне сервера (продолжение из шага 1)
// Предполагается, что у вас есть Playwright-подобный интерфейс или прямое использование Playwright
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (предыдущая настройка для создания браузера) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Переподключение к существующей сессии
    await browser.connect(); // Подключение к сессии браузера

    const page = browser.page; // Получите объект Playwright Page

    // Пример логики AI-агента (упрощено для иллюстрации)
    // Здесь вы бы интегрировались с вашей LLM (например, Anthropic Claude через Bedrock Converse API)
    // для определения действий на основе подсказок пользователя и содержимого страницы.
    console.log("Agent navigating to example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent waited for 3 seconds...");
    await page.waitForTimeout(3000); // Имитация времени обработки

    console.log("Agent typing into a search box (hypothetical)...");
    // Пример: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Пример: await page.click('#search-button');

    const content = await page.content();
    // Используйте LLM для анализа 'content' и принятия решения о дальнейших шагах
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // или ваша предпочтительная модель
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analyze this webpage content and suggest the next action: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("AI Model suggested action:", parsedBody.content[0].text);

    // На основе предложения LLM, выполните дальнейшие действия на странице...

    // Не забудьте закрыть сессию браузера по завершении
    // await browser.close();
}

// После запуска сессии и получения URL, вызовите driveAgent(sessionId)

Этот цикл взаимодействия — где ваш AI-агент анализирует содержимое страницы, определяет следующее действие и выполняет его через Playwright CDP — формирует основу автономного агента для браузера. Все эти действия визуально отображаются в реальном времени через компонент BrowserLiveView на экране пользователя.

Открытие новых возможностей с помощью встроенных AI-агентов

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

Эта возможность особенно преобразует приложения, включающие:

• Сложные рабочие процессы: Автоматизация многошаговых онлайн-процессов, таких как ввод данных, онбординг или соблюдение нормативных требований, где видимость каждого шага имеет первостепенное значение.
• Поддержка клиентов: Позволяет агентам наблюдать за AI-копилотами, решающими запросы клиентов или навигирующими по системам, обеспечивая точность и предоставляя возможности для вмешательства.
• Обучение и отладка: Предоставляет разработчикам и конечным пользователям мощный инструмент для понимания поведения агентов, отладки проблем и обучения агентов через прямое наблюдение.
• Расширенные журналы аудита: Генерация визуальных записей действий агента, которые могут быть объединены с записями сессий в Amazon S3 для всестороннего последующего анализа и соблюдения требований.

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

Внедряя BrowserLiveView, вы не просто создаете AI-агентов; вы строите доверие, контроль и более богатый пользовательский опыт. Исследуйте возможности и дайте своим пользователям уверенность в том, что они могут делегировать сложные веб-задачи интеллектуальным агентам.