Bedrock AgentCore: Fella inn rauntíma gervigreindarvafrastýringu í React

• Ef þú notar AWS Bedrock fyrir gervigreindarlíkan þitt, settu upp AWS SDK fyrir JavaScript:

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

Grunnkóðinn fyrir framkvæmd Live View er venjulega skipt: miðlarahlutakóði (fyrir fundastjórnun og rökfræði gervigreindarstýringar) keyrir í Node.js, og viðskiptavinahlutakóði (fyrir birtingu Live View) keyrir innan React forrits, oft bútaður saman með tólum eins og Vite.

Skref fyrir skref samþætting: Frá fundi til straums

Samþætting lifandi gervigreindarvafrastýringar með Amazon Bedrock AgentCore felur í sér skýrt, þriggja skrefa ferli, sem brúar rökfræði miðlarahlutans við React forritið þitt og öfluga eiginleika AWS skýsins.

1. Hefja vafrafund og búa til Live View vefslóðina

Fyrsta skrefið á sér stað á forritamiðlaranum þínum. Það er hér sem bakenda rökfræðin þín hefur vafrafund innan Amazon Bedrock AgentCore og aflar sér öruggt nauðsynlegrar vefslóðar til að streyma lifandi sýn.

Þú munt nota Browser flokkinn úr bedrock-agentcore SDK. Þessi flokkur sér um flókna ferlið við að búa til og stjórna einangruðum vafra umhverfum í skýinu. Lykilútgangurinn úr þessu skrefi er SigV4-forskrifað vefslóð, sem veitir öruggan, tímabundinn aðgang til að streyma lifandi myndstraumi vafrafundarins.

// Dæmi um kóða á miðlarahlið (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Frumstilla Bedrock AgentCore client (tryggja að AWS skilríki séu rétt stillt)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Notaðu þitt æskilega svæði

async function startLiveSession() {
    // Búa til nýjan vafrafund
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Búa til Live View vefslóðina
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Geyma browser.sessionId til að tengja gervigreindarstýringuna þína síðar eða ljúka fundinum
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Þessi `liveViewUrl` verður send til React viðskiptavinarins þíns.

Þessi vefslóð er síðan send til React framenda þinnar, sem mun nota hana til að koma á lifandi straumi.

2. Birta Live View í React forritinu þínu

Þegar React forritið þitt fær liveViewUrl frá miðlaranum þínum er það ótrúlega einfalt að birta rauntímastrauminn, þökk sé BrowserLiveView íhlutinum.

// Dæmi um kóða á viðskiptavinahlið (React íhlutur)
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>Bíður eftir Live View vefslóð...</p>;
    }

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

// Í aðal App íhlutnum þínum eða síðu:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Sækja liveViewUrl frá bakenda þínum
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>Lifandi sýn gervigreindarstýringar</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Með einfaldlega url={liveViewUrl}, sér BrowserLiveView íhluturinn um flókna smáatriði þess að koma á WebSocket tengingu, neyta DCV straumsins og birta lifandi myndstrauminn innan tilgreindra vídda. Þessi lágmarks JSX samþætting einfaldar þróun framenda verulega, sem gerir þér kleift að einbeita þér að notendaupplifuninni í kringum lifandi stýringuna.

3. Tengja gervigreindarstýringu til að knýja vafrann

Síðasta skrefið tengir greind gervigreindarstýringarinnar þinnar við raunverulegar vafraaðgerðir innan einangraða fundarins. Þó að BrowserLiveView veitir sjónræna endurgjöf, notar gervigreindarstýringin þín Playwright CDP (Chrome DevTools Protocol) til að hafa samskipti við vafrann á forritunarlegum hátt.

Forritamiðlarinn þinn, sem einnig hýsir gervigreindarstýringuna þína, mun nota page eignina á Browser hlutnum (sem er Playwright Page hlutur) til að framkvæma vafraaðgerðir.

