Bedrock AgentCore: Live KI-Browser-Agent in React einbetten

Die Ära der KI-Agenten, die als undurchsichtige "Black Boxes" agieren, neigt sich rapide dem Ende zu. Da künstliche Intelligenz zunehmend komplexere und autonomere Aufgaben übernimmt, insbesondere in Webumgebungen, war die Nachfrage nach Transparenz, Vertrauen und Benutzerkontrolle nie höher. Benutzer müssen die Aktionen, die ein KI-Agent in ihrem Namen ausführt, verstehen und überprüfen können, insbesondere wenn diese Aktionen das Navigieren auf Websites, das Interagieren mit sensiblen Daten oder das Ausführen kritischer Workflows betreffen.

Um dieser grundlegenden Herausforderung zu begegnen, stellt Amazon Web Services eine leistungsstarke Lösung vor: die Amazon Bedrock AgentCore BrowserLiveView-Komponente. Dieses innovative Tool ermöglicht Entwicklern, einen Live-Echtzeit-Video-Feed der Browsing-Sitzung eines KI-Agenten direkt in ihre React-Anwendungen einzubetten. Diese Integration entmystifiziert nicht nur das Agentenverhalten, sondern bietet Benutzern auch eine beispiellose Sichtbarkeit und ein entscheidendes Gefühl der Kontrolle.

Als Teil des Bedrock AgentCore TypeScript SDK vereinfacht die BrowserLiveView-Komponente die Integration von Live-Browser-Streams in Ihre Anwendung mit nur wenigen Zeilen JavaScript XML (JSX). Mithilfe des Hochleistungs-Amazon DCV-Protokolls rendert sie die Agenten-Sitzung und verwandelt so einen traditionell verborgenen Prozess effektiv in eine visuell überprüfbare Erfahrung. Dieser Artikel führt Sie durch den Prozess, vom Starten einer Sitzung und Generieren der Live-View-URL bis zum Rendern des Streams in Ihrer React-Anwendung und schließlich dem Anbinden eines KI-Agenten, um den Browser zu steuern, während Ihre Benutzer zusehen.

Verbesserung der KI-Agenten-Transparenz mit BrowserLiveView

In der sich schnell entwickelnden Landschaft der Agenten-KI verspricht die Möglichkeit, Web-Browsing-Aufgaben an KI-Agenten zu delegieren, immense Effizienzgewinne. Dieses Versprechen wird jedoch oft durch Bedenken hinsichtlich der Zuverlässigkeit, Genauigkeit und Sicherheit des Agenten getrübt. Ohne ein klares Fenster in die Arbeitsweise eines Agenten müssen Benutzer einem System vertrauen, das sie nicht beobachten können, was die Akzeptanz behindern und den Einsatz in sensiblen Szenarien einschränken kann.

Die BrowserLiveView-Komponente begegnet dieser Herausforderung direkt, indem sie die "Augen" des KI-Agenten für den Benutzer öffnet. Stellen Sie sich einen KI-Agenten vor, der eine komplexe Online-Formular ausfüllen oder spezifische Informationen von mehreren Websites abrufen soll. Traditionell würde der Benutzer nur eine abschließende Ausgabe oder eine Zusammenfassung der Aktionen erhalten, was ihn über die Zwischenschritte im Unklaren lässt. Mit einer eingebetteten Live-Ansicht können Benutzer jede Navigation, jedes Absenden eines Formulars und jede Suchanfrage in Echtzeit verfolgen, während der Agent sie ausführt.

Diese sofortige visuelle Bestätigung ist von unschätzbarem Wert. Sie versichert den Benutzern, dass der Agent auf der richtigen Seite ist, mit den richtigen Elementen interagiert und den Workflow wie beabsichtigt durchläuft. Diese Echtzeit-Rückkopplung geht über bloße Textbestätigungen hinaus; sie bietet einen greifbaren, überprüfbaren Audit-Trail des Agentenverhaltens und fördert so ein größeres Vertrauen und Zuversicht. Für Workflows, die reguliert sind oder sensible Kundendaten beinhalten, kann dieser visuelle Beweis für die Einhaltung von Vorschriften und die Verantwortlichkeit entscheidend sein. Darüber hinaus kann in Szenarien, die eine menschliche Aufsicht erfordern, ein Vorgesetzter die Aktionen des Agenten direkt in der Anwendung beobachten und bei Bedarf eingreifen, ohne den Arbeitsfluss zu unterbrechen.

Die Architektur hinter der Echtzeit-Agentenbeobachtung

