Bedrock AgentCore: Sluit Regstreekse KI-blaaieragent in React in

• As jy AWS Bedrock vir jou KI-model gebruik, installeer die AWS SDK vir JavaScript:

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

Die kodebasis vir die implementering van Regstreekse Kyk is tipies verdeel: bediener-kant kode (vir sessiebestuur en KI-agentlogika) loop in Node.js, en kliënt-kant kode (vir die lewering van die Regstreekse Kyk) loop binne 'n React-toepassing, dikwels saamgebundel met gereedskap soos Vite.

Stap-vir-stap Integrasie: Van Sessie tot Stroom

Die integrasie van 'n regstreekse KI-blaaieragent met Amazon Bedrock AgentCore behels 'n duidelike, drie-stap proses, wat jou bediener-kant logika met jou kliënt-kant React-toepassing en die robuuste vermoëns van AWS Wolk verbind.

1. Begin van 'n Blaaiersessie en Generering van die Regstreekse Kyk-URL

Die eerste stap vind plaas op jou toepassingsbediener. Dit is waar jou agterkant-logika 'n blaaier-sessie binne Amazon Bedrock AgentCore inisieer en veilig die nodige URL verkry om die regstreekse aansig te stroom.

Jy sal die Browser-klas van die bedrock-agentcore SDK gebruik. Hierdie klas hanteer die kompleksiteit van die skep en bestuur van geïsoleerde blaaieromgewings in die wolk. Die sleuteluitset van hierdie stap is 'n SigV4-voorgetekende URL, wat veilige, tydelike toegang tot die regstreekse videostroom van die blaaier-sessie verleen.

// Voorbeeld bediener-kant kode (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Initialiseer Bedrock AgentCore kliënt (verseker dat die korrekte AWS-geloofsbriewe gekonfigureer is)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Gebruik jou verlangde streek

async function startLiveSession() {
    // Skep 'n nuwe blaaier-sessie
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Genereer die Regstreekse Kyk-URL
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Regstreekse Kyk-URL:', liveViewUrl);

    // Stoor browser.sessionId om later jou KI-agent te verbind of die sessie te beëindig
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Hierdie `liveViewUrl` sal na jou React-kliënt gestuur word.

Hierdie URL word dan na jou React-frontend gestuur, wat dit sal gebruik om die regstreekse stroom te vestig.

2. Lewering van die Regstreekse Kyk in Jou React-toepassing

Sodra jou React-toepassing die liveViewUrl van jou bediener ontvang, is die lewering van die intydse stroom merkwaardig eenvoudig, danksy die BrowserLiveView-komponent.

// Voorbeeld kliënt-kant kode (React-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>Wag vir Regstreekse Kyk-URL...</p>;
    }

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

// In jou hoof App-komponent of bladsy:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Kry die liveViewUrl van jou agterkant
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>KI-agent Regstreekse Kyk</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Met net url={liveViewUrl}, hanteer die BrowserLiveView-komponent die ingewikkelde besonderhede van die vestiging van die WebSocket-verbinding, die verbruik van die DCV-stroom, en die lewering van die regstreekse videovoer binne jou gespesifiseerde afmetings. Hierdie minimale JSX-integrasie vereenvoudig die frontend-ontwikkeling grootliks, wat jou toelaat om te fokus op die gebruikerservaring rondom die regstreekse agent.

3. Koppeling van 'n KI-agent om die Blaaier te Bestuur

Die finale stap verbind jou KI-agent se intelligensie met die werklike blaaier-aksies binne die geïsoleerde sessie. Terwyl die BrowserLiveView die visuele terugvoer verskaf, gebruik jou KI-agent Playwright CDP (Chrome DevTools Protokol) om programmaties met die blaaier te interaksie.

