Bedrock AgentCore: Osadź agenta AI przeglądarki z podglądem na żywo w React

Era agentów AI działających jako nieprzejrzyste 'czarne skrzynki' szybko dobiega końca. W miarę jak sztuczna inteligencja podejmuje się coraz bardziej złożonych i autonomicznych zadań, szczególnie w środowiskach internetowych, zapotrzebowanie na przejrzystość, zaufanie i kontrolę użytkownika nigdy nie było większe. Użytkownicy muszą rozumieć i weryfikować działania podejmowane przez agenta AI w ich imieniu, zwłaszcza gdy działania te obejmują nawigację po stronach internetowych, interakcje z wrażliwymi danymi lub wykonywanie krytycznych przepływów pracy.

Wychodząc naprzeciw temu fundamentalnemu wyzwaniu, Amazon Web Services wprowadza potężne rozwiązanie: komponent Amazon Bedrock AgentCore BrowserLiveView. To innowacyjne narzędzie umożliwia deweloperom osadzenie strumienia wideo na żywo, w czasie rzeczywistym, z sesji przeglądania agenta AI bezpośrednio w ich aplikacjach React. Ta integracja nie tylko demistyfikuje zachowanie agenta, ale także zapewnia użytkownikom bezprecedensową widoczność i kluczowe poczucie kontroli.

Będący częścią Bedrock AgentCore TypeScript SDK, komponent BrowserLiveView upraszcza integrację strumieni przeglądarki na żywo w Twojej aplikacji za pomocą zaledwie kilku linii JavaScript XML (JSX). Wykorzystując wysokowydajny protokół Amazon DCV, renderuje sesję agenta, skutecznie przekształcając tradycyjnie ukryty proces w doświadczenie weryfikowalne wizualnie. Ten artykuł przeprowadzi Cię przez proces, od uruchomienia sesji i wygenerowania adresu URL podglądu na żywo, przez renderowanie strumienia w Twojej aplikacji React, aż po podłączenie agenta AI do sterowania przeglądarką, podczas gdy użytkownicy obserwują.

Zwiększanie przejrzystości agentów AI dzięki BrowserLiveView

W dzisiejszym szybko zmieniającym się krajobrazie Agentowej AI, zdolność do delegowania zadań przeglądania stron internetowych agentom AI obiecuje ogromne korzyści w zakresie wydajności. Jednak ta obietnica jest często łagodzona przez obawy dotyczące niezawodności, dokładności i bezpieczeństwa agenta. Bez wyraźnego wglądu w operacje agenta, użytkownicy są zmuszeni zauważyć system, którego nie mogą obserwować, co może utrudniać jego przyjęcie i ograniczać wdrożenie w delikatnych scenariuszach.

Komponent BrowserLiveView bezpośrednio stawia czoła temu wyzwaniu, 'otwierając' oczy agenta AI dla użytkownika. Wyobraź sobie agenta AI, któremu powierzono wypełnienie złożonego formularza online lub pobranie określonych informacji z wielu stron internetowych. Tradycyjnie użytkownik otrzymywałby jedynie końcowy wynik lub podsumowanie działań, pozostawiając go w niepewności co do kroków pośrednich. Dzięki osadzonemu podglądowi na żywo (Live View) użytkownicy mogą śledzić każdą nawigację, przesyłanie formularza i zapytanie wyszukiwania w czasie rzeczywistym, gdy agent je wykonuje.

To natychmiastowe wizualne potwierdzenie jest bezcenne. Upewnia użytkowników, że agent znajduje się na właściwej stronie, wchodzi w interakcje z odpowiednimi elementami i postępuje zgodnie z zamierzonym przepływem pracy. Ta pętla informacji zwrotnej w czasie rzeczywistym wykracza poza zwykłe potwierdzenia tekstowe; zapewnia namacalny, weryfikowalny ślad audytowy zachowania agenta, budując większe zaufanie. W przypadku przepływów pracy, które są regulowane lub obejmują wrażliwe dane klientów, ten wizualny dowód może być kluczowy dla zgodności i odpowiedzialności. Ponadto, w scenariuszach wymagających nadzoru człowieka, przełożony może bezpośrednio obserwować działania agenta w aplikacji, interweniując w razie potrzeby, bez zakłócania jego pracy.

