Bedrock AgentCore: Vdelajte živega brskalnega agenta z umetno inteligenco v React

Obdobje AI agentov, ki delujejo kot nepregledne 'črne skrinjice', se hitro izteka. Ker umetna inteligenca prevzema vse bolj zapletene in avtonomne naloge, zlasti v spletnih okoljih, je povpraševanje po transparentnosti, zaupanju in nadzoru uporabnikov višje kot kdaj koli prej. Uporabniki morajo razumeti in preveriti dejanja, ki jih AI agent izvaja v njihovem imenu, še posebej, ko ta dejanja vključujejo navigacijo po spletnih straneh, interakcijo z občutljivimi podatki ali izvajanje kritičnih delovnih tokov.

Za reševanje tega temeljnega izziva Amazon Web Services uvaja zmogljivo rešitev: komponento Amazon Bedrock AgentCore BrowserLiveView. To inovativno orodje razvijalcem omogoča vdelavo video prenosa brskalne seje AI agenta v živo in v realnem času neposredno v njihove React aplikacije. Ta integracija ne le razkrije obnašanje agenta, ampak uporabnikom zagotavlja tudi neprimerljiv vpogled in ključen občutek nadzora.

Komponenta BrowserLiveView, ki je del Bedrock AgentCore TypeScript SDK, poenostavlja integracijo brskalnih prenosov v živo v vašo aplikacijo z le nekaj vrsticami JavaScript XML (JSX). Z uporabo visoko zmogljivega protokola Amazon DCV prikazuje sejo agenta, s čimer tradicionalno skrit proces učinkovito spreminja v vizualno preverljivo izkušnjo. Ta članek vas bo vodil skozi postopek, od začetka seje in generiranja URL-ja za Pogled v živo, do prikazovanja prenosa v vaši React aplikaciji in končno do povezovanja AI agenta, ki bo poganjal brskalnik, medtem ko ga bodo vaši uporabniki opazovali.

Izboljšanje transparentnosti agenta umetne inteligence z BrowserLiveView

V današnjem hitro razvijajočem se okolju agenske umetne inteligence obljublja sposobnost delegiranja nalog brskanja po spletu agentom umetne inteligence izjemne dobičke v učinkovitosti. Vendar je to obljubo pogosto omiljeno z zaskrbljenostjo glede zanesljivosti, natančnosti in varnosti agenta. Brez jasnega vpogleda v delovanje agenta uporabnikom preostane, da zaupajo sistemu, ki ga ne morejo opazovati, kar lahko ovira sprejemanje in omeji uvajanje v občutljivih scenarijih.

Komponenta BrowserLiveView se neposredno spopada s tem izzivom, tako da uporabniku odpre 'oči' AI agenta. Predstavljajte si AI agenta, ki ima nalogo izpolniti zapleten spletni obrazec ali pridobiti specifične informacije z več spletnih strani. Tradicionalno bi uporabnik prejel le končni rezultat ali povzetek dejanj, kar bi mu puščalo vprašanje o vmesnih korakih. Z vdelanim Pogledom v živo lahko uporabniki v realnem času spremljajo vsako navigacijo, oddajo obrazca in iskalno poizvedbo, ko jih agent izvaja.

Ta takojšna vizualna potrditev je neprecenljiva. Uporabnikom zagotavlja, da je agent na pravi strani, da deluje s pravilnimi elementi in napreduje skozi delovni tok, kot je bilo predvideno. Ta povratna zanka v realnem času presega zgolj tekstovne potrditve; zagotavlja otipljivo, preverljivo revizijsko sled obnašanja agenta, kar krepi večje zaupanje. Za delovne tokove, ki so regulirani ali vključujejo občutljive podatke strank, so ti vizualni dokazi lahko ključni za skladnost in odgovornost. Poleg tega, v scenarijih, ki zahtevajo človeški nadzor, lahko nadzornik neposredno opazuje dejanja agenta znotraj aplikacije, po potrebi posreduje, ne da bi motil potek.

