Bedrock AgentCore: Élő AI böngészőügynök beágyazása Reactbe

• Ha AWS Bedrockot használ AI modelljéhez, telepítse az AWS SDK for JavaScriptet:

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

Az Élő nézet megvalósításához szükséges kódbázis általában felosztott: a szerveroldali kód (munkamenet-kezeléshez és AI ügynök logikához) Node.js-ben fut, a kliensoldali kód (az Élő nézet rendereléséhez) pedig egy React alkalmazáson belül, gyakran olyan eszközökkel csomagolva, mint a Vite.

Lépésről lépésre integráció: munkamenettől a streamig

Egy élő AI böngészőügynök integrálása az Amazon Bedrock AgentCore-ral egy világos, háromlépéses folyamatot foglal magában, amely összeköti az Ön szerveroldali logikáját a kliensoldali React alkalmazásával és az AWS Cloud robusztus képességeivel.

1. Böngészőmunkamenet indítása és az Élő nézet URL generálása

Az első lépés az alkalmazásszerveren történik. Itt indítja el a backend logikája a böngészőmunkamenetet az Amazon Bedrock AgentCore-on belül, és biztonságosan megszerzi az élő nézet streameléséhez szükséges URL-t.

A Browser osztályt fogja használni a bedrock-agentcore SDK-ból. Ez az osztály kezeli az elszigetelt böngésző környezetek létrehozásának és kezelésének komplexitását a felhőben. Ennek a lépésnek a kulcsfontosságú kimenete egy SigV4-előre aláírt URL, amely biztonságos, ideiglenes hozzáférést biztosít a böngészőmunkamenet élő videóstreamjéhez.

// Példa szerveroldali kód (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Bedrock AgentCore kliens inicializálása (győződjön meg a megfelelő AWS hitelesítő adatok konfigurálásáról)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Használja a kívánt régiót

async function startLiveSession() {
    // Új böngészőmunkamenet létrehozása
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Az Élő nézet URL generálása
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Mentse el a browser.sessionId-t, hogy később csatlakoztathassa az AI ügynökét vagy leállíthassa a munkamenetet
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Ez a `liveViewUrl` elküldésre kerül a React kliensnek.

Ez az URL ezután átadásra kerül az Ön React frontendjének, amely az élő stream létrehozásához fogja használni.

2. Az Élő nézet renderelése a React alkalmazásban

Miután a React alkalmazás megkapja a liveViewUrl-t a szerverétől, a valós idejű stream renderelése rendkívül egyszerű, köszönhetően a BrowserLiveView komponensnek.

// Példa kliensoldali kód (React komponens)
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>Várakozás az Élő nézet URL-re...</p>;
    }

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

// A fő App komponensben vagy oldalon:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Az élőViewUrl lekérése a backendről
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>AI ügynök élő nézet</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Mindössze az url={liveViewUrl} segítségével a BrowserLiveView komponens kezeli a WebSocket kapcsolat létesítésének, a DCV stream fogyasztásának és az élő videóhírcsatorna renderelésének bonyolult részleteit a megadott méretekben. Ez a minimális JSX integráció nagyban leegyszerűsíti a frontend fejlesztést, lehetővé téve, hogy a felhasználói élményre koncentráljon az élő ügynök körül.

3. AI ügynök bekötése a böngésző vezérlésére

Az utolsó lépés összekapcsolja az AI ügynök intelligenciáját a tényleges böngésző műveletekkel az elszigetelt munkameneten belül. Míg a BrowserLiveView biztosítja a vizuális visszajelzést, az AI ügynök Playwright CDP-t (Chrome DevTools Protocol) használ a böngésző programozott interakciójához.

Az Ön alkalmazásszervere, amely az AI ügynökét is hosztolja, a Browser objektum page tulajdonságát (amely egy Playwright Page objektum) fogja használni a böngésző műveletek végrehajtásához.

