Code Velocity
დეველოპერის ინსტრუმენტები

Bedrock AgentCore: ცოცხალი AI ბრაუზერის აგენტის ჩაშენება React-ში

·5 წუთი კითხვა·AWS·ორიგინალი წყარო
გაზიარება
Amazon Bedrock AgentCore-ის არქიტექტურის დიაგრამა, რომელიც აჩვენებს მონაცემთა ნაკადს ცოცხალი AI ბრაუზერის აგენტის React აპლიკაციაში ჩასაშენებლად.

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 პროტოკოლის გამოყენებით, ის აგენტიის სესიას რენდერირებს, რითაც ტრადიციულად დამალულ პროცესს ვიზუალურად გადამოწმებად გამოცდილებად აქცევს. ეს სტატია გაგიძღვებათ პროცესში, სესიის დაწყებიდან და Live View URL-ის გენერირებიდან, თქვენს React აპლიკაციაში ნაკადის რენდერირებამდე და, საბოლოოდ, AI აგენტის დაკავშირებამდე, რათა ის აკონტროლებდეს ბრაუზერს, სანამ თქვენი მომხმარებლები უყურებენ.

AI აგენტის გამჭვირვალობის გაუმჯობესება BrowserLiveView-ით

დღევანდელ სწრაფად განვითარებად აგენტური AI-ის ლანდშაფტში, ვებ ბრაუზინგის ამოცანების AI აგენტებზე დელეგირების შესაძლებლობა დიდ ეფექტურობას გვპირდება. თუმცა, ამ დაპირებას ხშირად აფერხებს აგენტის საიმედოობასთან, სიზუსტესთან და უსაფრთხოებასთან დაკავშირებული შეშფოთება. აგენტის ოპერაციების მკაფიო ხედვის გარეშე, მომხმარებლები იძულებულნი არიან ენდონ სისტემას, რომლის დაკვირვებაც არ შეუძლიათ, რამაც შეიძლება შეაფერხოს დანერგვა და შეზღუდოს განლაგება მგრძნობიარე სცენარებში.

BrowserLiveView კომპონენტი უშუალოდ უპირისპირდება ამ გამოწვევას AI აგენტის "თვალების" მომხმარებლისთვის გახსნით. წარმოიდგინეთ AI აგენტი, რომელსაც ევალება შეავსოს რთული ონლაინ ფორმა ან მოიძიოს კონკრეტული ინფორმაცია მრავალი ვებსაიტიდან. ტრადიციულად, მომხმარებელი მიიღებდა მხოლოდ საბოლოო გამომავალს ან მოქმედებების შეჯამებას, რაც მათ დააფიქრებდა შუალედურ ნაბიჯებზე. ჩაშენებული Live View-ით, მომხმარებლებს შეუძლიათ თვალყური ადევნონ ყველა ნავიგაციას, ფორმის წარდგენას და ძიების მოთხოვნას რეალურ დროში, როგორც კი აგენტი მათ ასრულებს.

ეს მყისიერი ვიზუალური დადასტურება ფასდაუდებელია. ის მომხმარებლებს არწმუნებს, რომ აგენტი სწორ გვერდზეა, სწორ ელემენტებთან ურთიერთობს და სამუშაო პროცესს განზრახულების მიხედვით მიჰყვება. ეს რეალურ დროში უკუკავშირის მარყუჟი სცილდება უბრალო ტექსტურ დადასტურებებს; ის უზრუნველყოფს აგენტის ქცევის ხელშესახებ, გადამოწმებად აუდიტის კვალს, რაც ხელს უწყობს მეტ ნდობას. იმ სამუშაო პროცესებისთვის, რომლებიც რეგულირდება ან მოიცავს მგრძნობიარე მომხმარებლის მონაცემებს, ეს ვიზუალური მტკიცებულება შეიძლება კრიტიკული იყოს შესაბამისობისა და ანგარიშვალდებულებისთვის. გარდა ამისა, ადამიანის ზედამხედველობის მოთხოვნის სცენარებში, ზედამხედველს შეუძლია უშუალოდ დააკვირდეს აგენტის მოქმედებებს აპლიკაციაში, საჭიროების შემთხვევაში ჩაერიოს, ნაკადის დარღვევის გარეშე.

