Bedrock AgentCore: Integruokite tiesioginį naršyklės dirbtinio intelekto agentą į React

• Jei naudojate AWS Bedrock savo DI modeliui, įdiekite AWS SDK for JavaScript:

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

Kodo bazė tiesioginio vaizdo įgyvendinimui paprastai yra padalinta: serverio pusės kodas (skirtas sesijų valdymui ir DI agento logikai) veikia Node.js, o kliento pusės kodas (skirtas tiesioginio vaizdo atvaizdavimui) veikia React programoje, dažnai sukomplektuotas su įrankiais, tokiais kaip Vite.

Žingsnis po žingsnio integravimas: nuo sesijos iki srauto

Tiesioginio DI naršyklės agento integravimas su Amazon Bedrock AgentCore apima aiškų, trijų žingsnių procesą, jungiantį jūsų serverio pusės logiką su kliento pusės React programa ir tvirtomis AWS debesies galimybėmis.

1. Naršyklės sesijos paleidimas ir tiesioginio vaizdo URL generavimas

Pirmasis žingsnis vyksta jūsų programos serveryje. Čia jūsų užpakalinės dalies logika inicijuoja naršyklės sesiją Amazon Bedrock AgentCore ir saugiai gauna reikiamą URL tiesioginiam vaizdui transliuoti.

Naudosite Browser klasę iš bedrock-agentcore SDK. Ši klasė tvarko sudėtingumą, susijusį su izoliuotų naršyklės aplinkų kūrimu ir valdymu debesyje. Pagrindinis šio žingsnio rezultatas yra SigV4 iš anksto pasirašytas URL, kuris suteikia saugią, laikiną prieigą prie naršyklės sesijos tiesioginio vaizdo srauto.

// Pavyzdys serverio pusės kodo (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Inicijuoti Bedrock AgentCore klientą (užtikrinti, kad tinkami AWS kredencialai būtų sukonfigūruoti)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Naudokite pageidaujamą regioną

async function startLiveSession() {
    // Sukurti naują naršyklės sesiją
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Sugeneruoti tiesioginio vaizdo URL
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Tiesioginio vaizdo URL:', liveViewUrl);

    // Išsaugoti browser.sessionId, kad vėliau prijungtumėte savo DI agentą arba nutrauktumėte sesiją
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Šis `liveViewUrl` bus išsiųstas jūsų React klientui.

Šis URL yra perduodamas jūsų React frontend'ui, kuris jį naudos tiesioginio srauto užmezgimui.

2. Tiesioginio vaizdo atvaizdavimas jūsų React programoje

Kai jūsų React programa gauna liveViewUrl iš jūsų serverio, realaus laiko srauto atvaizdavimas yra stebėtinai paprastas, dėka BrowserLiveView komponento.

// Pavyzdys kliento pusės kodo (React komponentas)
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>Laukiama tiesioginio vaizdo URL...</p>;
    }

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

// Jūsų pagrindiniame App komponente ar puslapyje:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Gauti liveViewUrl iš jūsų užpakalinės dalies
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>DI Agento tiesioginis vaizdas</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Vos su url={liveViewUrl}, BrowserLiveView komponentas tvarko sudėtingas detales, susijusias su WebSocket ryšio užmezgimu, DCV srauto vartojimu ir tiesioginio vaizdo srauto atvaizdavimu jūsų nurodytuose matmenyse. Šis minimalus JSX integravimas labai supaprastina front-end kūrimą, leidžiant jums sutelkti dėmesį į vartotojo patirtį, susijusią su tiesioginiu agentu.

3. DI agento prijungimas naršyklės valdymui

Paskutinis žingsnis sujungia jūsų DI agento intelektą su faktiniais naršyklės veiksmais izoliuotoje sesijoje. Nors BrowserLiveView teikia vizualinį grįžtamąjį ryšį, jūsų DI agentas naudoja Playwright CDP (Chrome DevTools protokolą), kad programiškai sąveikautų su naršykle.

Jūsų programos serveris, kuris taip pat talpina jūsų DI agentą, naudos Browser objekto page savybę (kuri yra Playwright Page objektas), kad vykdytų naršyklės veiksmus.

