Bedrock AgentCore: Iegult reāllaika AI pārlūka aģentu React

AI aģentu, kas darbojas kā necaurredzamas "melnās kastes", ēra strauji tuvojas beigām. Tā kā mākslīgais intelekts uzņemas arvien sarežģītākus un autonomākus uzdevumus, īpaši tīmekļa vidēs, pieprasījums pēc caurspīdīguma, uzticības un lietotāju kontroles nekad nav bijis lielāks. Lietotājiem ir jāsaprot un jāpārbauda darbības, ko AI aģents veic viņu vārdā, jo īpaši, ja šīs darbības ietver navigāciju tīmekļa vietnēs, mijiedarbību ar sensitīviem datiem vai kritisku darba plūsmu izpildi.

Risinot šo fundamentālo izaicinājumu, Amazon Web Services piedāvā jaudīgu risinājumu: Amazon Bedrock AgentCore BrowserLiveView komponentu. Šis inovatīvais rīks dod iespēju izstrādātājiem tieši iegult reāllaika video plūsmu no AI aģenta pārlūkošanas sesijas savās React lietojumprogrammās. Šī integrācija ne tikai demistificē aģenta uzvedību, bet arī nodrošina lietotājiem nepieredzētu redzamību un būtisku kontroles sajūtu.

Kā daļa no Bedrock AgentCore TypeScript SDK, BrowserLiveView komponents vienkāršo tiešraides pārlūka plūsmu integrāciju jūsu lietojumprogrammā ar tikai dažām JavaScript XML (JSX) rindiņām. Izmantojot augstas veiktspējas Amazon DCV protokolu, tas atveido aģenta sesiju, efektīvi pārveidojot tradicionāli slēptu procesu vizuāli pārbaudāmā pieredzē. Šis raksts sniegs jums norādījumus par procesu, sākot no sesijas uzsākšanas un Live View URL ģenerēšanas, līdz plūsmas atveidošanai jūsu React lietojumprogrammā un, visbeidzot, AI aģenta pievienošanas, lai vadītu pārlūku, kamēr jūsu lietotāji skatās.

AI aģenta caurspīdīguma uzlabošana ar BrowserLiveView

Mūsdienu strauji mainīgajā aģentiskā AI ainavā spēja deleģēt tīmekļa pārlūkošanas uzdevumus AI aģentiem sola milzīgus efektivitātes pieaugumus. Tomēr šo solījumu bieži vien mazina bažas par aģenta uzticamību, precizitāti un drošību. Bez skaidra ieskata aģenta darbībās lietotājiem atliek uzticēties sistēmai, ko viņi nevar novērot, kas var kavēt pieņemšanu un ierobežot izvietošanu sensitīvos scenārijos.

BrowserLiveView komponents tieši risina šo izaicinājumu, "atverot" AI aģenta "acis" lietotājam. Iedomājieties AI aģentu, kura uzdevums ir aizpildīt sarežģītu tiešsaistes veidlapu vai iegūt specifisku informāciju no vairākām tīmekļa vietnēm. Tradicionāli lietotājs saņemtu tikai galīgo izvadi vai darbību kopsavilkumu, liekot viņam domāt par starpposma darbībām. Ar iegulto Live View lietotāji var sekot katrai navigācijai, veidlapas iesniegšanai un meklēšanas vaicājumam reāllaikā, kamēr aģents to veic.

Šis tūlītējais vizuālais apstiprinājums ir nenovērtējams. Tas pārliecina lietotājus, ka aģents atrodas pareizajā lapā, mijiedarbojas ar pareizajiem elementiem un virzās uz priekšu darba plūsmā, kā paredzēts. Šī reāllaika atgriezeniskās saites cilpa pārsniedz tikai teksta apstiprinājumus; tā nodrošina taustāmu, pārbaudāmu aģenta uzvedības revīzijas pēdu, veicinot lielāku pārliecību un uzticību. Darba plūsmām, kas ir regulētas vai ietver sensitīvus klientu datus, šis vizuālais pierādījums var būt kritisks atbilstības un atbildības nodrošināšanai. Turklāt scenārijos, kas prasa cilvēka uzraudzību, uzraugs var tieši novērot aģenta darbības lietojumprogrammā, iejaucoties, ja nepieciešams, netraucējot plūsmu.

