Bedrock AgentCore: Вградете AI прелистувачки агент во живо во React

Ерата на AI агенти кои функционираат како непроѕирни „црни кутии“ брзо се ближи кон крајот. Како што вештачката интелигенција презема сè посложени и поавтономни задачи, особено во веб-околини, побарувачката за транспарентност, доверба и корисничка контрола никогаш не била поголема. Корисниците треба да ги разберат и потврдат дејствата што AI агент ги презема во нивно име, особено кога тие дејства вклучуваат навигација на веб-страници, интеракција со чувствителни податоци или извршување критични работни процеси.

Соочувајќи се со овој фундаментален предизвик, Amazon Web Services претставува моќно решение: компонентата Amazon Bedrock AgentCore BrowserLiveView. Оваа иновативна алатка им овозможува на програмерите да вградат жив, видео пренос во реално време од сесијата за прелистување на AI агент директно во нивните React апликации. Оваа интеграција не само што го демистифицира однесувањето на агентот, туку им овозможува на корисниците невидена видливост и клучно чувство на контрола.

Како дел од Bedrock AgentCore TypeScript SDK, компонентата BrowserLiveView ја поедноставува интеграцијата на преноси од прелистувач во живо во вашата апликација со само неколку линии JavaScript XML (JSX). Користејќи го протоколот Amazon DCV со високи перформанси, тој ја прикажува сесијата на агентот, ефикасно трансформирајќи го традиционално скриениот процес во визуелно проверливо искуство. Оваа статија ќе ве води низ процесот, од започнување сесија и генерирање на URL за Приказ во живо, до прикажување на преносот во вашата React апликација, и конечно, поврзување на AI агент за управување со прелистувачот додека вашите корисници гледаат.

Подобрување на транспарентноста на AI агентот со BrowserLiveView

Во денешниот брзо развиен пејзаж на Агентички AI, способноста за делегирање на задачи за веб-прелистување на AI агенти ветува огромни зголемувања на ефикасноста. Меѓутоа, ова ветување често е ублажено со загриженоста за доверливоста, точноста и безбедноста на агентот. Без јасен прозорец во операциите на агентот, корисниците се оставени да му веруваат на систем што не можат да го набљудуваат, што може да го попречи усвојувањето и да го ограничи распоредувањето во чувствителни сценарија.

Компонентата BrowserLiveView директно се соочува со овој предизвик со отворање на „очите“ на AI агентот за корисникот. Замислете AI агент задолжен за пополнување комплексна онлајн форма или за преземање специфични информации од повеќе веб-страници. Традиционално, корисникот би добил само конечен излез или резиме на дејства, оставајќи го да се прашува за меѓучекорите. Со вграден Приказ во живо, корисниците можат да ја следат секоја навигација, поднесување форма и пребарување во реално време како што агентот ги извршува.

Оваа итна визуелна потврда е бесценета. Таа ги уверува корисниците дека агентот е на точната страница, интеракција со вистинските елементи и напредува низ работниот процес како што е наменет. Оваа повратна информација во реално време оди подалеку од само текстуални потврди; таа обезбедува опиплива, проверлива ревизорска трага од однесувањето на агентот, поттикнувајќи поголема доверба. За работни процеси кои се регулирани или вклучуваат чувствителни податоци за клиентите, овој визуелен доказ може да биде критичен за усогласеност и одговорност. Понатаму, во сценарија кои бараат човечки надзор, надзорникот може директно да ги набљудува дејствата на агентот во рамките на апликацијата, интервенирајќи доколку е потребно, без да го наруши протокот.

Архитектурата зад набљудувањето на агентот во реално време

Беспрекорната интеграција на AI прелистувачки агент во живо во React апликација напојувана од Amazon Bedrock AgentCore е оркестрирана преку софистицирана, но ефикасна архитектура која се состои од три клучни компоненти. Разбирањето на меѓусебното дејство помеѓу овие делови е клучно за успешна имплементација и распоредување.

Интеракцијата започнува со веб-прелистувачот на корисникот, кој ја извршува вашата React апликација. Во рамките на оваа апликација, се прикажува компонентата BrowserLiveView, чекајќи безбеден, временски ограничен SigV4-presigned URL. Овој URL, генериран од серверот на вашата апликација, е клучот за воспоставување постојана WebSocket конекција директно до услугата Bedrock AgentCore во AWS Cloud.

Серверот на вашата апликација служи за двојна цел: тој ја хостира логиката на AI агентот и дејствува како посредник за управување со сесиите. Тој го повикува Amazon Bedrock AgentCore API за да иницира сесии на прелистувач и потоа безбедно ги генерира SigV4-presigned URL-ите што му даваат на вашиот клиентски прелистувач пристап до преносот на Приказ во живо. Клучно, додека вашиот сервер ги оркестрира дејствата на агентот и ги генерира потребните акредитиви, тој не го ракува директно видео преносот.