// Dæmi um kóða á miðlarahlið (framhald frá skrefi 1)
// Að því gefnu að þú hafir Playwright-líkt viðmót eða beina Playwright notkun
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (fyrri uppsetning fyrir vafra tilbúning) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Tengjast aftur við núverandi fund
    await browser.connect(); // Tengjast vafrafundinum

    const page = browser.page; // Fá Playwright Page hlutinn

    // Dæmi um rökfræði gervigreindarstýringar (einfölduð til skýringar)
    // Hér myndir þú samþætta LLM þinn (t.d. Anthropic Claude í gegnum Bedrock Converse API)
    // til að ákvarða aðgerðir byggðar á skilaboðum notenda og innihaldi síðunnar.
    console.log("Stýringin fer á example.com...");
    await page.goto('https://www.example.com');
    console.log("Stýringin beið í 3 sekúndur...");
    await page.waitForTimeout(3000); // Líkir eftir vinnslutíma

    console.log("Stýringin slær inn í leitarreit (ímyndað)...");
    // Dæmi: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Dæmi: await page.click('#search-button');

    const content = await page.content();
    // Nota LLM til að greina 'content' og ákveða næstu skref
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // eða þitt valda líkan
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Greindu innihald þessarar vefsíðu og leggðu til næstu aðgerð: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("Gervigreindarlíkan lagði til aðgerð:", parsedBody.content[0].text);

    // Byggt á tillögu LLM, framkvæma frekari síðuaðgerðir...

    // Ekki gleyma að loka vafrafundinum þegar lokið er
    // await browser.close();
}

// Eftir að fundurinn er hafinn og vefslóðin fengin, myndir þú síðan kalla driveAgent(sessionId)

Þessi samskiptalykkja — þar sem gervigreindarstýringin þín greinir innihald síðunnar, ákvarðar næstu aðgerð og framkvæmir hana í gegnum Playwright CDP — myndar kjarna sjálfstæðs vafra stýringar. Allar þessar aðgerðir eru sjónrænt birtar í rauntíma í gegnum BrowserLiveView íhlutinn á skjá notandans.

Opnar nýja möguleika með innfelldum gervigreindarstýringum

Samþætting Amazon Bedrock AgentCore BrowserLiveView er meira en bara tæknilegur eiginleiki; það er paradigmaskipting í því hvernig notendur hafa samskipti við og treysta gervigreindarstýringum. Með því að fella inn rauntíma sjónræna endurgjöf geta þróunaraðilar búið til gervigreindar-knúin forrit sem eru ekki aðeins skilvirk heldur einnig gagnsæ, endurskoðunarhæf og notendavæn.

Þessi geta er sérstaklega umbreytandi fyrir forrit sem fela í sér:

• Flókin verkflæði: Sjálfvirknivæðing margra þrepa ferla á netinu eins og gagnainnfærslu, innskráningu eða eftirfylgni reglugerða, þar sem sýnileiki á hverju skrefi er mikilvægur.
• Viðskiptavinastuðningur: Að leyfa starfsmönnum að fylgjast með gervigreindarstoðverkum sem leysa fyrirspurnir viðskiptavina eða vafra um kerfi, sem tryggir nákvæmni og veitir tækifæri til íhlutunar.
• Þjálfun og kembileit: Að veita þróunaraðilum og endanotendum öflugt tól til að skilja hegðun stýringarinnar, kemba vandamál og þjálfa stýringar með beinni athugun.
• Auknar endurskoðunarleiðir: Að búa til sjónrænar skrár yfir aðgerðir stýringarinnar, sem hægt er að sameina með fundarupptökum í Amazon S3 fyrir ítarlega endurskoðun eftir á og samræmi.

Hæfileikinn til að streyma vafrasessjónum beint frá AWS skýinu til viðskiptavinavafra, framhjá forritamiðlaranum fyrir myndstrauminn, býður upp á verulega kosti hvað varðar afköst og skalanleika. Þessi arkitektúr lágmarkar biðtíma og dregur úr byrðinni á bakenda innviði þínum, sem gerir þér kleift að útfæra mjög móttækilegar og skalanlegar gervigreindarstýringarlausnir.

Með því að taka upp BrowserLiveView, ertu ekki bara að byggja gervigreindarstýringar; þú ert að byggja traust, stjórn og ríkari notendaupplifun. Skoðaðu möguleikana og styrktu notendur þína með sjálfstrausti til að fela flókin vefverkefni snjöllum stýringum.