Arhitektura za opazovanje agentov v realnem času

Brezhibna integracija živega brskalnega agenta z umetno inteligenco v React aplikacijo, ki jo poganja Amazon Bedrock AgentCore, je orkestrirana skozi sofisticirano, a učinkovito arhitekturo, ki jo sestavljajo tri ključne komponente. Razumevanje medsebojnega delovanja teh delov je ključno za uspešno implementacijo in uvedbo.

Interakcija se začne z uporabnikovim spletnim brskalnikom, ki poganja vašo React aplikacijo. Znotraj te aplikacije se prikaže komponenta BrowserLiveView, ki čaka na varen, časovno omejen URL s predhodno overjenim podpisom SigV4. Ta URL, ki ga generira vaš aplikacijski strežnik, je ključ do vzpostavitve trajne WebSocket povezave neposredno s storitvijo Bedrock AgentCore v oblaku AWS.

Vaš aplikacijski strežnik služi dvojnemu namenu: gosti logiko AI agenta in deluje kot posrednik za upravljanje sej. Kliče API Amazon Bedrock AgentCore za sprožitev brskalnih sej in nato varno generira URL-je s predhodno overjenim podpisom SigV4, ki vašemu odjemalskemu brskalniku omogočajo dostop do pretoka Pogleda v živo. Ključno je, da medtem ko vaš strežnik orkestrira dejanja agenta in generira potrebne poverilnice, ne obravnava neposredno video prenosa samega.

Obsežno delo avtomatizacije brskalnika in pretakanja videa poteka v oblaku AWS. Amazon Bedrock AgentCore gosti izolirane brskalne seje v oblaku, ki zagotavljajo tako končno točko za avtomatizacijo – s katero vaš AI agent komunicira z uporabo protokola Playwright Chrome DevTools Protocol (CDP) – kot tudi končno točko za pretakanje Pogleda v živo, ki jo poganja Amazon DCV. Ta zasnova zagotavlja, da pretok DCV Pogleda v živo teče neposredno iz Amazon Bedrock AgentCore v uporabnikov brskalnik. Ta neposredna povezava WebSocket zaobide vaš aplikacijski strežnik, s čimer se zmanjšata zakasnitev in obremenitev vaše infrastrukture ter zagotavlja gladka izkušnja gledanja v realnem času.

Predpogoji za uvedbo vašega živega AI agenta

Preden se poglobite v implementacijo vašega živega brskalnega agenta z umetno inteligenco, je bistveno zagotoviti, da je vaše razvojno okolje pravilno konfigurirano in da imate potrebne AWS vire in dovoljenja. Upoštevanje teh predpogojev bo poenostavilo vaš razvojni proces in pomagalo ohranjati varno operativno držo.

1. Okolje Node.js: Na vašem sistemu boste potrebovali nameščen Node.js različice 20 ali novejše za poganjanje strežniških komponent vaše aplikacije.
2. AWS račun in regija: Potreben je aktiven AWS račun z dostopom do podprte AWS regije, kjer je na voljo Amazon Bedrock AgentCore.
3. AWS poverilnice in dovoljenja: Vaše AWS poverilnice morajo imeti ustrezna dovoljenja za brskalnik Amazon Bedrock AgentCore. Ključnega pomena je slediti načelu najmanjših privilegijev pri konfiguriranju dovoljenj AWS Identity and Access Management (IAM). Za izboljšano varnost vedno uporabite začasne poverilnice, pridobljene iz AWS IAM Identity Center ali AWS Security Token Service (AWS STS), in se izogibajte dolgotrajnim ključem za dostop.
4. Dostop do AI modela: Če nameravate uporabiti AI model za poganjanje agenta (kot je prikazano v vzorcu, ki uporablja Amazon Bedrock Converse API z Anthropic Claude), boste potrebovali dostop do tega specifičnega modela in vseh povezanih dovoljenj AWS Bedrock. Vendar pa ne pozabite, da je Pogled v živo sam po sebi neodvisen od modela, kar vam omogoča integracijo katerega koli ponudnika modelov ali ogrodja agentov po vaši izbiri.
5. Namestitve SDK-jev:
   • Namestite bedrock-agentcore TypeScript SDK za interakcijo z AgentCore:

     npm install bedrock-agentcore
     

   • Če uporabljate AWS Bedrock za svoj AI model, namestite AWS SDK za JavaScript:

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