Jou toepassingsbediener, wat ook jou KI-agent huisves, sal die Browser-objek se page-eiendom (wat 'n Playwright Page-objek is) gebruik om blaaier-aksies uit te voer.

// Voorbeeld bediener-kant kode (vervolg van stap 1)
// As jy 'n Playwright-agtige koppelvlak of direkte Playwright-gebruik het
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (vorige opstelling vir blaaier-skepping) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Herkoppel aan bestaande sessie
    await browser.connect(); // Koppel aan die blaaier-sessie

    const page = browser.page; // Kry die Playwright Page-objek

    // Voorbeeld KI-agentlogika (vereenvoudig vir illustrasie)
    // Hier sou jy integreer met jou LLM (bv. Anthropic Claude via Bedrock Converse API)
    // om aksies te bepaal gebaseer op gebruikersaanwysings en bladsy-inhoud.
    console.log("Agent navigeer na example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent het 3 sekondes gewag...");
    await page.waitForTimeout(3000); // Simuleer verwerkingstyd

    console.log("Agent tik in 'n soekkassie (hipoteties)...");
    // Voorbeeld: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Voorbeeld: await page.click('#search-button');

    const content = await page.content();
    // Gebruik 'n LLM om 'content' te analiseer en volgende stappe te besluit
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // of jou voorkeurmodel
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analiseer hierdie webbladsy-inhoud en stel die volgende aksie voor: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("KI-model het aksie voorgestel:", parsedBody.content[0].text);

    // Gebaseer op LLM se voorstel, voer verdere bladsy-aksies uit...

    // Moenie vergeet om die blaaier-sessie te sluit wanneer klaar nie
    // await browser.close();
}

// Nadat die sessie begin is en die URL verkry is, sou jy dan driveAgent(sessionId) aanroep

Hierdie interaksie-lus – waar jou KI-agent bladsy-inhoud analiseer, die volgende aksie bepaal, en dit via Playwright CDP uitvoer – vorm die kern van 'n outonome blaai-agent. Al hierdie aksies word intyds visueel gelewer deur die BrowserLiveView-komponent op die gebruiker se skerm.

Ontsluit Nuwe Moontlikhede met Ingeslote KI-agente

Die integrasie van Amazon Bedrock AgentCore se BrowserLiveView is meer as net 'n tegniese kenmerk; dit is 'n paradigmaskuif in hoe gebruikers met KI-agente interaksie het en hulle vertrou. Deur intydse visuele terugvoer in te sluit, kan ontwikkelaars KI-aangedrewe toepassings skep wat nie net doeltreffend is nie, maar ook deursigtig, ouditeerbaar en gebruikersvriendelik.

Hierdie vermoë is veral transformerend vir toepassings wat behels:

• Komplekse Werkstromings: Outomatisering van multi-stap aanlynprosesse soos datainvoer, aanboording, of regulatoriese nakoming, waar sigbaarheid in elke stap uiters belangrik is.
• Kliëntediens: Om agente toe te laat om KI-mede-loodse te waarneem wat kliëntnavrae oplos of stelsels navigeer, wat akkuraatheid verseker en geleenthede bied vir ingryping.
• Opleiding en Ontfouting: Verskaffing van ontwikkelaars en eindgebruikers met 'n kragtige hulpmiddel om agentgedrag te verstaan, probleme te ontfout, en agente op te lei deur direkte waarneming.
• Verbeterde Ouditspore: Generering van visuele rekords van agentaksies, wat gekombineer kan word met sessie-opnames na Amazon S3 vir omvattende na-die-feit-oorsig en nakoming.

Die vermoë om blaaier-sessies direk vanaf die AWS Wolk na kliëntblaaiers te stroom, deur die toepassingsbediener vir die videostroom te omseil, bied beduidende voordele in terme van prestasie en skaalbaarheid. Hierdie argitektuur minimaliseer latensie en verminder die las op jou backend-infrastruktuur, wat jou toelaat om hoogs responsiewe en skaalbare KI-agentoplossings te ontplooi.

Deur BrowserLiveView aan te neem, bou jy nie net KI-agente nie; jy bou vertroue, beheer en 'n ryker gebruikerservaring. Verken die moontlikhede en bemagtig jou gebruikers met die vertroue om komplekse webtake aan intelligente agente te delegeer.