Тешката работа на автоматизација на прелистувачот и видео преносот се случува во рамките на AWS Cloud. Amazon Bedrock AgentCore хостира изолирани cloud сесии на прелистувач, обезбедувајќи ја и крајната точка за автоматизација—со која вашиот AI агент комуницира користејќи го Playwright Chrome DevTools Protocol (CDP)—и крајната точка за пренос на Приказ во живо, напојувана од Amazon DCV. Овој дизајн осигурува дека DCV преносот на Приказ во живо тече директно од Amazon Bedrock AgentCore до прелистувачот на корисникот. Оваа директна WebSocket конекција го заобиколува серверот на вашата апликација, минимизирајќи ја латентноста, намалувајќи ги трошоците за вашата инфраструктура и обезбедувајќи мазно искуство за гледање во реално време.

Предуслови за распоредување на вашиот AI агент во живо

Пред да се нурнете во имплементацијата на вашиот AI прелистувачки агент во живо, од суштинско значење е да се осигурате дека вашата развојна средина е правилно конфигурирана и дека ги имате потребните AWS ресурси и дозволи. Придржувањето кон овие предуслови ќе го рационализира вашиот развоен процес и ќе помогне да се одржи безбедна оперативна положба.

1. Node.js околина: Ќе ви треба Node.js верзија 20 или понова инсталирана на вашиот систем за извршување на серверските компоненти на вашата апликација.
2. AWS сметка и регион: Потребна е активна AWS сметка, со пристап до поддржан AWS регион каде што е достапен Amazon Bedrock AgentCore.
3. AWS акредитиви и дозволи: Вашите AWS акредитиви мора да ги имаат соодветните Amazon Bedrock AgentCore Browser дозволи. Клучно е да се следи принципот на најмала привилегија при конфигурирање на AWS Identity and Access Management (IAM) дозволи. За подобрена безбедност, секогаш користете привремени акредитиви добиени од AWS IAM Identity Center или AWS Security Token Service (AWS STS), избегнувајќи долготрајни клучеви за пристап.
4. Пристап до AI модел: Доколку планирате да користите AI модел за управување со агентот (како што е демонстрирано во примерокот, кој користи Amazon Bedrock Converse API со Anthropic Claude), ќе ви треба пристап до тој специфичен модел и сите поврзани AWS Bedrock дозволи. Меѓутоа, запомнете дека самиот Приказ во живо е модел-независен, што ви овозможува да интегрирате кој било провајдер на модел или рамка на агент по ваш избор.
5. Инсталации на SDK:
   • Инсталирајте го bedrock-agentcore TypeScript SDK за интеракција со AgentCore:

     npm install bedrock-agentcore
     

   • Доколку користите AWS Bedrock за вашиот AI модел, инсталирајте го AWS SDK за JavaScript:

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

Кодната база за имплементација на Приказ во живо обично е поделена: серверскиот код (за управување со сесии и логика на AI агент) се извршува во Node.js, а клиентскиот код (за прикажување на Приказ во живо) се извршува во React апликација, често спакуван со алатки како Vite.

Чекор-по-чекор интеграција: Од сесија до пренос

Интегрирањето на AI прелистувачки агент во живо со Amazon Bedrock AgentCore вклучува јасен, тристепен процес, кој ја поврзува вашата серверска логика со вашата клиентска React апликација и робусните можности на AWS Cloud.

1. Започнување сесија на прелистувач и генерирање на URL за Приказ во живо

Првиот чекор се случува на серверот на вашата апликација. Овде вашата серверска логика иницира сесија на прелистувач во рамките на Amazon Bedrock AgentCore и безбедно го добива потребниот URL за пренос на Приказ во живо.

Ќе ја користите класата Browser од bedrock-agentcore SDK. Оваа класа ја ракува сложеноста на креирање и управување со изолирани прелистувачки средини во облакот. Клучниот излез од овој чекор е SigV4-presigned URL, кој овозможува безбеден, привремен пристап до видео преносот во живо од сесијата на прелистувачот.

// Пример серверски код (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Иницијализирај го Bedrock AgentCore клиентот (осигурајте се дека се конфигурирани соодветни AWS акредитиви)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Користете го саканиот регион

async function startLiveSession() {
    // Креирај нова сесија на прелистувач
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Генерирај го URL-от за Приказ во живо
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Зачувај browser.sessionId за подоцна да го поврзете вашиот AI агент или да ја прекинете сесијата
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Овој `liveViewUrl` ќе биде испратен до вашиот React клиент.

Овој URL потоа се пренесува на вашиот React frontend, кој ќе го користи за да воспостави пренос во живо.

2. Прикажување на Приказ во живо во вашата React апликација

Откако вашата React апликација ќе го прими liveViewUrl од вашиот сервер, прикажувањето на преносот во реално време е изненадувачки едноставно, благодарение на компонентата BrowserLiveView.

// Пример клиентски код (React компонента)
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>Чекање за URL за Приказ во живо...</p>;
    }

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