Architektura stojąca za obserwacją agentów w czasie rzeczywistym

Bezproblemowa integracja agenta AI przeglądarki z podglądem na żywo w aplikacji React zasilanej przez Amazon Bedrock AgentCore jest orkiestrowana poprzez wyrafinowaną, lecz wydajną architekturę składającą się z trzech kluczowych komponentów. Zrozumienie wzajemnego oddziaływania tych części jest kluczowe dla pomyślnej implementacji i wdrożenia.

Interakcja rozpoczyna się od przeglądarki internetowej użytkownika, która uruchamia Twoją aplikację React. W tej aplikacji renderowany jest komponent BrowserLiveView, oczekujący na bezpieczny, ograniczony czasowo adres URL SigV4-presigned. Ten adres URL, wygenerowany przez Twój serwer aplikacji, jest kluczem do ustanowienia trwałego połączenia WebSocket bezpośrednio z usługą Bedrock AgentCore w chmurze AWS.

Twój serwer aplikacji pełni podwójną rolę: hostuje logikę agenta AI i działa jako pośrednik w zarządzaniu sesjami. Wywołuje API Amazon Bedrock AgentCore, aby zainicjować sesje przeglądarki, a następnie bezpiecznie generuje adresy URL SigV4-presigned, które przyznają Twojej przeglądarce klienta dostęp do strumienia podglądu na żywo. Co istotne, podczas gdy Twój serwer orkiestruje działania agenta i generuje niezbędne poświadczenia, nie obsługuje bezpośrednio samego strumienia wideo.

Najcięższa praca związana z automatyzacją przeglądarki i strumieniowaniem wideo odbywa się w chmurze AWS. Amazon Bedrock AgentCore hostuje izolowane sesje przeglądarki w chmurze, zapewniając zarówno punkt końcowy automatyzacji – z którym Twój agent AI wchodzi w interakcje za pomocą protokołu Playwright Chrome DevTools Protocol (CDP) – jak i punkt końcowy strumieniowania podglądu na żywo, zasilany przez Amazon DCV. Taka konstrukcja zapewnia, że strumień DCV Live View płynie bezpośrednio z Amazon Bedrock AgentCore do przeglądarki użytkownika. To bezpośrednie połączenie WebSocket omija Twój serwer aplikacji, minimalizując opóźnienia, redukując obciążenie infrastruktury i zapewniając płynne oglądanie w czasie rzeczywistym.

Warunki wstępne do wdrożenia agenta AI z podglądem na żywo

Zanim przystąpisz do implementacji agenta AI przeglądarki z podglądem na żywo, ważne jest, aby upewnić się, że Twoje środowisko deweloperskie jest prawidłowo skonfigurowane oraz że posiadasz niezbędne zasoby AWS i uprawnienia. Przestrzeganie tych warunków wstępnych usprawni proces rozwoju i pomoże utrzymać bezpieczną postawę operacyjną.