არქიტექტურა რეალურ დროში აგენტის დაკვირვების მიღმა

ცოცხალი AI ბრაუზერის აგენტის უწყვეტი ინტეგრაცია React აპლიკაციაში, რომელიც მუშაობს Amazon Bedrock AgentCore-ზე, ხორციელდება დახვეწილი, მაგრამ ეფექტური არქიტექტურის მეშვეობით, რომელიც შედგება სამი ძირითადი კომპონენტისგან. ამ ნაწილებს შორის ურთიერთქმედების გაგება გადამწყვეტია წარმატებული იმპლემენტაციისა და განლაგებისთვის.

კომპონენტიროლი არქიტექტურაშიძირითადი ტექნოლოგიები/პროტოკოლები
მომხმარებლის ვებ ბრაუზერიაფუნქციონირებს React აპლიკაციას, რომელიც შეიცავს BrowserLiveView კომპონენტს; ამყარებს WebSocket კავშირს DCV ნაკადის მისაღებად; მართავს ვიდეოს რენდერირებას.React, BrowserLiveView კომპონენტი, WebSocket, Amazon DCV
აპლიკაციის სერვერიფუნქციონირებს როგორც AI აგენტი; ორკესტრირებას უკეთებს კავშირებს; იწყებს სესიებს Bedrock AgentCore API-ის საშუალებით; წარმოქმნის SigV4-ით წინასწარ ხელმოწერილ URL-ებს; მართავს სესიების მართვასა და ავთენტიფიკაციას.Node.js (ან მსგავსი), Amazon Bedrock AgentCore API, SigV4 URL-ები, REST, AI მოდელის ლოგიკა
AWS ღრუბელი (Bedrock AgentCore და სერვისები)მასპინძლობს იზოლირებულ ღრუბლოვან ბრაუზერის სესიებს; უზრუნველყოფს ბრაუზერის ავტომატიზაციის endpoint-ს (Playwright CDP); აწვდის Live View სტრიმინგის endpoint-ს (DCV).Amazon Bedrock AgentCore, Amazon Bedrock, Playwright CDP, Amazon DCV

ურთიერთქმედება იწყება მომხმარებლის ვებ ბრაუზერით, რომელიც მუშაობს თქვენს React აპლიკაციაზე. ამ აპლიკაციაში, BrowserLiveView კომპონენტი რენდერირდება, ელოდება უსაფრთხო, დროებით SigV4-ით წინასწარ ხელმოწერილ URL-ს. ეს URL, რომელიც გენერირებულია თქვენი აპლიკაციის სერვერის მიერ, არის გასაღები მუდმივი WebSocket კავშირის დასამყარებლად უშუალოდ Bedrock AgentCore სერვისთან AWS Cloud-ში.

თქვენი აპლიკაციის სერვერი ორმაგ მიზანს ემსახურება: ის მასპინძლობს AI აგენტის ლოგიკას და მოქმედებს როგორც შუამავალი სესიების მართვისთვის. ის იძახებს Amazon Bedrock AgentCore API-ს, რათა დაიწყოს ბრაუზერის სესიები და შემდეგ უსაფრთხოდ აგენერირებს SigV4-ით წინასწარ ხელმოწერილ URL-ებს, რომლებიც თქვენს კლიენტ ბრაუზერს ანიჭებს წვდომას Live View ნაკადზე. რაც მთავარია, სანამ თქვენი სერვერი ორკესტრირებას უკეთებს აგენტის მოქმედებებს და აგენერირებს საჭირო სერთიფიკატებს, ის არ ამუშავებს ვიდეო ნაკადს უშუალოდ.