Arhitektūra aiz reāllaika aģentu novērošanas

Reāllaika AI pārlūka aģenta nevainojama integrācija React lietojumprogrammā, ko darbina Amazon Bedrock AgentCore, tiek orķestrēta, izmantojot sarežģītu, taču efektīvu arhitektūru, kas sastāv no trim galvenajiem komponentiem. Šo daļu mijiedarbības izpratne ir būtiska veiksmīgai ieviešanai un izvietošanai.

Mijiedarbība sākas ar lietotāja tīmekļa pārlūku, kas palaiž jūsu React lietojumprogrammu. Šajā lietojumprogrammā tiek atveidots BrowserLiveView komponents, gaidot drošu, laika ierobežotu SigV4-iepriekš parakstītu URL. Šis URL, ko ģenerē jūsu lietojumprogrammu serveris, ir atslēga pastāvīga WebSocket savienojuma izveidei tieši ar Bedrock AgentCore pakalpojumu AWS mākonī.

Jūsu lietojumprogrammu serveris kalpo diviem mērķiem: tas mitina AI aģenta loģiku un darbojas kā starpnieks sesiju pārvaldībā. Tas izsauc Amazon Bedrock AgentCore API, lai uzsāktu pārlūka sesijas, un pēc tam droši ģenerē SigV4-iepriekš parakstītus URL, kas piešķir jūsu klienta pārlūkam piekļuvi Live View plūsmai. Svarīgi ir tas, ka, kamēr jūsu serveris orķestrē aģenta darbības un ģenerē nepieciešamās akreditācijas datus, tas tieši nenodrošina pašu video plūsmu.

Pārlūka automatizācijas un video straumēšanas smagais darbs notiek AWS mākonī. Amazon Bedrock AgentCore mitina izolētas mākoņa pārlūka sesijas, nodrošinot gan automatizācijas galapunktu, ar ko jūsu AI aģents mijiedarbojas, izmantojot Playwright Chrome DevTools protokolu (CDP), gan Live View straumēšanas galapunktu, ko darbina Amazon DCV. Šis dizains nodrošina, ka DCV Live View plūsma plūst tieši no Amazon Bedrock AgentCore uz lietotāja pārlūku. Šis tiešais WebSocket savienojums apiet jūsu lietojumprogrammu serveri, samazinot latentumu, samazinot jūsu infrastruktūras izmaksas un nodrošinot vienmērīgu, reāllaika skatīšanās pieredzi.

Priekšnoteikumi jūsu tiešraides AI aģenta izvietošanai

Pirms iedziļināties jūsu tiešraides AI pārlūka aģenta ieviešanā, ir svarīgi pārliecināties, ka jūsu izstrādes vide ir pareizi konfigurēta un jums ir nepieciešamie AWS resursi un atļaujas. Šo priekšnoteikumu ievērošana racionalizēs jūsu izstrādes procesu un palīdzēs uzturēt drošu darbības stāvokli.

1. Node.js vide: Jums būs nepieciešama Node.js 20. vai jaunāka versija, kas instalēta jūsu sistēmā, lai palaistu jūsu lietojumprogrammas servera-puses komponentus.
2. AWS konts un reģions: Nepieciešams aktīvs AWS konts ar piekļuvi atbalstītam AWS reģionam, kurā ir pieejams Amazon Bedrock AgentCore.
3. AWS akreditācijas dati un atļaujas: Jūsu AWS akreditācijas datiem jābūt atbilstošām Amazon Bedrock AgentCore pārlūka atļaujām. Ir ļoti svarīgi ievērot mazākās privilēģijas principu, konfigurējot AWS Identity and Access Management (IAM) atļaujas. Lai uzlabotu drošību, vienmēr izmantojiet pagaidu akreditācijas datus, kas iegūti no AWS IAM Identity Center vai AWS Security Token Service (AWS STS), izvairoties no ilgtermiņa piekļuves atslēgām.
4. AI modeļa piekļuve: Ja plānojat izmantot AI modeli, lai vadītu aģentu (kā demonstrēts piemērā, kas izmanto Amazon Bedrock Converse API ar Anthropic Claude), jums būs nepieciešama piekļuve šim konkrētajam modelim un jebkurām saistītām AWS Bedrock atļaujām. Tomēr atcerieties, ka Live View pats par sevi ir modeļa-agnostisks, kas ļauj jums integrēt jebkuru modeļa nodrošinātāju vai aģenta ietvaru pēc jūsu izvēles.
5. SDK instalācijas:
   • Instalējiet bedrock-agentcore TypeScript SDK mijiedarbībai ar AgentCore:

     npm install bedrock-agentcore
     

   • Ja jūsu AI modelim izmantojat AWS Bedrock, instalējiet AWS SDK for JavaScript:

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