// Példa szerveroldali kód (folytatás az 1. lépésből)
// Feltételezve, hogy van Playwright-szerű interfész vagy közvetlen Playwright használat
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (előző beállítás a böngésző létrehozásához) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Újracsatlakozás a meglévő munkamenethez
    await browser.connect(); // Csatlakozás a böngészőmunkamenethez

    const page = browser.page; // A Playwright Page objektum lekérése

    // Példa AI ügynök logika (illusztráció céljából egyszerűsítve)
    // Itt integrálná az LLM-et (pl. Anthropic Claude a Bedrock Converse API-n keresztül),
    // hogy meghatározza a műveleteket a felhasználói promptok és az oldaltartalom alapján.
    console.log("Az ügynök navigál az example.com-ra...");
    await page.goto('https://www.example.com');
    console.log("Az ügynök 3 másodpercet várt...");
    await page.waitForTimeout(3000); // Feldolgozási idő szimulálása

    console.log("Az ügynök beír egy keresőmezőbe (hipotetikusan)...");
    // Példa: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Példa: await page.click('#search-button');

    const content = await page.content();
    // Használjon LLM-et az 'content' elemzéséhez és a következő lépések eldöntéséhez
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // vagy az Ön által preferált modell
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Elemezze ezt a weboldal tartalmát, és javasolja a következő műveletet: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("Az AI modell javasolt művelete:", parsedBody.content[0].text);

    // Az LLM javaslata alapján további oldal műveletek végrehajtása...

    // Ne felejtse el bezárni a böngészőmunkamenetet, ha elkészült
    // await browser.close();
}

// A munkamenet indítása és az URL lekérése után hívja meg a driveAgent(sessionId) függvényt

Ez az interakciós ciklus – ahol az AI ügynök elemzi az oldaltartalmat, meghatározza a következő műveletet, és végrehajtja azt Playwright CDP-n keresztül – képezi az autonóm böngészőügynök magját. Mindezek a műveletek valós időben, vizuálisan renderelődnek a felhasználó képernyőjén a BrowserLiveView komponensen keresztül.

Új lehetőségek felszabadítása beágyazott AI ügynökökkel

Az Amazon Bedrock AgentCore BrowserLiveView integrációja több mint egy technikai funkció; paradigmaváltást jelent abban, ahogyan a felhasználók interakcióba lépnek az AI ügynökökkel és megbíznak bennük. A valós idejű vizuális visszajelzés beágyazásával a fejlesztők olyan AI-alapú alkalmazásokat hozhatnak létre, amelyek nemcsak hatékonyak, hanem átláthatóak, ellenőrizhetők és felhasználóbarátak is.

Ez a képesség különösen átalakító erejű az alábbi alkalmazások számára:

• Összetett munkafolyamatok: Többlépéses online folyamatok automatizálása, mint például adatbevitel, bevezetés vagy szabályozási megfelelőség, ahol minden lépés láthatósága kiemelten fontos.
• Ügyféltámogatás: Lehetővé teszi az ügynökök számára, hogy megfigyeljék az AI társ-pilótákat az ügyfélkérdések megoldásában vagy a rendszerekben való navigálásban, biztosítva a pontosságot és lehetőséget adva a beavatkozásra.
• Képzés és hibakeresés: Erős eszközt biztosít a fejlesztőknek és a végfelhasználóknak az ügynök viselkedésének megértéséhez, a hibák kijavításához és az ügynökök képzéséhez közvetlen megfigyelés révén.
• Fokozott auditnyomok: Vizuális feljegyzések készítése az ügynök műveleteiről, amelyek a munkamenet-felvételekkel kombinálva az Amazon S3-ba átfogó utólagos felülvizsgálatot és megfelelést tesznek lehetővé.

A böngészőmunkamenetek közvetlen streamelésének képessége az AWS Cloudból a kliens böngészőkbe, kikerülve az alkalmazásszervert a videóstream számára, jelentős előnyöket kínál a teljesítmény és a skálázhatóság szempontjából. Ez az architektúra minimalizálja a késleltetést és csökkenti a backend infrastruktúra terhelését, lehetővé téve rendkívül reszponzív és skálázható AI ügynök megoldások telepítését.

A BrowserLiveView elfogadásával nem csupán AI ügynököket épít; bizalmat, kontrollt és gazdagabb felhasználói élményt épít. Fedezze fel a lehetőségeket, és erősítse meg felhasználóit azzal a magabiztossággal, hogy összetett webes feladatokat delegáljanak intelligens ügynököknek.