Bedrock AgentCore: Ugradite AI preglednički agent uživo u React

Era AI agenata koji djeluju kao neprozirne "crne kutije" ubrzano se bliži kraju. Kako umjetna inteligencija preuzima sve složenije i autonomnije zadatke, posebno u web okruženjima, potražnja za transparentnošću, povjerenjem i korisničkom kontrolom nikada nije bila veća. Korisnici trebaju razumjeti i provjeriti radnje koje AI agent poduzima u njihovo ime, pogotovo kada te radnje uključuju navigaciju web stranicama, interakciju s osjetljivim podacima ili izvršavanje kritičnih radnih tokova.

Rješavajući ovaj temeljni izazov, Amazon Web Services uvodi moćno rješenje: komponentu Amazon Bedrock AgentCore BrowserLiveView. Ovaj inovativni alat omogućuje razvojnim programerima da ugrade živi video feed sesije pregledavanja AI agenta u stvarnom vremenu izravno u svoje React aplikacije. Ova integracija ne samo da demistificira ponašanje agenta, već korisnicima pruža neviđenu vidljivost i ključni osjećaj kontrole.

Kao dio Bedrock AgentCore TypeScript SDK-a, komponenta BrowserLiveView pojednostavljuje integraciju live streamova preglednika u vašu aplikaciju sa samo nekoliko redaka JavaScript XML-a (JSX). Koristeći visokoučinkoviti Amazon DCV protokol, ona prikazuje sesiju agenta, učinkovito transformirajući tradicionalno skriveni proces u vizualno provjerljivo iskustvo. Ovaj će vas članak voditi kroz proces, od pokretanja sesije i generiranja Live View URL-a, do prikazivanja streama u vašoj React aplikaciji, i konačno, povezivanja AI agenta za upravljanje preglednikom dok vaši korisnici gledaju.

Poboljšanje transparentnosti AI agenta pomoću BrowserLiveView

U današnjem brzorastućem krajoliku agentskog AI-ja, sposobnost delegiranja zadataka web pregledavanja AI agentima obećava ogromne dobitke u učinkovitosti. Međutim, ovo obećanje često je ublaženo zabrinutostima o pouzdanosti, točnosti i sigurnosti agenta. Bez jasnog uvida u rad agenta, korisnici su prepušteni povjerenju sustavu koji ne mogu promatrati, što može ometati usvajanje i ograničiti implementaciju u osjetljivim scenarijima.

Komponenta BrowserLiveView izravno se suočava s ovim izazovom otvaranjem "očiju" AI agenta korisniku. Zamislite AI agenta zaduženog za ispunjavanje složenog online obrasca ili dohvaćanje specifičnih informacija s više web stranica. Tradicionalno, korisnik bi primio samo konačni izlaz ili sažetak radnji, ostavljajući ga da se pita o posrednim koracima. S ugrađenim Live Viewom, korisnici mogu pratiti svaku navigaciju, slanje obrasca i upit za pretraživanje u stvarnom vremenu dok ih agent izvodi.

Ova neposredna vizualna potvrda je neprocjenjiva. Uvjerava korisnike da je agent na ispravnoj stranici, da stupa u interakciju s pravim elementima i da napreduje kroz radni tok kako je namijenjeno. Ova povratna informacija u stvarnom vremenu nadilazi samo tekstualne potvrde; pruža opipljiv, provjerljiv trag revizije ponašanja agenta, potičući veće povjerenje. Za radne tokove koji su regulirani ili uključuju osjetljive korisničke podatke, ovaj vizualni dokaz može biti ključan za usklađenost i odgovornost. Nadalje, u scenarijima koji zahtijevaju ljudski nadzor, nadzornik može izravno promatrati radnje agenta unutar aplikacije, intervenirajući ako je potrebno, bez prekida toka.

Arhitektura iza promatranja agenta u stvarnom vremenu

