Bedrock AgentCore: Bygg inn levende nettleser-AI-agent i React

• Hvis du bruker AWS Bedrock for din AI-modell, installer AWS SDK for JavaScript:

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

Kodebasen for implementering av Live View er vanligvis delt: server-side-kode (for økthåndtering og AI-agentlogikk) kjører i Node.js, og klient-side-kode (for gjengivelse av Live View) kjører innenfor en React-applikasjon, ofte bundlet med verktøy som Vite.

Steg-for-steg integrasjon: Fra økt til strøm

Integrering av en levende nettleser-AI-agent med Amazon Bedrock AgentCore involverer en klar, tre-trinns prosess, som forbinder din server-side-logikk med din klient-side React-applikasjon og de robuste funksjonene i AWS Cloud.

1. Starte en nettleserøkt og generere Live View-URL-en

Det første trinnet skjer på applikasjonsserveren din. Det er her backend-logikken din starter en nettleserøkt innenfor Amazon Bedrock AgentCore og sikkert henter den nødvendige URL-en for å strømme live-visningen.

Du vil bruke Browser-klassen fra bedrock-agentcore SDK. Denne klassen håndterer kompleksiteten ved å opprette og administrere isolerte nettlesermiljøer i skyen. Nøkkelresultatet fra dette trinnet er en SigV4-forhåndsregistrert URL, som gir sikker, midlertidig tilgang til den levende videostrømmen fra nettleserøkten.

// 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 riktig AWS-legitimasjon er konfigurert)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Bruk ønsket region

async function startLiveSession() {
    // Opprett en ny nettleserøkt
    const browser = new Browser(agentCoreClient);
    await browser.create();

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

    // Lagre browser.sessionId for å senere koble til AI-agenten din eller avslutte økten
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Denne `liveViewUrl` vil bli sendt til React-klienten din.

Denne URL-en sendes deretter til din React-frontend, som vil bruke den til å etablere live-strømmen.

2. Gjengi Live View i din React-applikasjon

Når React-applikasjonen din mottar liveViewUrl fra serveren din, er gjengivelse av sanntidsstrømmen bemerkelsesverdig enkelt, 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>Waiting for 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 backend-en din
//         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 bare url={liveViewUrl} håndterer BrowserLiveView-komponenten de intrikate detaljene ved å etablere WebSocket-tilkoblingen, konsumere DCV-strømmen og gjengi den levende videostrømmen innenfor dine spesifiserte dimensjoner. Denne minimale JSX-integrasjonen forenkler frontend-utviklingen betydelig, slik at du kan fokusere på brukeropplevelsen rundt live-agenten.

3. Koble en AI-agent til å drive nettleseren

Det siste trinnet kobler AI-agentens intelligens til de faktiske nettleserhandlingene innenfor den isolerte økten. Mens BrowserLiveView gir den visuelle tilbakemeldingen, bruker AI-agenten din Playwright CDP (Chrome DevTools Protocol) for å interagere med nettleseren programmatisk.

Applikasjonsserveren din, som også er vert for din AI-agent, vil bruke Browser-objektets page-egenskap (som er et Playwright Page-objekt) til å utføre nettleserhandlinger.

// Eksempel server-side kode (fortsatt fra steg 1)
// Antar at du har et Playwright-lignende grensesnitt eller direkte Playwright-bruk
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (previous setup for browser creation) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Koble til eksisterende økt på nytt
    await browser.connect(); // Koble til nettleserøkten

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

    // Eksempel AI-agentlogikk (forenklet for illustrasjon)
    // Her ville du integrert med din LLM (f.eks. Anthropic Claude via Bedrock Converse API)
    // for å bestemme handlinger basert på brukerforespørsler og sideinnhold.
    console.log("Agent navigating to example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent waited for 3 seconds...");
    await page.waitForTimeout(3000); // Simulate processing time

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

    const content = await page.content();
    // Bruk en LLM til å analysere 'content' og bestemme neste trinn
    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 modell
        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);

    // Basert på LLM's forslag, utfør ytterligere sidehandlinger...

    // Ikke glem å lukke nettleserøkten når du er ferdig
    // await browser.close();
}

// Etter å ha startet økten og fått URL-en, ville du da kalt driveAgent(sessionId)

Denne interaksjonsløkken – der AI-agenten din analyserer sideinnhold, bestemmer neste handling og utfører den via Playwright CDP – utgjør kjernen i en autonom nettleseragent. Alle disse handlingene gjengis visuelt i sanntid gjennom BrowserLiveView-komponenten på brukerens skjerm.

Låse opp nye muligheter med innebygde AI-agenter

Integreringen av Amazon Bedrock AgentCores BrowserLiveView er mer enn bare en teknisk funksjon; det er et paradigmeskifte i hvordan brukere interagerer med og stoler på AI-agenter. Ved å bygge inn sanntids visuell tilbakemelding, kan utviklere skape AI-drevne applikasjoner som ikke bare er effektive, men også transparente, reviderbare og brukervennlige.

Denne funksjonaliteten er spesielt transformativ for applikasjoner som involverer:

• Komplekse arbeidsflyter: Automatisering av flertrinns online-prosesser som datainntasting, onboarding eller regulatorisk overholdelse, der synlighet inn i hvert trinn er avgjørende.
• Kundestøtte: Lar agenter observere AI-medpiloter som løser kundeforespørsler eller navigerer systemer, noe som sikrer nøyaktighet og gir muligheter for intervensjon.
• Opplæring og feilsøking: Gir utviklere og sluttbrukere et kraftig verktøy for å forstå agentens oppførsel, feilsøke problemer og trene agenter gjennom direkte observasjon.
• Forbedrede revisjonsspor: Generering av visuelle registreringer av agenthandlinger, som kan kombineres med øktopptak til Amazon S3 for omfattende etterfølgende gjennomgang og overholdelse.

Evnen til å direkte strømme nettleserøkter fra AWS Cloud til klientnettlesere, og omgå applikasjonsserveren for videostrømmen, gir betydelige fordeler når det gjelder ytelse og skalerbarhet. Denne arkitekturen minimerer latens og reduserer belastningen på backend-infrastrukturen din, slik at du kan distribuere svært responsive og skalerbare AI-agentløsninger.

Ved å ta i bruk BrowserLiveView, bygger du ikke bare AI-agenter; du bygger tillit, kontroll og en rikere brukeropplevelse. Utforsk mulighetene og gi brukerne dine selvtilliten til å delegere komplekse web-oppgaver til intelligente agenter.