Bedrock AgentCore: Integrer live AI-browseragent i React

Æraen med AI-agenter, der fungerer som uigennemsigtige "sorte bokse", nærmer sig hastigt sin afslutning. Efterhånden som kunstig intelligens påtager sig stadig mere komplekse og autonome opgaver, især i webmiljøer, har efterspørgslen efter gennemsigtighed, tillid og brugerkontrol aldrig været højere. Brugere skal forstå og verificere de handlinger, en AI-agent udfører på deres vegne, især når disse handlinger involverer navigation på websites, interaktion med følsomme data eller udførelse af kritiske arbejdsgange.

For at imødegå denne grundlæggende udfordring introducerer Amazon Web Services en kraftfuld løsning: Amazon Bedrock AgentCore BrowserLiveView-komponenten. Dette innovative værktøj giver udviklere mulighed for at indlejre et live, realtids-videofeed af en AI-agents browsersession direkte i deres React-applikationer. Denne integration afmystificerer ikke kun agentens adfærd, men giver også brugerne hidtil uset synlighed og en afgørende følelse af kontrol.

Som en del af Bedrock AgentCore TypeScript SDK'en forenkler BrowserLiveView-komponenten integrationen af live browserstrømme i din applikation med blot et par linjer JavaScript XML (JSX). Ved at udnytte den højtydende Amazon DCV-protokol gengiver den agentens session og omdanner effektivt en traditionelt skjult proces til en visuelt verificerbar oplevelse. Denne artikel vil guide dig gennem processen, fra start af en session og generering af Live View URL'en, til rendering af strømmen i din React-applikation, og endelig, hvordan du forbinder en AI-agent til at styre browseren, mens dine brugere ser med.

Forbedring af AI-agentens gennemsigtighed med BrowserLiveView

I dagens hurtigt udviklende landskab af agentisk AI lover evnen til at delegere web-browsing-opgaver til AI-agenter enorme effektivitetsgevinster. Men dette løfte er ofte tempereret af bekymringer om agentens pålidelighed, nøjagtighed og sikkerhed. Uden et klart vindue ind i en agents operationer, er brugere overladt til at stole på et system, de ikke kan observere, hvilket kan hindre adoption og begrænse implementering i følsomme scenarier.

BrowserLiveView-komponenten konfronterer direkte denne udfordring ved at åbne AI-agentens "øjne" for brugeren. Forestil dig en AI-agent, der har til opgave at udfylde en kompleks onlineformular eller hente specifik information fra flere websites. Traditionelt ville brugeren kun modtage et endeligt output eller en oversigt over handlinger, hvilket efterlod dem til at spekulere over de mellemliggende trin. Med en indlejret Live View kan brugere følge hver navigation, formularindsendelse og søgning i realtid, mens agenten udfører den.

Denne øjeblikkelige visuelle bekræftelse er uvurderlig. Den beroliger brugerne om, at agenten er på den korrekte side, interagerer med de rigtige elementer og skrider frem gennem arbejdsgangen som tilsigtet. Denne realtids-feedback-loop går ud over blot tekstbekræftelser; den giver et håndgribeligt, verificerbart revisionsspor af agentens adfærd, hvilket fremmer større tillid og fortrolighed. For arbejdsgange, der er regulerede eller involverer følsomme kundedata, kan denne visuelle dokumentation være kritisk for overholdelse og ansvarlighed. Desuden, i scenarier, der kræver menneskelig overvågning, kan en supervisor direkte observere agentens handlinger inden for applikationen og gribe ind, hvis nødvendigt, uden at forstyrre flowet.

Arkitekturen bag realtidsobservation af agenter

Den sømløse integration af en live AI-browseragent i en React-applikation drevet af Amazon Bedrock AgentCore orkestreres gennem en sofistikeret, men effektiv arkitektur, der består af tre nøglekomponenter. Forståelsen af samspillet mellem disse dele er afgørende for succesfuld implementering og udrulning.

Interaktionen begynder med brugerens webbrowser, som kører din React-applikation. Inden for denne applikation gengives BrowserLiveView-komponenten, der afventer en sikker, tidsbegrænset SigV4-præsigneret URL. Denne URL, genereret af din applikationsserver, er nøglen til at etablere en vedvarende WebSocket-forbindelse direkte til Bedrock AgentCore-tjenesten i AWS Cloud.

Din applikationsserver tjener et dobbelt formål: den hoster AI-agentens logik og fungerer som en mellemmand for sessionsstyring. Den kalder Amazon Bedrock AgentCore API'en for at initiere browser-sessioner og genererer derefter sikkert de SigV4-præsignerede URL'er, der giver din klientbrowser adgang til Live View-strømmen. Afgørende er, at selvom din server orkestrerer agentens handlinger og genererer de nødvendige legitimationsoplysninger, håndterer den ikke direkte videostrømmen selv.