Besprekidna integracija živog AI pregledničkog agenta unutar React aplikacije, pokretana Amazon Bedrock AgentCoreom, orkestrira se kroz sofisticiranu, ali učinkovitu arhitekturu koja se sastoji od tri ključne komponente. Razumijevanje međudjelovanja između ovih dijelova ključno je za uspješnu implementaciju i primjenu.

Interakcija počinje s web preglednikom korisnika, koji pokreće vašu React aplikaciju. Unutar ove aplikacije, komponenta BrowserLiveView se prikazuje, čekajući sigurnu, vremenski ograničenu SigV4-potpisanu URL adresu. Ova URL adresa, generirana od strane vašeg poslužitelja aplikacije, ključna je za uspostavljanje trajne WebSocket veze izravno s uslugom Bedrock AgentCore u AWS Cloudu.

Vaš poslužitelj aplikacije služi dvostrukoj svrsi: ugošćuje logiku AI agenta i djeluje kao posrednik za upravljanje sesijama. Poziva Amazon Bedrock AgentCore API za iniciranje sesija preglednika, a zatim sigurno generira SigV4-potpisane URL-ove koji vašem klijentskom pregledniku odobravaju pristup Live View streamu. Ključno, dok vaš poslužitelj orkestrira radnje agenta i generira potrebne vjerodajnice, on ne obrađuje izravno sam video stream.

Teži dio automatizacije preglednika i video strujanja odvija se unutar AWS Clouda. Amazon Bedrock AgentCore ugošćuje izolirane sesije preglednika u oblaku, pružajući i krajnju točku za automatizaciju — s kojom vaš AI agent komunicira koristeći Playwright Chrome DevTools Protocol (CDP) — i krajnju točku za strujanje Live Viewa, pokretanu Amazon DCV-om. Ovaj dizajn osigurava da DCV Live View stream teče izravno iz Amazon Bedrock AgentCorea u korisnikov preglednik. Ova izravna WebSocket veza zaobilazi vaš poslužitelj aplikacije, minimizirajući latenciju, smanjujući opterećenje vaše infrastrukture i osiguravajući glatko iskustvo gledanja u stvarnom vremenu.

Preduvjeti za implementaciju vašeg AI agenta uživo

Prije nego što zaronite u implementaciju vašeg AI pregledničkog agenta uživo, ključno je osigurati da je vaše razvojno okruženje ispravno konfigurirano i da imate potrebne AWS resurse i dopuštenja. Pridržavanje ovih preduvjeta pojednostavit će vaš razvojni proces i pomoći u održavanju sigurnog operativnog položaja.

1. Node.js okruženje: Trebat će vam Node.js verzija 20 ili novija instalirana na vašem sustavu za pokretanje poslužiteljskih komponenti vaše aplikacije.
2. AWS račun i regija: Potreban je aktivan AWS račun, s pristupom podržanoj AWS regiji gdje je dostupan Amazon Bedrock AgentCore.
3. AWS vjerodajnice i dopuštenja: Vaše AWS vjerodajnice moraju imati odgovarajuća dopuštenja za Amazon Bedrock AgentCore Browser. Ključno je slijediti princip najmanje privilegije prilikom konfiguriranja AWS Identity and Access Management (IAM) dopuštenja. Za poboljšanu sigurnost, uvijek koristite privremene vjerodajnice dobivene iz AWS IAM Identity Centra ili AWS Security Token Service (AWS STS), izbjegavajući dugotrajne pristupne ključeve.
4. Pristup AI modelu: Ako planirate koristiti AI model za pogon agenta (kao što je prikazano u primjeru, koji koristi Amazon Bedrock Converse API s Anthropic Claudeom), trebat će vam pristup tom specifičnom modelu i svim povezanim AWS Bedrock dopuštenjima. Međutim, zapamtite da je Live View sam po sebi neovisan o modelu, omogućujući vam integraciju bilo kojeg pružatelja modela ili agentskog okvira po vašem izboru.
5. Instalacije SDK-a:
   • Instalirajte bedrock-agentcore TypeScript SDK za interakciju s AgentCoreom:

     npm install bedrock-agentcore
     

   • Ako koristite AWS Bedrock za svoj AI model, instalirajte AWS SDK za JavaScript:

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