ბრაუზერის ავტომატიზაციისა და ვიდეო სტრიმინგის ძირითადი სამუშაო ხორციელდება AWS Cloud-ში. Amazon Bedrock AgentCore მასპინძლობს იზოლირებულ ღრუბლოვან ბრაუზერის სესიებს, უზრუნველყოფს როგორც ავტომატიზაციის endpoint-ს – რომელთანაც თქვენი AI აგენტი ურთიერთობს Playwright Chrome DevTools Protocol (CDP)-ის გამოყენებით – ასევე Live View სტრიმინგის endpoint-ს, რომელიც მუშაობს Amazon DCV-ზე. ეს დიზაინი უზრუნველყოფს, რომ DCV Live View ნაკადი პირდაპირ 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 ბრაუზერის ნებართვები. გადამწყვეტი მნიშვნელობა აქვს უმცირესი პრივილეგიის პრინციპის დაცვას 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 ნებართვაზე. თუმცა, გახსოვდეთ, რომ Live View თავისთავად მოდელ-აგნოსტიკურია, რაც საშუალებას გაძლევთ ინტეგრირება მოახდინოთ ნებისმიერ მოდელის პროვაიდერთან ან აგენტის ფრეიმვორკთან თქვენი არჩევანით.
  5. SDK ინსტალაციები:
    • დააინსტალირეთ bedrock-agentcore TypeScript SDK AgentCore-თან ურთიერთობისთვის:
      npm install bedrock-agentcore
      
    • თუ თქვენ იყენებთ AWS Bedrock-ს თქვენი AI მოდელისთვის, დააინსტალირეთ AWS SDK for JavaScript:
      npm install @aws-sdk/client-bedrock-runtime
      

Live View-ის იმპლემენტაციის კოდის ბაზა, როგორც წესი, იყოფა: სერვერის მხარის კოდი (სესიის მართვისა და AI აგენტის ლოგიკისთვის) მუშაობს Node.js-ში, ხოლო კლიენტის მხარის კოდი (Live View-ის რენდერირებისთვის) მუშაობს React აპლიკაციაში, ხშირად გაერთიანებული ისეთი ხელსაწყოებით, როგორიცაა Vite.

ნაბიჯ-ნაბიჯ ინტეგრაცია: სესიიდან ნაკადამდე

ცოცხალი AI ბრაუზერის აგენტის ინტეგრაცია Amazon Bedrock AgentCore-თან მოიცავს მკაფიო, სამეტაპიან პროცესს, რომელიც აერთიანებს თქვენს სერვერის მხარის ლოგიკას თქვენს კლიენტის მხარის React აპლიკაციასთან და AWS Cloud-ის მძლავრ შესაძლებლობებთან.

1. ბრაუზერის სესიის დაწყება და Live View URL-ის გენერირება

პირველი ნაბიჯი ხორციელდება თქვენს აპლიკაციის სერვერზე. სწორედ აქ იწყებს თქვენი ბეკენდის ლოგიკა ბრაუზერის სესიას Amazon Bedrock AgentCore-ში და უსაფრთხოდ იღებს საჭირო URL-ს ცოცხალი ხედის ნაკადისთვის.

თქვენ გამოიყენებთ Browser კლასს bedrock-agentcore SDK-დან. ეს კლასი მართავს იზოლირებული ბრაუზერის გარემოს შექმნისა და მართვის სირთულეს ღრუბელში. ამ ნაბიჯის ძირითადი გამომავალი არის SigV4-ით წინასწარ ხელმოწერილი 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();

    // Live View 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 ფრონტენდს, რომელიც გამოიყენებს მას ცოცხალი ნაკადის დასამყარებლად.

2. Live View-ის რენდერირება თქვენს 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>ველოდებით Live View 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-ის მოძიება თქვენი ბეკენდიდან
//         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 ინტეგრაცია მნიშვნელოვნად ამარტივებს ფრონტენდის განვითარებას, რაც საშუალებას გაძლევთ ფოკუსირება მოახდინოთ მომხმარებლის გამოცდილებაზე ცოცხალი აგენტის გარშემო.

3. AI აგენტის დაკავშირება ბრაუზერის სამართავად

ბოლო ნაბიჯი აკავშირებს თქვენი AI აგენტის ინტელექტს ბრაუზერის რეალურ მოქმედებებთან იზოლირებული სესიის ფარგლებში. მიუხედავად იმისა, რომ BrowserLiveView უზრუნველყოფს ვიზუალურ უკუკავშირს, თქვენი AI აგენტი იყენებს Playwright CDP-ს (Chrome DevTools Protocol) ბრაუზერთან პროგრამულად ურთიერთობისთვის.

