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

• Якщо ви використовуєте AWS Bedrock для вашої моделі ШІ, встановіть 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 Cloud.

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

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

Ви будете використовувати клас Browser з SDK bedrock-agentcore. Цей клас обробляє складність створення та керування ізольованими середовищами браузера в хмарі. Ключовим результатом цього кроку є попередньо підписана URL-адреса SigV4, яка надає безпечний, тимчасовий доступ до живого відеопотоку сеансу браузера.

// Приклад серверного коду (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>Очікування URL-адреси Live View...</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>Live View AI агента</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("Агент переходить на example.com...");
    await page.goto('https://www.example.com');
    console.log("Агент чекав 3 секунди...");
    await page.waitForTimeout(3000); // Симулювати час обробки

    console.log("Агент вводить текст у поле пошуку (гіпотетично)...");
    // Приклад: 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: `Проаналізуйте вміст цієї веб-сторінки та запропонуйте наступну дію: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("AI модель запропонувала дію:", 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 Cloud до клієнтських браузерів, минаючи сервер додатків для відеопотоку, пропонує значні переваги з точки зору продуктивності та масштабованості. Ця архітектура мінімізує затримки та зменшує навантаження на вашу бекенд-інфраструктуру, дозволяючи вам розгортати високочутливі та масштабовані рішення AI агента.

Прийнявши BrowserLiveView, ви не просто створюєте AI агентів; ви створюєте довіру, контроль та більш насичений користувацький досвід. Досліджуйте можливості та надайте своїм користувачам впевненість делегувати складні веб-завдання інтелектуальним агентам.