Bedrock AgentCore: Bädda in en live AI-webbläsaragent i React

• Om du använder AWS Bedrock för din AI-modell, installera AWS SDK för JavaScript:

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

Kodbasen för implementering av Live View delas vanligtvis upp: server-sidig kod (för sessionshantering och AI-agentlogik) körs i Node.js, och klient-sidig kod (för att återge Live View) körs i en React-applikation, ofta paketerad med verktyg som Vite.

Steg-för-steg-integration: Från session till ström

Att integrera en live AI-webbläsaragent med Amazon Bedrock AgentCore involverar en tydlig, trestegsprocess, som kopplar din server-sidiga logik med din klient-sidiga React-applikation och de robusta funktionerna i AWS Cloud.

1. Starta en webbläsarsession och generera Live View-URL:en

Det första steget sker på din applikationsserver. Det är här din backend-logik initierar en webbläsarsession inom Amazon Bedrock AgentCore och säkert erhåller den nödvändiga URL:en för att strömma live-vyn.

Du kommer att använda Browser-klassen från bedrock-agentcore-SDK:n. Denna klass hanterar komplexiteten med att skapa och hantera isolerade webbläsarmiljöer i molnet. Den viktigaste utgången från detta steg är en SigV4-försignerade URL, som ger säker, temporär åtkomst till live-videoströmmen från webbläsarsessionen.

// Exempel på server-sidig kod (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Initiera Bedrock AgentCore-klienten (se till att rätt AWS-uppgifter är konfigurerade)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Använd din önskade region

async function startLiveSession() {
    // Skapa en ny webbläsarsession
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Generera Live View-URL:en
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Lagra browser.sessionId för att senare ansluta din AI-agent eller avsluta sessionen
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Denna `liveViewUrl` kommer att skickas till din React-klient.

Denna URL skickas sedan till din React-frontend, som kommer att använda den för att upprätta live-strömmen.

2. Återge Live View i din React-applikation

När din React-applikation har mottagit liveViewUrl från din server är det anmärkningsvärt enkelt att återge strömmen i realtid, tack vare BrowserLiveView-komponenten.

// Exempel på klient-sidig kod (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>Väntar på Live View-URL...</p>;
    }

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

// I din huvudkomponent eller sida för appen:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Hämta liveViewUrl från din backend
//         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>
//     );
// };

Med bara url={liveViewUrl} hanterar BrowserLiveView-komponenten de intrikata detaljerna kring att upprätta WebSocket-anslutningen, konsumera DCV-strömmen och återge live-videoflödet inom dina angivna dimensioner. Denna minimala JSX-integration förenklar frontend-utvecklingen avsevärt, vilket gör att du kan fokusera på användarupplevelsen kring den levande agenten.

3. Koppla en AI-agent för att driva webbläsaren

Det sista steget kopplar din AI-agents intelligens till de faktiska webbläsaråtgärderna inom den isolerade sessionen. Medan BrowserLiveView ger visuell feedback, använder din AI-agent Playwright CDP (Chrome DevTools Protocol) för att interagera med webbläsaren programmatiskt.

Din applikationsserver, som också är värd för din AI-agent, kommer att använda Browser-objektets page-egenskap (som är ett Playwright Page-objekt) för att utföra webbläsaråtgärder.

// Exempel på server-sidig kod (fortsättning från steg 1)
// Förutsatt att du har ett Playwright-liknande gränssnitt eller direkt Playwright-användning
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (tidigare inställningar för webbläsarskapande) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Återanslut till befintlig session
    await browser.connect(); // Anslut till webbläsarsessionen

    const page = browser.page; // Hämta Playwright Page-objektet

    // Exempel på AI-agentlogik (förenklad för illustration)
    // Här skulle du integrera med din LLM (t.ex. Anthropic Claude via Bedrock Converse API)
    // för att bestämma åtgärder baserat på användarprompter och sidinnehåll.
    console.log("Agent navigerar till example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent väntade i 3 sekunder...");
    await page.waitForTimeout(3000); // Simulera bearbetningstid

    console.log("Agent skriver i en sökruta (hypotetiskt)...");
    // Exempel: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Exempel: await page.click('#search-button');

    const content = await page.content();
    // Använd en LLM för att analysera 'content' och bestämma nästa steg
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // eller din föredragna modell
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analysera detta webbsideinnehåll och föreslå nästa åtgärd: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("AI-modell föreslog åtgärd:", parsedBody.content[0].text);

    // Baserat på LLM:s förslag, utför ytterligare sidåtgärder...

    // Glöm inte att stänga webbläsarsessionen när du är klar
    // await browser.close();
}

// Efter att ha startat sessionen och fått URL:en, skulle du sedan anropa driveAgent(sessionId)

Denna interaktionsslinga – där din AI-agent analyserar sidinnehåll, bestämmer nästa åtgärd och utför den via Playwright CDP – utgör kärnan i en autonom webbläsaragent. Alla dessa åtgärder återges visuellt i realtid via BrowserLiveView-komponenten på användarens skärm.

Låser upp nya möjligheter med inbäddade AI-agenter

Integrationen av Amazon Bedrock AgentCores BrowserLiveView är mer än bara en teknisk funktion; det är ett paradigmskifte i hur användare interagerar med och litar på AI-agenter. Genom att bädda in visuell feedback i realtid kan utvecklare skapa AI-drivna applikationer som inte bara är effektiva utan också transparenta, granskningsbara och användarvänliga.

Denna förmåga är särskilt transformativ för applikationer som involverar:

• Komplexa arbetsflöden: Automatisering av onlineprocesser i flera steg som datainmatning, onboarding eller regelefterlevnad, där synlighet i varje steg är av yttersta vikt.
• Kundsupport: Tillåter agenter att observera AI-copiloter som löser kundfrågor eller navigerar i system, vilket säkerställer noggrannhet och ger möjligheter till ingripande.
• Utbildning och felsökning: Tillhandahåller utvecklare och slutanvändare ett kraftfullt verktyg för att förstå agentbeteende, felsöka problem och träna agenter genom direkt observation.
• Förbättrade granskningsloggar: Genererar visuella register över agentåtgärder, som kan kombineras med sessionsinspelningar till Amazon S3 för omfattande efterhandsgranskning och efterlevnad.

Förmågan att direkt strömma webbläsarsessioner från AWS Cloud till klientwebbläsare, och kringgå applikationsservern för videoströmmen, erbjuder betydande fördelar när det gäller prestanda och skalbarhet. Denna arkitektur minimerar latens och minskar belastningen på din backend-infrastruktur, vilket gör att du kan distribuera mycket responsiva och skalbara AI-agentlösningar.

Genom att anta BrowserLiveView bygger du inte bara AI-agenter; du bygger förtroende, kontroll och en rikare användarupplevelse. Utforska möjligheterna och ge dina användare självförtroendet att delegera komplexa webbuppgifter till intelligenta agenter.