Kodna baza za implementaciju Live Viewa obično je podijeljena: poslužiteljski kod (za upravljanje sesijama i logiku AI agenta) pokreće se u Node.js-u, a klijentski kod (za prikaz Live Viewa) pokreće se unutar React aplikacije, često pakiran s alatima poput Vitea.

Korak-po-korak integracija: Od sesije do streama

Integracija AI pregledničkog agenta uživo s Amazon Bedrock AgentCoreom uključuje jasan, trostupanjski proces, povezujući vašu poslužiteljsku logiku s vašom klijentskom React aplikacijom i robusnim mogućnostima AWS Clouda.

1. Pokretanje sesije preglednika i generiranje URL-a za pregled uživo

Prvi korak događa se na vašem poslužitelju aplikacije. Ovdje vaša backend logika inicira sesiju preglednika unutar Amazon Bedrock AgentCorea i sigurno dobiva potrebni URL za strujanje prikaza uživo.

Koristit ćete klasu Browser iz bedrock-agentcore SDK-a. Ova klasa obrađuje složenost stvaranja i upravljanja izoliranim okruženjima preglednika u oblaku. Ključni rezultat ovog koraka je SigV4-potpisan URL, koji omogućuje siguran, privremeni pristup live video streamu sesije preglednika.

// Primjer poslužiteljskog koda (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Inicijalizirajte Bedrock AgentCore klijenta (provjerite jesu li ispravne AWS vjerodajnice konfigurirane)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Koristite željenu regiju

async function startLiveSession() {
    // Stvorite novu sesiju preglednika
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Generirajte URL za pregled uživo
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Pohranite browser.sessionId za kasnije povezivanje vašeg AI agenta ili prekid sesije
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Ovaj `liveViewUrl` bit će poslan vašem React klijentu.

Ovaj URL se zatim prosljeđuje vašem React frontend-u, koji će ga koristiti za uspostavljanje live streama.

2. Prikazivanje pregleda uživo u vašoj React aplikaciji

Kada vaša React aplikacija primi liveViewUrl s vašeg poslužitelja, prikazivanje streama u stvarnom vremenu je iznenađujuće jednostavno, zahvaljujući komponenti BrowserLiveView.

// Primjer klijentskog koda (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>Čekanje na URL za pregled uživo...</p>;
    }

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

// U vašoj glavnoj App komponenti ili stranici:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Dohvatite liveViewUrl iz vašeg backend-a
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>AI agent pregled uživo</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Sa samo url={liveViewUrl}, komponenta BrowserLiveView obrađuje složene detalje uspostavljanja WebSocket veze, konzumiranja DCV streama i prikazivanja live video feeda unutar vaših navedenih dimenzija. Ova minimalna JSX integracija uvelike pojednostavljuje razvoj frontenda, omogućujući vam da se usredotočite na korisničko iskustvo oko live agenta.

3. Povezivanje AI agenta za upravljanje preglednikom

Posljednji korak povezuje inteligenciju vašeg AI agenta sa stvarnim radnjama preglednika unutar izolirane sesije. Dok BrowserLiveView pruža vizualnu povratnu informaciju, vaš AI agent koristi Playwright CDP (Chrome DevTools Protocol) za programsku interakciju s preglednikom.

Vaš poslužitelj aplikacije, koji također ugošćuje vašeg AI agenta, koristit će svojstvo page objekta Browser (koje je Playwright Page objekt) za izvršavanje radnji preglednika.