Kods Live View ieviešanai parasti ir sadalīts: servera-puses kods (sesiju pārvaldībai un AI aģenta loģikai) darbojas Node.js, un klienta-puses kods (Live View atveidošanai) darbojas React lietojumprogrammā, bieži vien komplektēts ar tādiem rīkiem kā Vite.

Soli pa solim integrācija: no sesijas līdz straumei

Reāllaika AI pārlūka aģenta integrācija ar Amazon Bedrock AgentCore ietver skaidru, trīspakāpju procesu, kas savieno jūsu servera-puses loģiku ar jūsu klienta-puses React lietojumprogrammu un AWS mākoņa jaudīgajām iespējām.

1. Pārlūka sesijas uzsākšana un Live View URL ģenerēšana

Pirmais solis notiek jūsu lietojumprogrammu serverī. Šeit jūsu aizmugures loģika uzsāk pārlūka sesiju Amazon Bedrock AgentCore un droši iegūst nepieciešamo URL, lai straumētu tiešraides skatu.

Jūs izmantosiet Browser klasi no bedrock-agentcore SDK. Šī klase apstrādā izolētu pārlūka vides izveides un pārvaldības sarežģītību mākonī. Šī soļa galvenā izvade ir SigV4-iepriekš parakstīts URL, kas nodrošina drošu, pagaidu piekļuvi pārlūka sesijas tiešraides video plūsmai.

// Piemēra servera-puses kods (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Inicializēt Bedrock AgentCore klientu (pārliecinieties, vai AWS akreditācijas dati ir pareizi konfigurēti)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Izmantojiet vēlamo reģionu

async function startLiveSession() {
    // Izveidot jaunu pārlūka sesiju
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Ģenerēt Live View URL
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Saglabājiet browser.sessionId, lai vēlāk pievienotu AI aģentu vai pārtrauktu sesiju
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Šis `liveViewUrl` tiks nosūtīts jūsu React klientam.

Šis URL pēc tam tiek nosūtīts uz jūsu React priekšgala pusi, kas to izmantos, lai izveidotu tiešraides straumi.

2. Live View atveidošana jūsu React lietojumprogrammā

Kad jūsu React lietojumprogramma no servera saņem liveViewUrl, reāllaika plūsmas atveidošana ir pārsteidzoši vienkārša, pateicoties BrowserLiveView komponentam.

// Piemēra klienta-puses kods (React komponents)
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>
    );
};

// Jūsu galvenajā App komponentā vai lapā:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Ielādēt liveViewUrl no jūsu aizmugures
//         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>
//     );
// };

Tikai ar url={liveViewUrl}, BrowserLiveView komponents apstrādā sarežģītās detaļas par WebSocket savienojuma izveidi, DCV plūsmas patērēšanu un tiešraides video plūsmas atveidošanu jūsu norādītajos izmēros. Šī minimālā JSX integrācija ievērojami vienkāršo priekšgala izstrādi, ļaujot jums koncentrēties uz lietotāja pieredzi ap tiešraides aģentu.

3. AI aģenta pieslēgšana pārlūka vadīšanai

Pēdējais solis savieno jūsu AI aģenta intelektu ar faktiskajām pārlūka darbībām izolētā sesijā. Kamēr BrowserLiveView nodrošina vizuālo atgriezenisko saiti, jūsu AI aģents izmanto Playwright CDP (Chrome DevTools Protocol), lai programmatiski mijiedarbotos ar pārlūku.

Jūsu lietojumprogrammu serveris, kas arī mitina jūsu AI aģentu, izmantos Browser objekta page īpašību (kas ir Playwright Page objekts), lai izpildītu pārlūka darbības.

