Bedrock AgentCore: Vložte živého AI prehliadača do Reactu

• Ak používate AWS Bedrock pre váš AI model, nainštalujte AWS SDK pre JavaScript:

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

Kódová základňa pre implementáciu Live View je zvyčajne rozdelená: kód na strane servera (pre správu relácií a logiku AI agenta) beží v Node.js a kód na strane klienta (pre vykresľovanie Live View) beží v rámci React aplikácie, často balený nástrojmi ako Vite.

Krok za krokom integrácia: Od relácie k streamu

Integrácia živého AI prehliadača s Amazon Bedrock AgentCore zahŕba jasný, trojkrokový proces, ktorý prepojí vašu logiku na strane servera s vašou klientskou React aplikáciou a robustnými schopnosťami AWS Cloud.

1. Spustenie prehliadacej relácie a generovanie URL adresy Live View

Prvý krok prebieha na vašom aplikačnom serveri. Tu vaša backendová logika inicializuje prehliadaciu reláciu v rámci Amazon Bedrock AgentCore a bezpečne získa potrebnú URL adresu na streamovanie živého zobrazenia.

Použijete triedu Browser z SDK bedrock-agentcore. Táto trieda spracováva zložitosť vytvárania a správy izolovaných prehliadacích prostredí v cloude. Kľúčovým výstupom z tohto kroku je SigV4-predpodpísaná URL adresa, ktorá udeľuje bezpečný, dočasný prístup k živému video streamu prehliadacej relácie.

// Príklad kódu na strane servera (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Inicializujte klienta Bedrock AgentCore (zaistite, aby boli správne nakonfigurované poverenia AWS)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Použite požadovanú oblasť

async function startLiveSession() {
    // Vytvorte novú prehliadaciu reláciu
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Vygenerujte URL adresu Live View
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Uložte browser.sessionId, aby ste neskôr pripojili svojho AI agenta alebo ukončili reláciu
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Táto `liveViewUrl` bude odoslaná vášmu React klientovi.

Táto URL adresa je potom odovzdaná vášmu React frontendu, ktorý ju použije na nadviazanie živého streamu.

2. Vykreslenie Live View vo vašej React aplikácii

Akonáhle vaša React aplikácia prijme liveViewUrl z vášho servera, vykreslenie streamu v reálnom čase je pozoruhodne jednoduché, vďaka komponentu BrowserLiveView.

// Príklad kódu na strane klienta (React komponent)
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>Čakám na URL adresu Live View...</p>;
    }

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

// Vo vašej hlavnej App komponente alebo stránke:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Načítajte liveViewUrl z vášho backendu
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>Živé zobrazenie AI agenta</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Len s url={liveViewUrl}, komponent BrowserLiveView spracováva zložité detaily nadviazania pripojenia WebSocket, konzumácie streamu DCV a vykresľovania živého video streamu v rámci vašich špecifikovaných rozmerov. Táto minimálna JSX integrácia výrazne zjednodušuje vývoj frontendu, čo vám umožňuje sústrediť sa na používateľskú skúsenosť okolo živého agenta.

3. Prepojenie AI agenta na riadenie prehliadača

Posledným krokom je pripojenie inteligencie vášho AI agenta k skutočným akciám prehliadača v izolovanej relácii. Zatiaľ čo BrowserLiveView poskytuje vizuálnu spätnú väzbu, váš AI agent používa Playwright CDP (Chrome DevTools Protocol) na programatickú interakciu s prehliadačom.

Váš aplikačný server, ktorý tiež hostí vášho AI agenta, použije vlastnosť page objektu Browser (čo je objekt Playwright Page) na vykonávanie akcií prehliadača.

// Príklad kódu na strane servera (pokračovanie z kroku 1)
// Predpokladajme, že máte rozhranie podobné Playwright alebo priame použitie Playwright
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (predchádzajúce nastavenie pre vytvorenie prehliadača) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Znovu sa pripojte k existujúcej relácii
    await browser.connect(); // Pripojte sa k prehliadacej relácii

    const page = browser.page; // Získajte objekt Playwright Page

    // Príklad logiky AI agenta (zjednodušená pre ilustráciu)
    // Tu by ste integrovali s vaším LLM (napr. Anthropic Claude cez Bedrock Converse API)
    // na určenie akcií na základe používateľských výziev a obsahu stránky.
    console.log("Agent navigates to example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent waited for 3 seconds...");
    await page.waitForTimeout(3000); // Simulujte čas spracovania

    console.log("Agent typing into a search box (hypothetical)...");
    // Príklad: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Príklad: await page.click('#search-button');

    const content = await page.content();
    // Použite LLM na analýzu 'content' a rozhodnite sa o ďalších krokoch
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // alebo váš preferovaný model
        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);

    // Na základe návrhu LLM vykonajte ďalšie akcie na stránke...

    // Nezabudnite zatvoriť prehliadaciu reláciu po dokončení
    // await browser.close();
}

// Po spustení relácie a získaní URL adresy by ste potom zavolali driveAgent(sessionId)

Táto interakčná slučka – kde váš AI agent analyzuje obsah stránky, určuje ďalšiu akciu a vykoná ju prostredníctvom Playwright CDP – tvorí jadro autonómneho prehliadača. Všetky tieto akcie sú vizuálne vykresľované v reálnom čase prostredníctvom komponentu BrowserLiveView na obrazovke používateľa.

Odomykanie nových možností s vloženými AI agentmi

Integrácia BrowserLiveView z Amazon Bedrock AgentCore je viac než len technická funkcia; je to zmena paradigmy v tom, ako používatelia interagujú s AI agentami a dôverujú im. Vložením vizuálnej spätnej väzby v reálnom čase môžu vývojári vytvárať aplikácie poháňané AI, ktoré sú nielen efektívne, ale aj transparentné, auditovateľné a používateľsky prívetivé.

Táto schopnosť je obzvlášť transformatívna pre aplikácie zahŕňajúce:

• Komplexné pracovné postupy: Automatizácia viacstupňových online procesov, ako je zadávanie dát, onboarding alebo dodržiavanie regulačných predpisov, kde je viditeľnosť každého kroku prvoradá.
• Zákaznícka podpora: Umožnenie agentom sledovať AI co-pilotov, ako riešia zákaznícke otázky alebo navigujú v systémoch, čím sa zaisťuje presnosť a poskytujú príležitosti na zásah.
• Školenie a ladenie: Poskytnutie vývojárom a koncovým používateľom výkonného nástroja na pochopenie správania agenta, ladenie problémov a školenie agentov prostredníctvom priameho pozorovania.
• Vylepšené auditné stopy: Generovanie vizuálnych záznamov o akciách agenta, ktoré možno kombinovať s nahrávkami relácií do Amazon S3 pre komplexné následné preskúmanie a dodržiavanie súladu.

Schopnosť priamo streamovať prehliadacie relácie z AWS Cloud do klientskych prehliadačov, obchádzajúc aplikačný server pre video stream, ponúka významné výhody z hľadiska výkonu a škálovateľnosti. Táto architektúra minimalizuje latenciu a znižuje zaťaženie vašej backendovej infraštruktúry, čo vám umožňuje nasadiť vysoko reagujúce a škálovateľné riešenia AI agentov.

Prijatím BrowserLiveView nielenže vytvárate AI agentov; budujete dôveru, kontrolu a bohatší používateľský zážitok. Preskúmajte možnosti a posilnite svojich používateľov s dôverou delegovať komplexné webové úlohy inteligentným agentom.