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

• Ако използвате AWS Bedrock за вашия AI модел, инсталирайте AWS SDK за JavaScript:

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

Кодовата база за внедряване на Изглед на живо обикновено е разделена: сървърната страна на кода (за управление на сесии и логика на AI агента) се изпълнява в Node.js, а клиентската страна на кода (за рендиране на Изглед на живо) се изпълнява в React приложение, често пакетирано с инструменти като Vite.

Поетапна интеграция: От сесия до поток

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

1. Стартиране на браузър сесия и генериране на URL адреса за Изглед на живо

Първата стъпка се извършва на сървъра на вашето приложение. Тук вашата бекенд логика инициира браузър сесия в Amazon Bedrock AgentCore и сигурно получава необходимия URL адрес за стрийминг на изгледа на живо.

Ще използвате класа Browser от bedrock-agentcore SDK. Този клас обработва сложността на създаването и управлението на изолирани браузър среди в облака. Ключовият резултат от тази стъпка е 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 адреса за Изглед на живо
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('URL за Изглед на живо:', liveViewUrl);

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

// Този `liveViewUrl` ще бъде изпратен до вашия React клиент.

Този URL адрес след това се предава на вашия React фронтенд, който ще го използва за установяване на потока на живо.

2. Рендиране на Изглед на живо във вашето 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 адрес за Изглед на живо...</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 агент</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Само с url={liveViewUrl}, компонентът BrowserLiveView обработва сложните детайли по установяване на WebSocket връзката, консумиране на DCV потока и рендиране на видео потока на живо в рамките на вашите определени размери. Тази минимална JSX интеграция значително опростява разработката на фронтенда, позволявайки ви да се съсредоточите върху потребителското изживяване около агента на живо.

3. Свързване на AI агент за управление на браузъра

Последната стъпка свързва интелигентността на вашия AI агент с действителните браузър действия в изолираната сесия. Докато BrowserLiveView осигурява визуалната обратна връзка, вашият AI агент използва Playwright CDP (Chrome DevTools Protocol), за да взаимодейства програмно с браузъра.

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

// Пример за сървърна страна на кода (продължение от стъпка 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-захранвани приложения, които са не само ефективни, но и прозрачни, подлежащи на одит и лесни за употреба.

Тази възможност е особено трансформативна за приложения, включващи:

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

Възможността за директен стрийминг на браузър сесии от AWS Cloud към клиентски браузъри, заобикаляйки сървъра на приложението за видео потока, предлага значителни предимства по отношение на производителността и мащабируемостта. Тази архитектура минимизира латентността и намалява натоварването на вашата бекенд инфраструктура, което ви позволява да внедрявате изключително отзивчиви и мащабируеми решения за AI агенти.

Чрез приемането на BrowserLiveView вие не просто изграждате AI агенти; вие изграждате доверие, контрол и по-богато потребителско изживяване. Разгледайте възможностите и дайте възможност на вашите потребители с увереност да делегират сложни уеб задачи на интелигентни агенти.