1. Środowisko Node.js: Będziesz potrzebować Node.js w wersji 20 lub nowszej zainstalowanej w systemie do uruchamiania komponentów serwerowych aplikacji.
2. Konto AWS i region: Wymagane jest aktywne konto AWS z dostępem do obsługiwanego regionu AWS, gdzie dostępny jest Amazon Bedrock AgentCore.
3. Poświadczenia AWS i uprawnienia: Twoje poświadczenia AWS muszą mieć odpowiednie uprawnienia Amazon Bedrock AgentCore Browser. Kluczowe jest przestrzeganie zasady najmniejszych uprawnień podczas konfigurowania uprawnień AWS Identity and Access Management (IAM). Dla zwiększonego bezpieczeństwa zawsze używaj tymczasowych poświadczeń uzyskanych z AWS IAM Identity Center lub AWS Security Token Service (AWS STS), unikając długoterminowych kluczy dostępu.
4. Dostęp do modelu AI: Jeśli planujesz użyć modelu AI do sterowania agentem (jak pokazano w przykładzie, który wykorzystuje API Amazon Bedrock Converse z Anthropic Claude), będziesz potrzebować dostępu do tego konkretnego modelu i wszelkich związanych z nim uprawnień AWS Bedrock. Pamiętaj jednak, że sam Live View jest niezależny od modelu, co pozwala na integrację dowolnego dostawcy modelu lub frameworka agentów.
5. Instalacje SDK:
   • Zainstaluj bedrock-agentcore TypeScript SDK do interakcji z AgentCore:

     npm install bedrock-agentcore
     

   • Jeśli używasz AWS Bedrock dla swojego modelu AI, zainstaluj AWS SDK dla JavaScript:

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

Baza kodu do implementacji podglądu na żywo (Live View) jest zazwyczaj podzielona: kod po stronie serwera (do zarządzania sesjami i logiki agenta AI) działa w Node.js, a kod po stronie klienta (do renderowania podglądu na żywo) działa w aplikacji React, często pakowanej za pomocą narzędzi takich jak Vite.

Integracja krok po kroku: Od sesji do strumienia

Integracja agenta AI przeglądarki z podglądem na żywo z Amazon Bedrock AgentCore obejmuje jasny, trzystopniowy proces, łączący logikę po stronie serwera z aplikacją React po stronie klienta i potężnymi możliwościami chmury AWS.

1. Rozpoczynanie sesji przeglądarki i generowanie adresu URL podglądu na żywo

Pierwszy krok odbywa się na Twoim serwerze aplikacji. To tutaj Twoja logika backendowa inicjuje sesję przeglądarki w Amazon Bedrock AgentCore i bezpiecznie uzyskuje niezbędny adres URL do strumieniowania podglądu na żywo.

Użyjesz klasy Browser z SDK bedrock-agentcore. Klasa ta obsługuje złożoność tworzenia i zarządzania izolowanymi środowiskami przeglądarki w chmurze. Kluczowym wynikiem tego kroku jest adres URL SigV4-presigned, który zapewnia bezpieczny, tymczasowy dostęp do strumienia wideo na żywo z sesji przeglądarki.

// Example server-side code (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Initialize Bedrock AgentCore client (ensure proper AWS credentials are configured)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Use your desired region

async function startLiveSession() {
    // Create a new browser session
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Generate the Live View URL
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Store browser.sessionId to later connect your AI agent or terminate the session
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// This `liveViewUrl` will be sent to your React client.

Ten liveViewUrl zostanie wysłany do Twojego klienta React.

2. Renderowanie podglądu na żywo w Twojej aplikacji React

Gdy Twoja aplikacja React otrzyma liveViewUrl z Twojego serwera, renderowanie strumienia w czasie rzeczywistym jest niezwykle proste, dzięki komponentowi BrowserLiveView.

// Example client-side code (React component)
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>Waiting for Live View URL...</p>;
    }

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

// In your main App component or page:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Fetch the liveViewUrl from your backend
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>AI Agent Live View</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Dzięki samemu url={liveViewUrl} komponent BrowserLiveView obsługuje skomplikowane szczegóły ustanawiania połączenia WebSocket, pobierania strumienia DCV i renderowania strumienia wideo na żywo w określonych wymiarach. Ta minimalna integracja JSX znacznie upraszcza rozwój front-endu, pozwalając skupić się na doświadczeniu użytkownika wokół agenta na żywo.

3. Podłączanie agenta AI do sterowania przeglądarką

Ostatni krok łączy inteligencję Twojego agenta AI z rzeczywistymi działaniami przeglądarki w ramach izolowanej sesji. Podczas gdy BrowserLiveView dostarcza wizualną informację zwrotną, Twój agent AI używa Playwright CDP (Chrome DevTools Protocol) do programowej interakcji z przeglądarką.