Det tunge arbejde med browserautomatisering og videostreaming udføres i AWS Cloud. Amazon Bedrock AgentCore hoster isolerede cloud-browser-sessioner, der leverer både automatiserings-slutpunktet – som din AI-agent interagerer med ved hjælp af Playwright Chrome DevTools Protocol (CDP) – og Live View streaming-slutpunktet, drevet af Amazon DCV. Dette design sikrer, at DCV Live View-strømmen flyder direkte fra Amazon Bedrock AgentCore til brugerens browser. Denne direkte WebSocket-forbindelse omgår din applikationsserver, minimerer latenstid, reducerer dit infrastruktur-overhead og sikrer en flydende, realtids-visningsoplevelse.

Forudsætninger for implementering af din live AI-agent

Før du dykker ned i implementeringen af din live AI-browseragent, er det vigtigt at sikre, at dit udviklingsmiljø er korrekt konfigureret, og at du har de nødvendige AWS-ressourcer og tilladelser. Overholdelse af disse forudsætninger vil strømline din udviklingsproces og hjælpe med at opretholde en sikker operationel position.

1. Node.js-miljø: Du skal have Node.js version 20 eller nyere installeret på dit system for at køre de server-side komponenter i din applikation.
2. AWS-konto og region: En aktiv AWS-konto er påkrævet, med adgang til en understøttet AWS-region, hvor Amazon Bedrock AgentCore er tilgængelig.
3. AWS-legitimationsoplysninger og -tilladelser: Dine AWS-legitimationsoplysninger skal have de passende Amazon Bedrock AgentCore Browser-tilladelser. Det er afgørende at følge princippet om mindste privilegium, når du konfigurerer AWS Identity and Access Management (IAM)-tilladelser. For øget sikkerhed skal du altid bruge midlertidige legitimationsoplysninger opnået fra AWS IAM Identity Center eller AWS Security Token Service (AWS STS), og undgå langvarige adgangsnøgler.
4. Adgang til AI-model: Hvis du planlægger at bruge en AI-model til at drive agenten (som demonstreret i eksemplet, der bruger Amazon Bedrock Converse API'en med Anthropic Claude), skal du have adgang til den specifikke model og eventuelle tilknyttede AWS Bedrock-tilladelser. Husk dog, at Live View i sig selv er model-agnostisk, hvilket giver dig mulighed for at integrere enhver modeludbyder eller agentramme efter eget valg.
5. SDK-installationer:
   • Installer bedrock-agentcore TypeScript SDK'en for at interagere med AgentCore:

     npm install bedrock-agentcore
     

   • Hvis du bruger AWS Bedrock til din AI-model, skal du installere AWS SDK for JavaScript:

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

Koden til implementering af Live View er typisk opdelt: server-side kode (til sessionsstyring og AI-agentlogik) kører i Node.js, og klient-side kode (til gengivelse af Live View) kører i en React-applikation, ofte bundtet med værktøjer som Vite.

Trin-for-trin integration: Fra session til stream

Integration af en live AI-browseragent med Amazon Bedrock AgentCore involverer en klar, tre-trins proces, der forbinder din server-side logik med din klient-side React-applikation og de robuste muligheder i AWS Cloud.

1. Start en browser-session og generer Live View URL'en

Det første trin sker på din applikationsserver. Det er her din backend-logik initierer en browser-session inden for Amazon Bedrock AgentCore og sikkert får den nødvendige URL for at streame live-visningen.

Du vil bruge Browser-klassen fra bedrock-agentcore SDK'en. Denne klasse håndterer kompleksiteten ved at oprette og administrere isolerede browser-miljøer i skyen. Nøgleoutputtet fra dette trin er en SigV4-præsigneret URL, som giver sikker, midlertidig adgang til live videostrømmen fra browser-sessionen.

// Eksempel server-side kode (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Initialiser Bedrock AgentCore klient (sørg for at korrekte AWS-legitimationsoplysninger er konfigureret)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Brug din ønskede region

async function startLiveSession() {
    // Opret en ny browser-session
    const browser = new Browser(agentCoreClient);
    await browser.create();

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

    // Gem browser.sessionId for senere at forbinde din AI-agent eller afslutte sessionen
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Denne `liveViewUrl` sendes til din React-klient.

Denne URL sendes derefter til dit React-frontend, som vil bruge den til at etablere live-strømmen.

2. Gengiv Live View i din React-applikation

Når din React-applikation modtager liveViewUrl fra din server, er gengivelsen af realtidsstrømmen bemærkelsesværdigt ligetil takket være BrowserLiveView-komponenten.

// Eksempel klient-side kode (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>Venter på Live View URL...</p>;
    }

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

// I din hoved-App-komponent eller side:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Hent liveViewUrl fra 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 blot url={liveViewUrl} håndterer BrowserLiveView-komponenten de indviklede detaljer ved at etablere WebSocket-forbindelsen, forbruge DCV-strømmen og gengive live video-feeden inden for dine angivne dimensioner. Denne minimale JSX-integration forenkler frontend-udviklingen betydeligt, hvilket giver dig mulighed for at fokusere på brugeroplevelsen omkring den levende agent.

3. Forbind en AI-agent til at styre browseren

Det sidste trin forbinder din AI-agents intelligens til de faktiske browserhandlinger inden for den isolerede session. Mens BrowserLiveView giver visuel feedback, bruger din AI-agent Playwright CDP (Chrome DevTools Protocol) til programmatisk at interagere med browseren.

Din applikationsserver, som også hoster din AI-agent, vil bruge Browser-objektets page-egenskab (som er et Playwright Page-objekt) til at udføre browserhandlinger.

// Eksempel server-side kode (fortsat fra trin 1)
// Antager at du har et Playwright-lignende interface eller direkte Playwright-brug
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (tidligere opsætning til browseroprettelse) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Genopret forbindelse til eksisterende session
    await browser.connect(); // Forbind til browser-sessionen

    const page = browser.page; // Hent Playwright Page-objektet

    // Eksempel AI-agentlogik (forenklet for illustration)
    // Her ville du integrere med din LLM (f.eks. Anthropic Claude via Bedrock Converse API)
    // for at bestemme handlinger baseret på brugerprompts og sideindhold.
    console.log("Agent navigerer til example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent ventede i 3 sekunder...");
    await page.waitForTimeout(3000); // Simuler behandlingstid

    console.log("Agent skriver i en søgeboks (hypotetisk)...");
    // Eksempel: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Eksempel: await page.click('#search-button');

    const content = await page.content();
    // Brug en LLM til at analysere 'content' og beslutte næste trin
    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 foretrukne model
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analyser dette websideindhold og foreslå den næste handling: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("AI-modellen foreslog handling:", parsedBody.content[0].text);

    // Baseret på LLM's forslag, udfør yderligere sidehandlinger...

    // Glem ikke at lukke browser-sessionen, når du er færdig
    // await browser.close();
}