// Во вашата главна App компонента или страница:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Преземете го liveViewUrl од вашиот backend
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>AI Агент Приказ во живо</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Со само url={liveViewUrl}, компонентата BrowserLiveView ги ракува сложените детали за воспоставување на WebSocket конекција, конзумирање на DCV преносот и прикажување на видео преносот во живо во рамките на вашите одредени димензии. Оваа минимална JSX интеграција значително го поедноставува развојот на frontend, овозможувајќи ви да се фокусирате на корисничкото искуство околу агентот во живо.

3. Поврзување на AI агент за управување со прелистувачот

Последниот чекор ја поврзува интелигенцијата на вашиот AI агент со вистинските дејства на прелистувачот во изолираната сесија. Додека BrowserLiveView обезбедува визуелна повратна информација, вашиот AI агент користи Playwright CDP (Chrome DevTools Protocol) за програмски интеракции со прелистувачот.

Серверот на вашата апликација, кој исто така го хостира вашиот AI агент, ќе го користи својството page на објектот Browser (кое е Playwright Page објект) за извршување на дејства на прелистувачот.

// Пример серверски код (продолжение од чекор 1)
// Претпоставувајќи дека имате интерфејс сличен на Playwright или директна употреба на Playwright
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (претходно поставување за креирање прелистувач) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Повторно поврзете се на постоечка сесија
    await browser.connect(); // Поврзете се на сесијата на прелистувачот

    const page = browser.page; // Добијте го Playwright Page објектот

    // Пример логика на AI агент (поедноставена за илустрација)
    // Овде ќе се интегрирате со вашиот LLM (на пр., Anthropic Claude преку Bedrock Converse API)
    // за да одредите дејства врз основа на корисничките барања и содржината на страницата.
    console.log("Агентот навигира до example.com...");
    await page.goto('https://www.example.com');
    console.log("Агентот чекаше 3 секунди...");
    await page.waitForTimeout(3000); // Симулирај време на обработка

    console.log("Агентот внесува текст во поле за пребарување (хипотетички)...");
    // Пример: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Пример: await page.click('#search-button');

    const content = await page.content();
    // Користете LLM за да ја анализира 'содржината' и да одлучи за следните чекори
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // или вашиот префериран модел
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Анализирај ја содржината на оваа веб-страница и предложи го следното дејство: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("AI Моделот предложи дејство:", parsedBody.content[0].text);

    // Врз основа на предлогот на LLM, извршете понатамошни дејства на страницата...

    // Не заборавајте да ја затворите сесијата на прелистувачот кога ќе завршите
    // await browser.close();
}

// Откако ќе ја започнете сесијата и ќе го добиете URL-от, потоа ќе го повикате driveAgent(sessionId)

Оваа интерактивна јамка—каде што вашиот AI агент ја анализира содржината на страницата, го одредува следното дејство и го извршува преку Playwright CDP—ја формира основата на автономен агент за прелистување. Сите овие дејства се визуелно прикажани во реално време преку компонентата BrowserLiveView на екранот на корисникот.

Отклучување нови можности со вградени AI агенти

Интеграцијата на BrowserLiveView на Amazon Bedrock AgentCore е повеќе од само техничка карактеристика; тоа е промена на парадигмата во начинот на кој корисниците комуницираат и им веруваат на AI агентите. Со вградување на визуелна повратна информација во реално време, програмерите можат да креираат апликации напојувани со AI кои се не само ефикасни, туку и транспарентни, проверливи и пријателски настроени кон корисникот.

Оваа способност е особено трансформативна за апликации кои вклучуваат:

• Комплексни работни процеси: Автоматизирање на повеќестепени онлајн процеси како што се внесување податоци, регистрација или регулаторна усогласеност, каде што видливоста во секој чекор е најважна.
• Корисничка поддршка: Овозможување на агентите да ги набљудуваат AI ко-пилотите како ги решаваат барањата на клиентите или навигираат низ системите, обезбедувајќи точност и давајќи можности за интервенција.
• Обука и дебагирање: Обезбедување на програмерите и крајните корисници со моќна алатка за разбирање на однесувањето на агентот, дебагирање проблеми и обука на агентите преку директно набљудување.
• Подобрени ревизорски траги: Генерирање визуелни записи од дејствата на агентот, кои можат да се комбинираат со снимки од сесиите на Amazon S3 за сеопфатен преглед по настанот и усогласеност.

Способноста за директен пренос на сесиите на прелистувачот од AWS Cloud до клиентските прелистувачи, заобиколувајќи го серверот на апликацијата за видео преносот, нуди значителни предности во однос на перформансите и скалабилноста. Оваа архитектура ја минимизира латентноста и го намалува оптоварувањето на вашата backend инфраструктура, овозможувајќи ви да распоредите високо одговорни и скалабилни AI агентски решенија.

Со усвојување на BrowserLiveView, вие не само што градите AI агенти; вие градите доверба, контрола и побогато корисничко искуство. Истражете ги можностите и дајте им моќ на вашите корисници со доверба да делегираат сложени веб задачи на интелигентни агенти.