Twój serwer aplikacji, który również hostuje Twojego agenta AI, będzie używał właściwości page obiektu Browser (która jest obiektem Page z Playwright) do wykonywania akcji przeglądarki.

// Example server-side code (continued from step 1)
// Assuming you have a Playwright-like interface or direct Playwright usage
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (previous setup for browser creation) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Reconnect to existing session
    await browser.connect(); // Connect to the browser session

    const page = browser.page; // Get the Playwright Page object

    // Example AI agent logic (simplified for illustration)
    // Here you would integrate with your LLM (e.g., Anthropic Claude via Bedrock Converse API)
    // to determine actions based on user prompts and page content.
    console.log("Agent navigating to example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent waited for 3 seconds...");
    await page.waitForTimeout(3000); // Simulate processing time

    console.log("Agent typing into a search box (hypothetical)...");
    // Example: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Example: await page.click('#search-button');

    const content = await page.content();
    // Use an LLM to analyze 'content' and decide next steps
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // or your preferred model
        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 Model suggested action:", parsedBody.content[0].text);

    // Based on LLM's suggestion, execute further page actions...

    // Don't forget to close the browser session when done
    // await browser.close();
}

// After starting the session and getting the URL, you would then call driveAgent(sessionId)

Ta pętla interakcji – gdzie Twój agent AI analizuje zawartość strony, określa następną akcję i wykonuje ją za pośrednictwem Playwright CDP – stanowi rdzeń autonomicznego agenta przeglądania. Wszystkie te akcje są wizualnie renderowane w czasie rzeczywistym za pośrednictwem komponentu BrowserLiveView na ekranie użytkownika.

Otwieranie nowych możliwości dzięki osadzonym agentom AI

Integracja BrowserLiveView z Amazon Bedrock AgentCore to coś więcej niż tylko funkcja techniczna; to zmiana paradygmatu w sposobie, w jaki użytkownicy wchodzą w interakcje z agentami AI i ufają im. Dzięki osadzaniu wizualnej informacji zwrotnej w czasie rzeczywistym, deweloperzy mogą tworzyć aplikacje oparte na AI, które są nie tylko wydajne, ale także przejrzyste, audytowalne i przyjazne dla użytkownika.

Ta funkcja jest szczególnie transformacyjna dla aplikacji obejmujących:

• Złożone przepływy pracy: Automatyzacja wieloetapowych procesów online, takich jak wprowadzanie danych, onboarding czy zgodność z przepisami, gdzie widoczność każdego kroku jest kluczowa.
• Obsługa klienta: Umożliwienie agentom obserwowania kopilotów AI rozwiązujących zapytania klientów lub nawigujących po systemach, zapewniając dokładność i dając możliwość interwencji.
• Szkolenie i debugowanie: Zapewnienie deweloperom i użytkownikom końcowym potężnego narzędzia do zrozumienia zachowania agenta, debugowania problemów i szkolenia agentów poprzez bezpośrednią obserwację.
• Ulepszone ślady audytowe: Generowanie wizualnych zapisów działań agenta, które można łączyć z nagraniami sesji do Amazon S3 w celu kompleksowego przeglądu post-hoc i zgodności.

Możliwość bezpośredniego strumieniowania sesji przeglądarki z chmury AWS do przeglądarek klienckich, z pominięciem serwera aplikacji dla strumienia wideo, oferuje znaczące korzyści pod względem wydajności i skalowalności. Ta architektura minimalizuje opóźnienia i zmniejsza obciążenie infrastruktury backendowej, umożliwiając wdrażanie wysoce responsywnych i skalowalnych rozwiązań agentów AI.

Przyjmując BrowserLiveView, nie tylko tworzysz agentów AI; budujesz zaufanie, kontrolę i bogatsze doświadczenie użytkownika. Odkryj możliwości i daj swoim użytkownikom pewność, że mogą delegować złożone zadania internetowe inteligentnym agentom.