// Primjer poslužiteljskog koda (nastavak iz koraka 1)
// Pretpostavljajući da imate sučelje slično Playwrightu ili izravnu upotrebu Playwrighta
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (prethodna postavka za stvaranje preglednika) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Ponovno se povežite na postojeću sesiju
    await browser.connect(); // Povežite se na sesiju preglednika

    const page = browser.page; // Dohvatite Playwright Page objekt

    // Primjer logike AI agenta (pojednostavljeno za ilustraciju)
    // Ovdje biste se integrirali s vašim LLM-om (npr. Anthropic Claude putem Bedrock Converse API-ja)
    // za određivanje radnji na temelju korisničkih upita i sadržaja stranice.
    console.log("Agent navigira na example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent je čekao 3 sekunde...");
    await page.waitForTimeout(3000); // Simulirajte vrijeme obrade

    console.log("Agent tipka u tražilicu (hipotetički)...");
    // Primjer: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Primjer: await page.click('#search-button');

    const content = await page.content();
    // Koristite LLM za analizu 'content' i odluku o sljedećim koracima
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // ili vaš preferirani model
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analiziraj sadržaj ove web stranice i predloži sljedeću radnju: ${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 predložio radnju:", parsedBody.content[0].text);

    // Na temelju LLM-ovog prijedloga, izvršite daljnje radnje na stranici...

    // Ne zaboravite zatvoriti sesiju preglednika kada završite
    // await browser.close();
}

// Nakon pokretanja sesije i dobivanja URL-a, pozvali biste driveAgent(sessionId)

Ova petlja interakcije — gdje vaš AI agent analizira sadržaj stranice, određuje sljedeću radnju i izvršava je putem Playwright CDP-a — čini jezgru autonomnog agenta za pregledavanje. Sve ove radnje vizualno se prikazuju u stvarnom vremenu putem komponente BrowserLiveView na korisničkom zaslonu.

Otključavanje novih mogućnosti s ugrađenim AI agentima

Integracija BrowserLiveView komponente Amazon Bedrock AgentCorea više je od same tehničke značajke; to je promjena paradigme u načinu na koji korisnici stupaju u interakciju i povjeravaju AI agentima. Ugradnjom vizualne povratne informacije u stvarnom vremenu, razvojni programeri mogu stvoriti aplikacije pokretane AI-jem koje nisu samo učinkovite, već i transparentne, revizibilne i jednostavne za korištenje.

Ova je sposobnost posebno transformativna za aplikacije koje uključuju:

• Složeni radni tokovi: Automatizacija višestupanjskih online procesa poput unosa podataka, onboardinga ili usklađenosti s propisima, gdje je vidljivost svakog koraka od iznimne važnosti.
• Korisnička podrška: Omogućavanje agentima da promatraju AI ko-pilote kako rješavaju korisničke upite ili navigiraju sustavima, osiguravajući točnost i pružajući mogućnosti za intervenciju.
• Obuka i ispravljanje pogrešaka: Pružanje razvojnim programerima i krajnjim korisnicima moćnog alata za razumijevanje ponašanja agenta, ispravljanje pogrešaka i obuku agenata putem izravnog promatranja.
• Poboljšani revizijski tragovi: Generiranje vizualnih zapisa radnji agenta, koji se mogu kombinirati sa snimkama sesija u Amazon S3 za sveobuhvatan naknadni pregled i usklađenost.

Sposobnost izravnog strujanja sesija preglednika iz AWS Clouda na klijentske preglednike, zaobilazeći poslužitelj aplikacije za video stream, nudi značajne prednosti u pogledu performansi i skalabilnosti. Ova arhitektura minimizira latenciju i smanjuje opterećenje vaše backend infrastrukture, omogućujući vam implementaciju visoko responzivnih i skalabilnih rješenja AI agenta.

Usvajanjem BrowserLiveView, ne gradite samo AI agente; gradite povjerenje, kontrolu i bogatije korisničko iskustvo. Istražite mogućnosti i osnažite svoje korisnike samopouzdanjem da delegiraju složene web zadatke inteligentnim agentima.