Bedrock AgentCore: Integreeri reaalajas tehisintellekti brauseriagent Reacti rakendusse

Tehisintellekti agentide kui läbipaistmatute "mustade kastide" ajastu on kiiresti lõppemas. Kuna tehisintellekt võtab enda peale üha keerukamaid ja autonoomsemaid ülesandeid, eriti veebikeskkondades, ei ole nõudlus läbipaistvuse, usalduse ja kasutajate kontrolli järele kunagi varem olnud kõrgem. Kasutajad peavad mõistma ja kontrollima tehisintellekti agendi nende nimel tehtavaid toiminguid, eriti kui need toimingud hõlmavad veebisaitidel navigeerimist, tundlike andmetega suhtlemist või kriitiliste töövoogude täitmist.

Selle põhiprobleemi lahendamiseks tutvustab Amazon Web Services võimsat lahendust: Amazon Bedrock AgentCore BrowserLiveView komponenti. See uuenduslik tööriist annab arendajatele võimaluse integreerida tehisintellekti agendi sirvimisseansi reaalajas videovoog otse oma Reacti rakendustesse. See integratsioon mitte ainult ei selgita agendi käitumist, vaid pakub kasutajatele ka enneolematut nähtavust ja olulist kontrollitunnet.

Bedrock AgentCore TypeScripti SDK osana lihtsustab BrowserLiveView komponent reaalajas brauserivoogude integreerimist teie rakendusse vaid mõne rea JavaScript XML-i (JSX) abil. Kasutades suure jõudlusega Amazon DCV protokolli, kuvab see agendi seansi, muutes traditsiooniliselt varjatud protsessi visuaalselt kontrollitavaks kogemuseks. See artikkel juhendab teid läbi protsessi, alates seansi alustamisest ja reaalajas vaate URL-i genereerimisest kuni voo kuvamiseni teie Reacti rakenduses ja lõpuks tehisintellekti agendi ühendamiseni, et see brauserit juhiks, samal ajal kui teie kasutajad jälgivad.

Tehisintellekti agendi läbipaistvuse suurendamine BrowserLiveView abil

Tänapäeva kiiresti arenevas agentilise tehisintellekti maastikul lubab veebisirvimise ülesannete delegeerimine tehisintellekti agentidele tohutut tõhususe kasvu. Kuid seda lubadust varjutavad sageli mured agendi töökindluse, täpsuse ja turvalisuse pärast. Ilma selge aknata agendi tegevustesse peavad kasutajad usaldama süsteemi, mida nad ei saa jälgida, mis võib takistada kasutuselevõttu ja piirata juurutamist tundlikes stsenaariumides.

BrowserLiveView komponent lahendab selle probleemi otseselt, avades tehisintellekti agendi "silmad" kasutajale. Kujutage ette tehisintellekti agenti, kelle ülesanne on täita keeruline veebivorm või hankida konkreetset teavet mitmelt veebisaidilt. Traditsiooniliselt saaks kasutaja ainult lõpptulemuse või tegevuste kokkuvõtte, mis paneb nad mõtisklema vahepealsete sammude üle. Integreeritud reaalajas vaatega saavad kasutajad jälgida iga navigeerimist, vormi esitamist ja otsingupäringut reaalajas, kui agent seda teostab.

See kohene visuaalne kinnitus on hindamatu väärtusega. See kinnitab kasutajatele, et agent on õigel lehel, suhtleb õigete elementidega ja edeneb töövoos ettenähtud viisil. See reaalajas tagasiside silmus ületab pelgalt tekstikinnitused; see pakub käegakatsutavat, kontrollitavat auditijälge agendi käitumisest, soodustades suuremat enesekindlust ja usaldust. Reguleeritud või tundlike kliendiandmeid hõlmavate töövoogude puhul võib see visuaalne tõend olla kriitilise tähtsusega vastavuse ja vastutuse tagamisel. Lisaks, stsenaariumides, mis nõuavad inimliku järelevalvet, saab juhendaja otseselt jälgida agendi toiminguid rakenduses, vajadusel sekkudes, ilma voogu häirimata.