// Efter at have startet sessionen og fået URL'en, vil du derefter kalde driveAgent(sessionId)

Denne interaktionsloop – hvor din AI-agent analyserer sideindhold, bestemmer den næste handling og udfører den via Playwright CDP – danner kernen i en autonom browseragent. Alle disse handlinger gengives visuelt i realtid gennem BrowserLiveView-komponenten på brugerens skærm.

Lås op for nye muligheder med indlejrede AI-agenter

Integrationen af Amazon Bedrock AgentCores BrowserLiveView er mere end blot en teknisk funktion; det er et paradigmeskift i, hvordan brugere interagerer med og stoler på AI-agenter. Ved at indlejre visuel feedback i realtid kan udviklere skabe AI-drevne applikationer, der ikke kun er effektive, men også gennemsigtige, reviderbare og brugervenlige.

Denne kapacitet er især transformerende for applikationer, der involverer:

• Komplekse arbejdsgange: Automatisering af flertrins onlineprocesser som dataindtastning, onboarding eller overholdelse af lovgivning, hvor synlighed i hvert trin er altafgørende.
• Kundesupport: Tillader agenter at observere AI-co-piloter, der løser kundeforespørgsler eller navigerer i systemer, hvilket sikrer nøjagtighed og giver mulighed for intervention.
• Træning og fejlfinding: Tilbyder udviklere og slutbrugere et kraftfuldt værktøj til at forstå agentens adfærd, fejlfinde problemer og træne agenter gennem direkte observation.
• Forbedrede revisionsspor: Generering af visuelle registreringer af agentens handlinger, som kan kombineres med sessionoptagelser til Amazon S3 for omfattende efterfølgende gennemgang og overholdelse.

Evnen til direkte at streame browser-sessioner fra AWS Cloud til klientbrowsere, der omgår applikationsserveren for videostrømmen, tilbyder betydelige fordele med hensyn til ydeevne og skalerbarhed. Denne arkitektur minimerer latenstid og reducerer belastningen på din backend-infrastruktur, hvilket giver dig mulighed for at implementere yderst responsive og skalerbare AI-agentløsninger.

Ved at anvende BrowserLiveView bygger du ikke kun AI-agenter; du bygger tillid, kontrol og en rigere brugeroplevelse. Udforsk mulighederne og giv dine brugere tillid til at delegere komplekse webopgaver til intelligente agenter.