Die nahtlose Integration eines Live-KI-Browser-Agenten in eine React-Anwendung, die von Amazon Bedrock AgentCore betrieben wird, wird durch eine ausgeklügelte und dennoch effiziente Architektur orchestriert, die aus drei Schlüsselkomponenten besteht. Das Verständnis des Zusammenspiels dieser Teile ist entscheidend für eine erfolgreiche Implementierung und Bereitstellung.

Die Interaktion beginnt mit dem Webbrowser des Benutzers, der Ihre React-Anwendung ausführt. Innerhalb dieser Anwendung wird die BrowserLiveView-Komponente gerendert und wartet auf eine sichere, zeitlich begrenzte SigV4-signierte URL. Diese URL, die von Ihrem Anwendungsserver generiert wird, ist der Schlüssel zur Herstellung einer persistenten WebSocket-Verbindung direkt zum Bedrock AgentCore-Dienst in der AWS Cloud.

Ihr Anwendungsserver erfüllt einen doppelten Zweck: Er hostet die Logik des KI-Agenten und fungiert als Vermittler für die Sitzungsverwaltung. Er ruft die Amazon Bedrock AgentCore API auf, um Browsersitzungen zu initiieren, und generiert dann sicher die SigV4-signierten URLs, die Ihrem Client-Browser Zugriff auf den Live-View-Stream gewähren. Entscheidend ist, dass Ihr Server zwar die Aktionen des Agenten orchestriert und die erforderlichen Anmeldeinformationen generiert, den Videostream jedoch nicht direkt verarbeitet.

Die Hauptarbeit der Browserautomatisierung und des Video-Streamings erfolgt innerhalb der AWS Cloud. Amazon Bedrock AgentCore hostet isolierte Cloud-Browser-Sitzungen und stellt sowohl den Automatisierungsendpunkt – mit dem Ihr KI-Agent über das Playwright Chrome DevTools Protocol (CDP) interagiert – als auch den Live-View-Streaming-Endpunkt bereit, der von Amazon DCV betrieben wird. Dieses Design stellt sicher, dass der DCV Live View-Stream direkt von Amazon Bedrock AgentCore zum Browser des Benutzers fließt. Diese direkte WebSocket-Verbindung umgeht Ihren Anwendungsserver, minimiert die Latenz, reduziert Ihren Infrastrukturaufwand und sorgt für ein reibungsloses Echtzeit-Seherlebnis.

Voraussetzungen für den Einsatz Ihres Live-KI-Agenten

Bevor Sie sich in die Implementierung Ihres Live-KI-Browser-Agenten stürzen, ist es wichtig, sicherzustellen, dass Ihre Entwicklungsumgebung korrekt konfiguriert ist und Sie über die notwendigen AWS-Ressourcen und Berechtigungen verfügen. Die Einhaltung dieser Voraussetzungen wird Ihren Entwicklungsprozess rationalisieren und dazu beitragen, einen sicheren Betriebsstatus aufrechtzuerhalten.

1. Node.js-Umgebung: Sie benötigen Node.js Version 20 oder höher auf Ihrem System, um die serverseitigen Komponenten Ihrer Anwendung auszuführen.
2. AWS-Konto und Region: Ein aktives AWS-Konto ist erforderlich, mit Zugriff auf eine unterstützte AWS-Region, in der Amazon Bedrock AgentCore verfügbar ist.
3. AWS-Anmeldeinformationen und Berechtigungen: Ihre AWS-Anmeldeinformationen müssen die entsprechenden Amazon Bedrock AgentCore Browser-Berechtigungen besitzen. Es ist entscheidend, das Prinzip der geringsten Berechtigung bei der Konfiguration von AWS Identity and Access Management (IAM) Berechtigungen zu befolgen. Für verbesserte Sicherheit verwenden Sie immer temporäre Anmeldeinformationen, die vom AWS IAM Identity Center oder AWS Security Token Service (AWS STS) bezogen werden, und vermeiden Sie langlebige Zugriffsschlüssel.
4. KI-Modellzugriff: Wenn Sie ein KI-Modell zur Steuerung des Agenten verwenden möchten (wie im Beispiel gezeigt, das die Amazon Bedrock Converse API mit Anthropic Claude verwendet), benötigen Sie Zugriff auf dieses spezifische Modell und alle zugehörigen AWS Bedrock-Berechtigungen. Denken Sie jedoch daran, dass Live View selbst modellunabhängig ist, sodass Sie jeden Modellprovider oder jedes Agenten-Framework Ihrer Wahl integrieren können.
5. SDK-Installationen:
   • Installieren Sie das bedrock-agentcore TypeScript SDK für die Interaktion mit AgentCore:

     npm install bedrock-agentcore
     

   • Wenn Sie AWS Bedrock für Ihr KI-Modell verwenden, installieren Sie das AWS SDK für JavaScript:

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