// Piemēra servera-puses kods (turpinājums no 1. soļa)
// Pieņemot, ka jums ir Playwright-līdzīgs interfeiss vai tieša Playwright lietošana
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (iepriekšējā pārlūka izveides iestatīšana) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Atkārtoti izveidot savienojumu ar esošo sesiju
    await browser.connect(); // Savienoties ar pārlūka sesiju

    const page = browser.page; // Iegūt Playwright Page objektu

    // Piemēra AI aģenta loģika (vienkāršota ilustrācijai)
    // Šeit jūs integrētu ar savu LLM (piemēram, Anthropic Claude, izmantojot Bedrock Converse API)
    // lai noteiktu darbības, pamatojoties uz lietotāja uzvednēm un lapas saturu.
    console.log("Aģents navigē uz example.com...");
    await page.goto('https://www.example.com');
    console.log("Aģents gaidīja 3 sekundes...");
    await page.waitForTimeout(3000); // Simulēt apstrādes laiku

    console.log("Aģents raksta meklēšanas laukā (hipotētiski)...");
    // Example: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Example: await page.click('#search-button');

    const content = await page.content();
    // Izmantojiet LLM, lai analizētu 'saturu' un izlemtu nākamos soļus
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // vai jūsu vēlamo modeli
        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 modelis ieteica darbību:", parsedBody.content[0].text);

    // Pamatojoties uz LLM ieteikumu, izpildīt turpmākas lapas darbības...

    // Neaizmirstiet aizvērt pārlūka sesiju, kad pabeigts
    // await browser.close();
}

// Pēc sesijas uzsākšanas un URL iegūšanas, jūs izsauktu driveAgent(sessionId)

Šī mijiedarbības cilpa — kur jūsu AI aģents analizē lapas saturu, nosaka nākamo darbību un izpilda to, izmantojot Playwright CDP — veido autonomā pārlūkošanas aģenta kodolu. Visas šīs darbības tiek vizuāli atveidotas reāllaikā, izmantojot BrowserLiveView komponentu lietotāja ekrānā.

Jaunu iespēju atklāšana ar iegultiem AI aģentiem

Amazon Bedrock AgentCore BrowserLiveView integrācija ir vairāk nekā tikai tehniska funkcija; tā ir paradigmas maiņa lietotāju mijiedarbībā ar AI aģentiem un uzticībā tiem. Ieguljot reāllaika vizuālo atgriezenisko saiti, izstrādātāji var izveidot ar AI darbinātas lietojumprogrammas, kas ir ne tikai efektīvas, bet arī caurspīdīgas, pārbaudāmas un lietotājam draudzīgas.

Šī iespēja ir īpaši transformējoša lietojumprogrammām, kas ietver:

• Sarežģītas darba plūsmas: Vairāku soļu tiešsaistes procesu, piemēram, datu ievades, jaunu darbinieku apmācības vai normatīvo aktu atbilstības, automatizācija, kur katra soļa redzamība ir ārkārtīgi svarīga.
• Klientu atbalsts: Ļaujot aģentiem novērot AI ko-pilotus, kas risina klientu jautājumus vai pārvietojas sistēmās, nodrošinot precizitāti un dodot iespējas iejaukšanās.
• Apmācība un atkļūdošana: Nodrošinot izstrādātājiem un gala lietotājiem jaudīgu rīku, lai saprastu aģenta uzvedību, atkļūdotu problēmas un apmācītu aģentus, izmantojot tiešu novērošanu.
• Uzlabotas revīzijas pēdas: Vizuālu ierakstu ģenerēšana par aģenta darbībām, ko var kombinēt ar sesiju ierakstiem Amazon S3, lai veiktu visaptverošu pēcpārbaudi un atbilstību.

Spēja tieši straumēt pārlūka sesijas no AWS mākoņa uz klienta pārlūkiem, apejot lietojumprogrammu serveri video plūsmai, piedāvā ievērojamas priekšrocības veiktspējas un mērogojamības ziņā. Šī arhitektūra samazina latentumu un samazina slodzi uz jūsu aizmugures infrastruktūru, ļaujot jums izvietot ļoti atsaucīgus un mērogojamus AI aģentu risinājumus.

Pieņemot BrowserLiveView, jūs ne tikai veidojat AI aģentus; jūs veidojat uzticību, kontroli un bagātīgāku lietotāja pieredzi. Izpētiet iespējas un dodiet saviem lietotājiem pārliecību deleģēt sarežģītus tīmekļa uzdevumus inteliģentiem aģentiem.