// Pavyzdys serverio pusės kodo (tęsinys iš 1 žingsnio)
// Darant prielaidą, kad turite Playwright panašią sąsają arba tiesioginį Playwright naudojimą
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (ankstesnis naršyklės kūrimo nustatymas) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Prisijungti prie esamos sesijos iš naujo
    await browser.connect(); // Prisijungti prie naršyklės sesijos

    const page = browser.page; // Gauti Playwright Page objektą

    // Pavyzdys DI agento logikos (supaprastinta iliustravimui)
    // Čia jūs integruotumėte su savo LLM (pvz., Anthropic Claude per Bedrock Converse API)
    // kad nustatytumėte veiksmus pagal vartotojo užklausas ir puslapio turinį.
    console.log("Agentas naršoma į example.com...");
    await page.goto('https://www.example.com');
    console.log("Agentas laukė 3 sekundes...");
    await page.waitForTimeout(3000); // Imituoti apdorojimo laiką

    console.log("Agentas rašo į paieškos laukelį (hipotetinis)...");
    // Pavyzdys: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Pavyzdys: await page.click('#search-button');

    const content = await page.content();
    // Naudoti LLM analizuoti 'content' ir nuspręsti kitus žingsnius
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // arba jūsų pageidaujamas modelis
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Išanalizuokite šį tinklalapio turinį ir pasiūlykite kitą veiksmą: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("DI modelio pasiūlytas veiksmas:", parsedBody.content[0].text);

    // Remiantis LLM pasiūlymu, vykdyti tolesnius puslapio veiksmus...

    // Nepamirškite uždaryti naršyklės sesijos, kai baigsite
    // await browser.close();
}

// Paleidus sesiją ir gavus URL, tada iškviestumėte driveAgent(sessionId)

Šis sąveikos ciklas – kuriame jūsų DI agentas analizuoja puslapio turinį, nustato kitą veiksmą ir jį vykdo per Playwright CDP – sudaro autonominio naršymo agento esmę. Visi šie veiksmai vizualiai atvaizduojami realiuoju laiku per BrowserLiveView komponentą vartotojo ekrane.

Naujų galimybių atvėrimas su integruotais DI agentais

Amazon Bedrock AgentCore BrowserLiveView integravimas yra daugiau nei tik techninė funkcija; tai yra paradigmos pokytis, kaip vartotojai sąveikauja su dirbtinio intelekto agentais ir jais pasitiki. Integruodami realaus laiko vizualinį grįžtamąjį ryšį, kūrėjai gali kurti DI pagrįstas programas, kurios yra ne tik efektyvios, bet ir skaidrios, audituojamos ir patogios vartotojui.

Ši galimybė ypač keičia programas, apimančias:

• Sudėtingos darbo eigos: Automatizuojant daugiapakopius internetinius procesus, tokius kaip duomenų įvedimas, įdarbinimas ar reguliavimo atitiktis, kur kiekvieno žingsnio matomumas yra itin svarbus.
• Klientų aptarnavimas: Leidžiant agentams stebėti, kaip DI pagalbininkai sprendžia klientų užklausas ar naršo sistemose, užtikrinant tikslumą ir suteikiant galimybes įsikišti.
• Mokymai ir derinimas: Suteikiant kūrėjams ir galutiniams vartotojams galingą įrankį suprasti agento elgesį, derinti problemas ir apmokyti agentus tiesioginiu stebėjimu.
• Patobulinti audito takeliai: Generuojant vizualinius agento veiksmų įrašus, kurie gali būti derinami su sesijų įrašais į Amazon S3, siekiant išsamaus peržiūros po įvykio ir atitikties.

Galimybė tiesiogiai transliuoti naršyklės sesijas iš AWS debesies į kliento naršykles, apeinant programos serverį vaizdo srautui, suteikia didelių pranašumų našumo ir mastelio keitimo požiūriu. Ši architektūra sumažina delsą ir sumažina jūsų užpakalinės dalies infrastruktūros naštą, leidžiant jums diegti labai reaguoojančius ir keičiamo dydžio DI agentų sprendimus.

Pasirinkdami BrowserLiveView, jūs ne tik kuriate DI agentus; jūs kuriate pasitikėjimą, kontrolę ir turtingesnę vartotojo patirtį. Ištirkite galimybes ir suteikite savo vartotojams pasitikėjimo deleguoti sudėtingas žiniatinklio užduotis išmaniesiems agentams.