Reaalajas agendi jälgimise taga olev arhitektuur

Reaalajas tehisintellekti brauseriagendi sujuv integreerimine Reacti rakendusse, mida toidab Amazon Bedrock AgentCore, on orkestreeritud keeruka, kuid tõhusa arhitektuuri kaudu, mis koosneb kolmest põhikomponendist. Nende osade vastastikuse mõju mõistmine on edukaks rakendamiseks ja juurutamiseks ülioluline.

Suhtlus algab kasutaja veebibrauseriga, mis käitab teie Reacti rakendust. Selles rakenduses kuvatakse BrowserLiveView komponent, mis ootab turvalist, ajaliselt piiratud SigV4-eelallkirjastatud URL-i. See teie rakendusserveri genereeritud URL on võti püsiva WebSocket-ühenduse loomiseks otse AWS-i pilve Bedrock AgentCore teenusega.

Teie rakendusserveril on kahekordne eesmärk: see majutab tehisintellekti agendi loogikat ja toimib vahendajana seansihalduseks. See kutsub Amazon Bedrock AgentCore API-t brauseriseansside käivitamiseks ja genereerib seejärel turvaliselt SigV4-eelallkirjastatud URL-id, mis annavad teie kliendi brauserile juurdepääsu reaalajas vaate voole. Oluline on see, et kuigi teie server orkestreerib agendi toiminguid ja genereerib vajalikud mandaadid, ei halda see videovoogu ise otseselt.

Brauseri automatiseerimise ja videovoogedastuse raske töö toimub AWS-i pilves. Amazon Bedrock AgentCore majutab isoleeritud pilvebrauseri seansse, pakkudes nii automatiseerimise lõpp-punkti – millega teie tehisintellekti agent suhtleb, kasutades Playwright Chrome DevTools Protocol (CDP) – kui ka reaalajas vaate voo lõpp-punkti, mida toidab Amazon DCV. See disain tagab, et DCV reaalajas vaate voog kulgeb otse Amazon Bedrock AgentCore'ist kasutaja brauserisse. See otsene WebSocket-ühendus möödub teie rakendusserverist, minimeerides latentsust, vähendades teie infrastruktuuri üldkulusid ja tagades sujuva, reaalajas vaatamiskogemuse.

Eeltingimused reaalajas tehisintellekti agendi juurutamiseks

Enne oma reaalajas tehisintellekti brauseriagendi rakendamise alustamist on oluline tagada, et teie arenduskeskkond on õigesti konfigureeritud ja teil on vajalikud AWS-i ressursid ja õigused. Nende eeltingimuste järgimine lihtsustab teie arendusprotsessi ja aitab säilitada turvalise tööpositsiooni.