Die Codebasis für die Implementierung von Live View ist typischerweise geteilt: Der serverseitige Code (für die Sitzungsverwaltung und KI-Agentenlogik) läuft in Node.js, und der clientseitige Code (für das Rendern der Live View) läuft in einer React-Anwendung, oft gebündelt mit Tools wie Vite.

Schritt-für-Schritt-Integration: Von der Sitzung zum Stream

Die Integration eines Live-KI-Browser-Agenten mit Amazon Bedrock AgentCore umfasst einen klaren, dreistufigen Prozess, der Ihre serverseitige Logik mit Ihrer clientseitigen React-Anwendung und den robusten Funktionen der AWS Cloud verbindet.

1. Starten einer Browser-Sitzung und Generieren der Live-View-URL

Der erste Schritt erfolgt auf Ihrem Anwendungsserver. Hier initiiert Ihre Backend-Logik eine Browser-Sitzung innerhalb von Amazon Bedrock AgentCore und erhält sicher die notwendige URL, um die Live-Ansicht zu streamen.

Sie verwenden die Browser-Klasse aus dem bedrock-agentcore-SDK. Diese Klasse handhabt die Komplexität der Erstellung und Verwaltung isolierter Browser-Umgebungen in der Cloud. Das Schlüsselergebnis dieses Schritts ist eine SigV4-signierte URL, die sicheren, temporären Zugriff auf den Live-Videostream der Browser-Sitzung gewährt.

// Beispiel Server-Side-Code (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Bedrock AgentCore Client initialisieren (sicherstellen, dass die richtigen AWS-Anmeldeinformationen konfiguriert sind)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Ihre gewünschte Region verwenden

async function startLiveSession() {
    // Eine neue Browser-Sitzung erstellen
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Die Live-View-URL generieren
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live-View-URL:', liveViewUrl);

    // browser.sessionId speichern, um Ihren KI-Agenten später zu verbinden oder die Sitzung zu beenden
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Diese `liveViewUrl` wird an Ihren React-Client gesendet.

Diese URL wird dann an Ihr React-Frontend übergeben, das sie zum Aufbau des Live-Streams verwendet.

2. Rendern der Live-Ansicht in Ihrer React-Anwendung

Sobald Ihre React-Anwendung die liveViewUrl von Ihrem Server empfängt, ist das Rendern des Echtzeit-Streams dank der BrowserLiveView-Komponente bemerkenswert einfach.

// Beispiel Client-Side-Code (React-Komponente)
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>Warte auf Live-View-URL...</p>;
    }

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

// In Ihrer Haupt-App-Komponente oder Seite:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Die liveViewUrl von Ihrem Backend abrufen
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>Live-Ansicht des KI-Agenten</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Mit nur url={liveViewUrl} übernimmt die BrowserLiveView-Komponente die komplexen Details des Aufbaus der WebSocket-Verbindung, des Verbrauchs des DCV-Streams und des Renderns des Live-Video-Feeds innerhalb Ihrer angegebenen Abmessungen. Diese minimale JSX-Integration vereinfacht die Frontend-Entwicklung erheblich und ermöglicht es Ihnen, sich auf die Benutzererfahrung rund um den Live-Agenten zu konzentrieren.

3. Anbindung eines KI-Agenten zur Steuerung des Browsers

Der letzte Schritt verbindet die Intelligenz Ihres KI-Agenten mit den tatsächlichen Browseraktionen innerhalb der isolierten Sitzung. Während die BrowserLiveView das visuelle Feedback liefert, verwendet Ihr KI-Agent Playwright CDP (Chrome DevTools Protocol), um mit dem Browser programmatisch zu interagieren.

Ihr Anwendungsserver, der auch Ihren KI-Agenten hostet, verwendet die page-Eigenschaft des Browser-Objekts (die ein Playwright Page-Objekt ist), um Browseraktionen auszuführen.