თქვენი აპლიკაციის სერვერი, რომელიც ასევე მასპინძლობს თქვენს AI აგენტს, გამოიყენებს Browser ობიექტის page თვისებას (რომელიც არის 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 'content'-ის გასაანალიზებლად და შემდეგი ნაბიჯების გადასაწყვეტად
    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: `Analyze this webpage content and suggest the next action: ${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 აგენტებით

Amazon Bedrock AgentCore-ის BrowserLiveView-ის ინტეგრაცია უფრო მეტია, ვიდრე უბრალოდ ტექნიკური ფუნქცია; ეს არის პარადიგმის ცვლილება, თუ როგორ ურთიერთობენ მომხმარებლები AI აგენტებთან და ენდობიან მათ. რეალურ დროში ვიზუალური უკუკავშირის ჩაშენებით, დეველოპერებს შეუძლიათ შექმნან AI-ზე მომუშავე აპლიკაციები, რომლებიც არა მხოლოდ ეფექტურია, არამედ გამჭვირვალე, აუდიტირებადი და მომხმარებლისთვის მოსახერხებელი.

ეს შესაძლებლობა განსაკუთრებით ტრანსფორმაციულია აპლიკაციებისთვის, რომლებიც მოიცავს:

  • კომპლექსური სამუშაო პროცესები: მრავალსაფეხურიანი ონლაინ პროცესების ავტომატიზაცია, როგორიცაა მონაცემთა შეყვანა, რეგისტრაცია ან მარეგულირებელი მოთხოვნების დაცვა, სადაც თითოეულ ნაბიჯზე ხილვადობა უმნიშვნელოვანესია.
  • მომხმარებლის მხარდაჭერა: აგენტებისთვის საშუალების მიცემა, დააკვირდნენ AI თანაპილოტებს, რომლებიც წყვეტენ მომხმარებლის შეკითხვებს ან ნავიგაციას სისტემებში, რაც უზრუნველყოფს სიზუსტეს და ჩარევის შესაძლებლობებს.
  • ტრენინგი და გამართვა: დეველოპერებისა და საბოლოო მომხმარებლებისთვის მძლავრი ინსტრუმენტის მიწოდება, რათა გაიგონ აგენტის ქცევა, გამართონ პრობლემები და ავარჯიშონ აგენტები პირდაპირი დაკვირვების მეშვეობით.
  • გაუმჯობესებული აუდიტის ჩანაწერები: აგენტის მოქმედებების ვიზუალური ჩანაწერების გენერირება, რომლებიც შეიძლება გაერთიანდეს Amazon S3-ში სესიის ჩანაწერებთან ყოვლისმომცველი შემდგომი გადახედვისა და შესაბამისობისთვის.

ბრაუზერის სესიების პირდაპირი სტრიმინგის შესაძლებლობა AWS Cloud-დან კლიენტ ბრაუზერებში, აპლიკაციის სერვერის გვერდის ავლით ვიდეო ნაკადისთვის, გთავაზობთ მნიშვნელოვან უპირატესობებს წარმადობისა და მასშტაბურობის თვალსაზრისით. ეს არქიტექტურა მინიმუმამდე ამცირებს ლატენტურობას და ამცირებს დატვირთვას თქვენს ბეკენდ ინფრასტრუქტურაზე, რაც საშუალებას გაძლევთ განათავსოთ მაღალრეაგირებადი და მასშტაბირებადი AI აგენტის გადაწყვეტილებები.

BrowserLiveView-ის დანერგვით, თქვენ არ ქმნით მხოლოდ AI აგენტებს; თქვენ ქმნით ნდობას, კონტროლს და უფრო მდიდარ მომხმარებლის გამოცდილებას. გამოიკვლიეთ შესაძლებლობები და მიეცით თქვენს მომხმარებლებს თავდაჯერებულობა, გადასცენ რთული ვებ ამოცანები ინტელექტუალურ აგენტებს.

ხშირად დასმული კითხვები

What is the Amazon Bedrock AgentCore BrowserLiveView component and how does it function?
The Amazon Bedrock AgentCore BrowserLiveView component is a crucial part of the Bedrock AgentCore TypeScript SDK, designed to embed a real-time video feed of an AI agent's browsing session directly into a React application. It operates by receiving a SigV4-presigned URL from your application server, which then establishes a persistent WebSocket connection to stream video data via the Amazon DCV protocol from an isolated cloud browser session. This direct streaming mechanism ensures low latency and high fidelity, allowing users to observe every action an AI agent takes on a webpage, from navigation to form submissions, without the video stream passing through your server.
How does embedding Live View enhance user trust and confidence in AI agents?
Embedding Live View significantly boosts user trust and confidence by providing unparalleled transparency into an AI agent's operations. Instead of a 'black box' experience, users gain immediate visual confirmation of the agent's actions, observing its progress and interactions in real-time. This visual feedback loop helps users understand that the agent is on the correct path, interacting with the right elements, and progressing as expected. This is particularly valuable for complex or sensitive workflows, where visual evidence can reassure users that the agent is performing its tasks accurately and responsibly, enhancing overall confidence and allowing for timely intervention if necessary.
What are the primary architectural components involved in integrating a Live View AI agent?
The integration of a Live View AI agent involves three main architectural components. First, the user's web browser, running a React application, hosts the BrowserLiveView component, which renders the real-time stream. Second, the application server acts as the orchestrator, managing the AI agent's logic, initiating browser sessions via the Amazon Bedrock AgentCore API, and generating secure, time-limited SigV4-presigned URLs for the Live View stream. Third, the AWS Cloud hosts Amazon Bedrock AgentCore and Bedrock services, providing the isolated cloud browser sessions, automation capabilities (via Playwright CDP), and the DCV-powered Live View streaming endpoint. A key design point is that the DCV stream flows directly from AWS to the user's browser, bypassing the application server for optimal performance.
Can developers utilize any AI model or agent framework with Amazon Bedrock AgentCore's Live View?
Yes, developers have the flexibility to use any AI model or agent framework of their choice with Amazon Bedrock AgentCore's Live View. While the provided example often demonstrates integration with the Amazon Bedrock Converse API and models like Anthropic Claude, the BrowserLiveView component itself is model-agnostic. This means that the real-time visual streaming functionality is decoupled from the AI agent's underlying reasoning and decision-making logic. As long as your chosen AI agent or framework can interact with the browser automation endpoint provided by AgentCore (typically via Playwright CDP), you can leverage Live View to provide visual feedback to your users, making it a highly adaptable solution for various AI-powered applications.
What are the essential prerequisites for setting up a Live View AI browser agent with Amazon Bedrock AgentCore?
To set up a Live View AI browser agent, several prerequisites are necessary. Developers need Node.js version 20 or later for the server-side logic and React for the client-side application. An AWS account in a supported region is required, along with AWS credentials that have the necessary Amazon Bedrock AgentCore Browser permissions. It's crucial to follow the principle of least privilege for IAM permissions and use temporary credentials (e.g., from AWS IAM Identity Center or STS) rather than long-lived access keys for enhanced security. Additionally, the Amazon Bedrock AgentCore TypeScript SDK (`bedrock-agentcore`) and potentially the AWS SDK for JavaScript (`@aws-sdk/client-bedrock-runtime`) if using Bedrock models, must be installed in your project.
How does the DCV protocol facilitate real-time, low-latency video streaming for Live View?
The Amazon DCV (NICE DCV) protocol is instrumental in providing real-time, low-latency video streaming for the BrowserLiveView component. DCV is a high-performance remote display protocol designed to deliver a rich user experience over varying network conditions. In the context of AgentCore, it efficiently encodes and transmits the visual output of the isolated cloud browser session directly to the user's React application via a WebSocket connection. By optimizing data compression and transmission, DCV ensures that the visual feed of the AI agent's actions appears smooth and responsive, minimizing lag and enabling users to observe the agent's behavior as if it were happening locally on their machine, without the need for complex streaming infrastructure setup by the developer.

იყავით ინფორმირებული

მიიღეთ უახლესი AI სიახლეები ელფოსტაზე.

გაზიარება