1. Node.js keskkond: Teil on vaja Node.js versiooni 20 või uuemat, mis on teie süsteemi installitud, et käitada teie rakenduse serveripoolseid komponente.
2. AWS-i konto ja piirkond: Vajalik on aktiivne AWS-i konto koos juurdepääsuga toetatud AWS-i piirkonnale, kus Amazon Bedrock AgentCore on saadaval.
3. AWS-i mandaadid ja õigused: Teie AWS-i mandaatidel peavad olema asjakohased Amazon Bedrock AgentCore brauseri õigused. IAM-i õiguste konfigureerimisel on ülioluline järgida vähima privileegi printsiipi. Turvalisuse suurendamiseks kasutage alati ajutisi mandaate, mis on saadud AWS IAM Identity Centerist või AWS Security Token Service'ist (AWS STS), vältides pikaajalisi pääsuvõtmeid.
4. Tehisintellekti mudeli juurdepääs: Kui plaanite agendi juhtimiseks kasutada tehisintellekti mudelit (nagu näites demonstreeritud, mis kasutab Amazon Bedrock Converse API-t koos Anthropic Claude'iga), vajate juurdepääsu sellele konkreetsele mudelile ja kõigile seotud AWS-i Bedrocki õigustele. Siiski pidage meeles, et reaalajas vaade ise on mudeliagnostiline, mis võimaldab teil integreerida mis tahes mudeliteenuse pakkuja või agendi raamistiku, mille valite.
5. SDK installatsioonid:
   • Installige bedrock-agentcore TypeScripti SDK AgentCore'iga suhtlemiseks:

     npm install bedrock-agentcore
     

   • Kui kasutate oma tehisintellekti mudeli jaoks AWS Bedrocki, installige AWS SDK for JavaScript:

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

Reaalajas vaate rakendamise koodibaas on tavaliselt jagatud: serveripoolne kood (seansihalduse ja tehisintellekti agendi loogika jaoks) töötab Node.js-is ja kliendipoolne kood (reaalajas vaate kuvamiseks) töötab Reacti rakenduses, sageli komplekteerituna selliste tööriistadega nagu Vite.

Samm-sammuline integreerimine: seansist voogu

Reaalajas tehisintellekti brauseriagendi integreerimine Amazon Bedrock AgentCore'iga hõlmab selget kolmeastmelist protsessi, mis ühendab teie serveripoolse loogika teie kliendipoolse Reacti rakendusega ja AWS-i pilve tugevate võimalustega.

1. Brauseriseansi käivitamine ja reaalajas vaate URL-i genereerimine

Esimene samm toimub teie rakendusserveris. Siin käivitab teie taustaloogika brauseriseansi Amazon Bedrock AgentCore'is ja hangib turvaliselt vajaliku URL-i reaalajas vaate voogedastuseks.

Kasutate Browser klassi bedrock-agentcore SDK-st. See klass haldab isoleeritud brauserikeskkondade loomise ja haldamise keerukust pilves. Selle sammu peamine väljund on SigV4-eelallkirjastatud URL, mis annab turvalise ja ajutise juurdepääsu brauseriseansi reaalajas videovoole.

// Näide serveripoolsest koodist (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Initsialiseeri Bedrock AgentCore klient (veendu, et õiged AWS-i mandaadid on konfigureeritud)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Kasuta soovitud piirkonda

async function startLiveSession() {
    // Loo uus brauseriseanss
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Genereeri reaalajas vaate URL
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Salvesta browser.sessionId, et hiljem ühendada oma tehisintellekti agent või lõpetada seanss
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// See `liveViewUrl` saadetakse teie Reacti kliendile.

See URL edastatakse seejärel teie Reacti esiotsale, mis kasutab seda reaalajas voo loomiseks.

2. Reaalajas vaate kuvamine oma Reacti rakenduses

Kui teie Reacti rakendus saab teie serverist liveViewUrl-i, on reaalajas voo kuvamine tänu BrowserLiveView komponendile märkimisväärselt lihtne.

// Näide kliendipoolsest koodist (Reacti 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>Ootab reaalajas vaate URL-i...</p>;
    }

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

// Teie peamises App komponendis või lehel:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Too liveViewUrl oma taustaprogrammist
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>Tehisintellekti agendi reaalajas vaade</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Ainult url={liveViewUrl} abil haldab BrowserLiveView komponent WebSocketi ühenduse loomise, DCV voo tarbimise ja reaalajas videovoo kuvamise keerukaid detaile teie määratud mõõtmete piires. See minimaalne JSX-integratsioon lihtsustab oluliselt esiotsa arendust, võimaldades teil keskenduda kasutajakogemusele reaalajas agendi ümber.

3. Tehisintellekti agendi ühendamine brauseri juhtimiseks

Viimane samm ühendab teie tehisintellekti agendi intelligentsuse isoleeritud seansi tegelike brauseritoimingutega. Kui BrowserLiveView pakub visuaalset tagasisidet, siis teie tehisintellekti agent kasutab Playwright CDP-d (Chrome DevTools Protocol), et brauseriga programmisiseselt suhelda.

Teie rakendusserver, mis majutab ka teie tehisintellekti agenti, kasutab Browser objekti page atribuuti (mis on Playwright Page objekt), et täita brauseri toiminguid.

// Näide serveripoolsest koodist (jätk 1. sammust)
// Eeldades, et teil on Playwrighti-laadne liides või otsene Playwrighti kasutus
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (eelnev seadistus brauseri loomiseks) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Ühendu uuesti olemasoleva seansiga
    await browser.connect(); // Ühendu brauseriseansiga

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

    // Näide tehisintellekti agendi loogikast (lihtsustatud illustreerimiseks)
    // Siin integreeriksite oma suure keelemudeliga (nt Anthropic Claude Bedrock Converse API kaudu)
    // et määrata toimingud kasutaja viipade ja lehe sisu põhjal.
    console.log("Agent navigeerib saidile example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent ootas 3 sekundit...");
    await page.waitForTimeout(3000); // Simuleeri töötlusaega

    console.log("Agent sisestab otsingukasti (hüpotheetiliselt)...");
    // Näide: await page.type('#otsinguväli', 'Amazon Bedrock AgentCore');
    // Näide: await page.click('#otsingunupp');

    const content = await page.content();
    // Kasutage suurt keelemudelit sisu analüüsimiseks ja järgmiste sammude otsustamiseks
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // või teie eelistatud mudel
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analüüsi seda veebilehe sisu ja paku välja järgmine tegevus: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("Tehisintellekti mudeli soovitatud tegevus:", parsedBody.content[0].text);

    // Suure keelemudeli soovituse põhjal täitke edasised lehe toimingud...

    // Ära unusta brauseriseanssi sulgeda, kui oled lõpetanud
    // await browser.close();
}