Osnovna koda za implementacijo Pogleda v živo je običajno razdeljena: koda na strežniški strani (za upravljanje sej in logiko AI agenta) se izvaja v Node.js, koda na odjemalski strani (za prikaz Pogleda v živo) pa se izvaja znotraj aplikacije React, pogosto pakirana z orodji, kot je Vite.

Integracija po korakih: Od seje do prenosa

Integracija živega brskalnega agenta z umetno inteligenco z Amazon Bedrock AgentCore vključuje jasen, tri-stopenjski postopek, ki povezuje logiko na strežniški strani z vašo React aplikacijo na odjemalski strani in robustnimi zmožnostmi oblaka AWS.

1. Zagon brskalne seje in generiranje URL-ja za Pogled v živo

Prvi korak se zgodi na vašem aplikacijskem strežniku. Tu vaša zaledna logika sproži brskalno sejo znotraj Amazon Bedrock AgentCore in varno pridobi potreben URL za pretakanje pogleda v živo.

Uporabili boste razred Browser iz SDK bedrock-agentcore. Ta razred obravnava kompleksnost ustvarjanja in upravljanja izoliranih brskalnih okolij v oblaku. Ključni izhod tega koraka je URL s predhodno overjenim podpisom SigV4, ki omogoča varen, začasen dostop do video prenosa brskalne seje v živo.

// Primer kode na strežniški strani (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Inicializirajte odjemalca Bedrock AgentCore (zagotovite, da so AWS poverilnice pravilno konfigurirane)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Uporabite želeno regijo

async function startLiveSession() {
    // Ustvarite novo brskalno sejo
    const browser = new Browser(agentCoreClient);
    await browser.create();

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

    // Shranite browser.sessionId, da boste pozneje lahko povezali svojega AI agenta ali prekinili sejo
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Ta `liveViewUrl` bo poslan vašemu odjemalcu React.

Ta URL je nato poslan vašemu React sprednjemu delu, ki ga bo uporabil za vzpostavitev prenosa v živo.

2. Prikaz Pogleda v živo v vaši React aplikaciji

Ko vaša React aplikacija prejme liveViewUrl od vašega strežnika, je prikazovanje prenosa v realnem času izjemno preprosto, zahvaljujoč komponenti BrowserLiveView.

// Primer kode na odjemalski strani (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>Waiting for Live View URL...</p>;
    }

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

// V vaši glavni komponenti App ali strani:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Pridobite liveViewUrl iz vašega zaledja
//         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>
//     );
// };

S samo url={liveViewUrl} komponenta BrowserLiveView obravnava zapletene podrobnosti vzpostavitve WebSocket povezave, porabe DCV pretoka in prikazovanja video prenosa v živo znotraj vaših določenih dimenzij. Ta minimalna JSX integracija močno poenostavi razvoj sprednjega dela, kar vam omogoča, da se osredotočite na uporabniško izkušnjo okoli živega agenta.

3. Povezovanje AI agenta za poganjanje brskalnika

Končni korak povezuje inteligenco vašega AI agenta z dejanskimi brskalnimi dejanji znotraj izolirane seje. Medtem ko BrowserLiveView zagotavlja vizualne povratne informacije, vaš AI agent uporablja Playwright CDP (Chrome DevTools Protocol) za programsko interakcijo z brskalnikom.

Vaš aplikacijski strežnik, ki gosti tudi vašega AI agenta, bo uporabil lastnost page objekta Browser (ki je objekt Page Playwright), za izvajanje brskalnih dejanj.

