Bedrock AgentCore: Vložte živého AI agenta prohlížeče do Reactu

• Pokud používáte AWS Bedrock pro svůj AI model, nainstalujte AWS SDK pro JavaScript:

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

Kódová základna pro implementaci Live View je typicky rozdělena: kód na straně serveru (pro správu relací a logiku AI agenta) běží v Node.js a kód na straně klienta (pro vykreslování Live View) běží v rámci React aplikace, často balené s nástroji jako Vite.

Krok za krokem integrace: Od relace k streamu

Integrace živého AI agenta prohlížeče s Amazon Bedrock AgentCore zahrnuje jasný, třífázový proces, propojující vaši serverovou logiku s vaší klientskou React aplikací a robustními schopnostmi AWS Cloudu.

1. Zahájení relace prohlížeče a generování URL pro Live View

První krok probíhá na vašem aplikačním serveru. Zde vaše backendová logika iniciuje relaci prohlížeče v rámci Amazon Bedrock AgentCore a bezpečně získá potřebnou URL pro streamování živého zobrazení.

Použijete třídu Browser ze SDK bedrock-agentcore. Tato třída zpracovává složitost vytváření a správy izolovaných prohlížecích prostředí v cloudu. Klíčovým výstupem z tohoto kroku je SigV4-předepsaná URL, která uděluje zabezpečený, dočasný přístup k živému video streamu relace prohlížeče.

// Příklad kódu na straně serveru (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Inicializace klienta Bedrock AgentCore (zajistěte správnou konfiguraci AWS přihlašovacích údajů)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Použijte požadovanou oblast

async function startLiveSession() {
    // Vytvoření nové relace prohlížeče
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Generování URL pro Live View
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Uložte browser.sessionId pro pozdější připojení vašeho AI agenta nebo ukončení relace
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Tato `liveViewUrl` bude odeslána vašemu React klientovi.

Tato liveViewUrl bude odeslána vašemu React klientovi, který ji použije k navázání živého streamu.

2. Vykreslování Live View ve vaší React aplikaci

Jakmile vaše React aplikace obdrží liveViewUrl z vašeho serveru, vykreslování streamu v reálném čase je díky komponentě BrowserLiveView pozoruhodně přímočaré.

// Příklad kódu na straně klienta (React komponenta)
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>Čekám na URL pro Live View...</p>;
    }

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

// Ve vaší hlavní komponentě aplikace nebo stránce:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Získání liveViewUrl z vašeho backendu
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>Živý pohled AI agenta</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

S pouhým url={liveViewUrl} komponenta BrowserLiveView zpracovává složité detaily navázání WebSocket připojení, spotřebovávání DCV streamu a vykreslování živého video streamu v rámci vámi určených rozměrů. Tato minimální integrace JSX výrazně zjednodušuje vývoj frontendové části, což vám umožňuje soustředit se na uživatelskou zkušenost kolem živého agenta.

3. Propojení AI agenta pro řízení prohlížeče

Poslední krok propojuje inteligenci vašeho AI agenta se skutečnými akcemi prohlížeče v rámci izolované relace. Zatímco BrowserLiveView poskytuje vizuální zpětnou vazbu, váš AI agent používá Playwright CDP (Chrome DevTools Protocol) k programové interakci s prohlížečem.

Váš aplikační server, který také hostuje vašeho AI agenta, použije vlastnost page objektu Browser (což je objekt Playwright Page) k provádění akcí prohlížeče.

// Příklad kódu na straně serveru (pokračování z kroku 1)
// Předpokládáme, že máte rozhraní podobné Playwrightu nebo přímé použití Playwrightu
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (předchozí nastavení pro vytvoření prohlížeče) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Znovu se připojte k existující relaci
    await browser.connect(); // Připojte se k relaci prohlížeče

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

    // Příklad logiky AI agenta (zjednodušeno pro ilustraci)
    // Zde byste integrovali s vaším LLM (např. Anthropic Claude přes Bedrock Converse API)
    // k určení akcí na základě uživatelských výzev 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); // Simulace doby zpracování

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

    const content = await page.content();
    // Použijte LLM k analýze 'obsahu' a rozhodování o dalších krocích
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // nebo 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ákladě návrhu LLM proveďte další akce na stránce...

    // Nezapomeňte po dokončení zavřít relaci prohlížeče
    // await browser.close();
}

// Po zahájení relace a získání URL byste pak zavolali driveAgent(sessionId)

Tato interakční smyčka – kde váš AI agent analyzuje obsah stránky, určuje další akci a provádí ji prostřednictvím Playwright CDP – tvoří jádro autonomního procházejícího agenta. Všechny tyto akce jsou vizuálně vykreslovány v reálném čase prostřednictvím komponenty BrowserLiveView na obrazovce uživatele.

Otevření nových možností s vloženými AI agenty

Integrace BrowserLiveView od Amazon Bedrock AgentCore je více než jen technická funkce; je to posun paradigmatu v tom, jak uživatelé interagují s AI agenty a důvěřují jim. Vložením vizuální zpětné vazby v reálném čase mohou vývojáři vytvářet aplikace poháněné AI, které jsou nejen efektivní, ale také transparentní, auditovatelné a uživatelsky přívětivé.

Tato schopnost je obzvláště transformativní pro aplikace zahrnující:

• Složité pracovní postupy: Automatizace vícestupňových online procesů, jako je zadávání dat, onboarding nebo dodržování předpisů, kde je viditelnost každého kroku prvořadá.
• Zákaznická podpora: Umožnění agentům sledovat AI kopiloty, jak řeší dotazy zákazníků nebo navigují systémy, zajišťuje přesnost a poskytuje příležitosti k zásahu.
• Školení a ladění: Poskytuje vývojářům a koncovým uživatelům výkonný nástroj k pochopení chování agenta, ladění problémů a školení agentů prostřednictvím přímého pozorování.
• Vylepšené auditní stopy: Generování vizuálních záznamů akcí agenta, které lze kombinovat se záznamy relací do Amazon S3 pro komplexní dodatečné přezkoumání a dodržování předpisů.

Schopnost přímo streamovat relace prohlížeče z AWS Cloudu do klientských prohlížečů, obcházející aplikační server pro video stream, nabízí významné výhody z hlediska výkonu a škálovatelnosti. Tato architektura minimalizuje latenci a snižuje zatížení vaší backendové infrastruktury, což vám umožňuje nasadit vysoce responzivní a škálovatelná řešení AI agentů.

Přijetím BrowserLiveView nestavíte jen AI agenty; stavíte důvěru, kontrolu a bohatší uživatelskou zkušenost. Prozkoumejte možnosti a dejte svým uživatelům jistotu delegovat složité webové úkoly na inteligentní agenty.