// Pärast seansi käivitamist ja URL-i saamist kutuksite driveAgent(sessionId)

See suhtlussilmus – kus teie tehisintellekti agent analüüsib lehe sisu, määrab järgmise toimingu ja täidab selle Playwright CDP kaudu – moodustab autonoomse sirvimisagendi tuuma. Kõik need toimingud kuvatakse visuaalselt reaalajas kasutaja ekraanil BrowserLiveView komponendi kaudu.

Uute võimaluste avamine integreeritud tehisintellekti agentidega

Amazon Bedrock AgentCore'i BrowserLiveView integreerimine on midagi enamat kui lihtsalt tehniline funktsioon; see on paradigma muutus selles, kuidas kasutajad tehisintellekti agentidega suhtlevad ja neid usaldavad. Integreerides reaalajas visuaalse tagasiside, saavad arendajad luua tehisintellektil põhinevaid rakendusi, mis on mitte ainult tõhusad, vaid ka läbipaistvad, auditeeritavad ja kasutajasõbralikud.

See võimekus on eriti transformatiivne rakenduste jaoks, mis hõlmavad:

• Keerulised tööprotsessid: Mitmeetapiliste veebiprotsesside automatiseerimine, nagu andmesisestus, pardale võtmine või regulatiivne vastavus, kus iga sammu nähtavus on esmatähtis.
• Klienditugi: Võimaldades agentidel jälgida tehisintellekti kaaspiloote kliendipäringute lahendamisel või süsteemides navigeerimisel, tagades täpsuse ja pakkudes sekkumisvõimalusi.
• Koolitus ja silumine: Pakkudes arendajatele ja lõppkasutajatele võimsat tööriista agendi käitumise mõistmiseks, probleemide silumiseks ja agentide koolitamiseks otsese vaatluse kaudu.
• Täiustatud auditijäljed: Agendi toimingute visuaalsete kirjete genereerimine, mida saab kombineerida seansi salvestustega Amazon S3-sse põhjalikuks järelülevaatuseks ja vastavuseks.

Võimalus otse edastada brauseriseansse AWS-i pilvest kliendibrauseritesse, möödudes videovoo osas rakendusserverist, pakub olulisi eeliseid jõudluse ja skaleeritavuse osas. See arhitektuur minimeerib latentsust ja vähendab koormust teie taustainfrastruktuurile, võimaldades teil juurutada väga tundlikke ja skaleeritavaid tehisintellekti agendi lahendusi.

Võttes kasutusele BrowserLiveView, ei ehita te ainult tehisintellekti agente; te ehitate usaldust, kontrolli ja rikkalikumat kasutajakogemust. Avastage võimalusi ja andke oma kasutajatele kindlus delegeerida keerulisi veebiülesandeid intelligentsele agentidele.