// Primer kode na strežniški strani (nadaljevanje iz 1. koraka)
// Ob predpostavki, da imate vmesnik, podoben Playwrightu, ali neposredno uporabo Playwrighta
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (prejšnja nastavitev za ustvarjanje brskalnika) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Ponovno se povežite z obstoječo sejo
    await browser.connect(); // Povežite se z brskalno sejo

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

    // Primer logike AI agenta (poenostavljeno za ponazoritev)
    // Tukaj bi se integrirali z vašim LLM (npr. Anthropic Claude prek Bedrock Converse API-ja)
    // za določanje dejanj na podlagi uporabniških pozivov in vsebine strani.
    console.log("Agent se pomika na example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent je čakal 3 sekunde...");
    await page.waitForTimeout(3000); // Simulirajte čas obdelave

    console.log("Agent tipka v iskalno polje (hipotetično)...");
    // Primer: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Primer: await page.click('#search-button');

    const content = await page.content();
    // Uporabite LLM za analizo 'vsebine' in določitev naslednjih korakov
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // ali vaš željeni model
        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);

    // Na podlagi predloga LLM-ja, izvedite nadaljnja dejanja na strani...

    // Ne pozabite zapreti brskalne seje, ko končate
    // await browser.close();
}

// Po zagonu seje in pridobitvi URL-ja bi nato poklicali driveAgent(sessionId)

Ta interakcijska zanka – kjer vaš AI agent analizira vsebino strani, določi naslednje dejanje in ga izvede prek Playwright CDP – tvori jedro avtonomnega brskalnega agenta. Vsa ta dejanja so vizualno prikazana v realnem času prek komponente BrowserLiveView na uporabnikovem zaslonu.

Odklepanje novih možnosti z vdelanimi agenti umetne inteligence

Integracija komponente BrowserLiveView storitve Amazon Bedrock AgentCore je več kot le tehnična funkcija; je sprememba paradigme v načinu, kako uporabniki komunicirajo z AI agenti in jim zaupajo. Z vdelavo vizualnih povratnih informacij v realnem času lahko razvijalci ustvarijo aplikacije, ki jih poganja umetna inteligenca, in so ne le učinkovite, ampak tudi transparentne, revizibilne in uporabniku prijazne.

Ta zmožnost je še posebej transformativna za aplikacije, ki vključujejo:

• Zapleteni delovni tokovi: Avtomatizacija večstopenjskih spletnih procesov, kot so vnos podatkov, uvajanje ali regulativna skladnost, kjer je preglednost vsakega koraka ključna.
• Podpora strankam: Omogočanje agentom, da opazujejo AI sopilote pri reševanju poizvedb strank ali navigaciji po sistemih, s čimer se zagotavlja natančnost in nudi priložnosti za posredovanje.
• Usposabljanje in odpravljanje napak: Zagotavljanje zmogljivega orodja razvijalcem in končnim uporabnikom za razumevanje obnašanja agentov, odpravljanje težav in usposabljanje agentov z neposrednim opazovanjem.
• Izboljšane revizijske sledi: Generiranje vizualnih zapisov dejanj agentov, ki jih je mogoče kombinirati s posnetki sej na Amazon S3 za celovit naknadni pregled in skladnost.

Sposobnost neposrednega pretakanja brskalnih sej iz oblaka AWS v odjemalske brskalnike, pri čemer se za video prenos zaobide aplikacijski strežnik, ponuja znatne prednosti glede zmogljivosti in razširljivosti. Ta arhitektura zmanjšuje zakasnitev in zmanjšuje obremenitev vaše zaledne infrastrukture, kar vam omogoča uvedbo visoko odzivnih in razširljivih rešitev AI agentov.

S sprejetjem BrowserLiveView ne gradite le AI agentov; gradite zaupanje, nadzor in bogatejšo uporabniško izkušnjo. Raziščite možnosti in opolnomočite svoje uporabnike z zaupanjem, da bodo kompleksne spletne naloge prepustili inteligentnim agentom.