// Beispiel Server-Side-Code (Fortsetzung von Schritt 1)
// Angenommen, Sie haben eine Playwright-ähnliche Schnittstelle oder verwenden Playwright direkt
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (vorherige Einrichtung für Browser-Erstellung) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Mit bestehender Sitzung neu verbinden
    await browser.connect(); // Mit der Browser-Sitzung verbinden

    const page = browser.page; // Das Playwright Page-Objekt abrufen

    // Beispiel KI-Agenten-Logik (vereinfacht zur Veranschaulichung)
    // Hier würden Sie die Integration mit Ihrem LLM (z.B. Anthropic Claude über die Bedrock Converse API)
    // vornehmen, um Aktionen basierend auf Benutzeranweisungen und Seiteninhalten zu bestimmen.
    console.log("Agent navigiert zu example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent wartete 3 Sekunden...");
    await page.waitForTimeout(3000); // Verarbeitungszeit simulieren

    console.log("Agent tippt in ein Suchfeld (hypothetisch)...");
    // Beispiel: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Beispiel: await page.click('#search-button');

    const content = await page.content();
    // Ein LLM verwenden, um 'content' zu analysieren und die nächsten Schritte zu entscheiden
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // oder Ihr bevorzugtes Modell
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analysiere diesen Webinhalt und schlage die nächste Aktion vor: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("KI-Modell schlug Aktion vor:", parsedBody.content[0].text);

    // Basierend auf dem Vorschlag des LLM weitere Seitenaktionen ausführen...

    // Vergessen Sie nicht, die Browsersitzung zu schließen, wenn Sie fertig sind
    // await browser.close();
}

// Nachdem die Sitzung gestartet und die URL abgerufen wurde, würden Sie driveAgent(sessionId) aufrufen

Diese Interaktionsschleife – bei der Ihr KI-Agent den Seiteninhalt analysiert, die nächste Aktion bestimmt und diese über Playwright CDP ausführt – bildet den Kern eines autonomen Browsing-Agenten. Alle diese Aktionen werden in Echtzeit über die BrowserLiveView-Komponente auf dem Bildschirm des Benutzers visuell gerendert.

Neue Möglichkeiten mit eingebetteten KI-Agenten erschließen

Die Integration der BrowserLiveView von Amazon Bedrock AgentCore ist mehr als nur eine technische Funktion; sie ist ein Paradigmenwechsel in der Art und Weise, wie Benutzer mit KI-Agenten interagieren und ihnen vertrauen. Durch die Einbettung von Echtzeit-Visualisierungen können Entwickler KI-gestützte Anwendungen erstellen, die nicht nur effizient, sondern auch transparent, auditierbar und benutzerfreundlich sind.

Diese Fähigkeit ist besonders transformativ für Anwendungen, die Folgendes umfassen:

• Komplexe Workflows: Automatisierung mehrstufiger Online-Prozesse wie Dateneingabe, Onboarding oder Einhaltung gesetzlicher Vorschriften, bei denen die Sichtbarkeit jedes Schrittes von größter Bedeutung ist.
• Kundensupport: Ermöglichen Sie Agenten, KI-Co-Piloten bei der Beantwortung von Kundenanfragen oder der Navigation durch Systeme zu beobachten, um Genauigkeit zu gewährleisten und Möglichkeiten zum Eingreifen zu bieten.
• Schulung und Debugging: Bereitstellung eines leistungsstarken Tools für Entwickler und Endbenutzer, um das Agentenverhalten zu verstehen, Probleme zu debuggen und Agenten durch direkte Beobachtung zu schulen.
• Erweiterte Audit-Trails: Erstellung visueller Aufzeichnungen von Agentenaktionen, die mit Sitzungsaufzeichnungen in Amazon S3 kombiniert werden können, um eine umfassende nachträgliche Überprüfung und Compliance zu ermöglichen.

Die Möglichkeit, Browser-Sitzungen direkt aus der AWS Cloud an Client-Browser zu streamen, wobei der Anwendungsserver für den Videostream umgangen wird, bietet erhebliche Vorteile in Bezug auf Leistung und Skalierbarkeit. Diese Architektur minimiert die Latenz und reduziert die Belastung Ihrer Backend-Infrastruktur, sodass Sie hochreaktionsschnelle und skalierbare KI-Agenten-Lösungen bereitstellen können.

Durch die Einführung von BrowserLiveView bauen Sie nicht nur KI-Agenten; Sie schaffen Vertrauen, Kontrolle und ein reicheres Benutzererlebnis. Entdecken Sie die Möglichkeiten und stärken Sie Ihre Benutzer mit dem Vertrauen, komplexe Webaufgaben an intelligente Agenten zu delegieren.