Bedrock AgentCore: Integra un Agente Browser AI in Tempo Reale in React

• Se stai utilizzando AWS Bedrock per il tuo modello AI, installa l'SDK AWS per JavaScript:

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

La codebase per l'implementazione della Visualizzazione Live è tipicamente divisa: il codice lato server (per la gestione della sessione e la logica dell'agente AI) viene eseguito in Node.js, e il codice lato client (per il rendering della Visualizzazione Live) viene eseguito all'interno di un'applicazione React, spesso impacchettata con strumenti come Vite.

Integrazione Passo Dopo Passo: Dalla Sessione allo Streaming

L'integrazione di un agente browser AI live con Amazon Bedrock AgentCore prevede un processo chiaro e in tre fasi, che collega la tua logica lato server con la tua applicazione React lato client e le robuste capacità del Cloud AWS.

1. Avvio di una Sessione Browser e Generazione dell'URL di Visualizzazione Live

Il primo passaggio avviene sul server dell'applicazione. Qui la tua logica backend avvia una sessione browser all'interno di Amazon Bedrock AgentCore e ottiene in modo sicuro l'URL necessario per trasmettere il live view.

Utilizzerai la classe Browser dall'SDK bedrock-agentcore. Questa classe gestisce la complessità della creazione e gestione di ambienti browser isolati nel cloud. L'output chiave di questo passaggio è un URL presigned SigV4, che garantisce un accesso sicuro e temporaneo al flusso video live della sessione browser.

// Esempio di codice lato server (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Inizializza il client Bedrock AgentCore (assicurati che le credenziali AWS siano configurate correttamente)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Usa la regione desiderata

async function startLiveSession() {
    // Crea una nuova sessione browser
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Genera l'URL della Visualizzazione Live
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('URL Visualizzazione Live:', liveViewUrl);

    // Archivia browser.sessionId per connettere successivamente il tuo agente AI o terminare la sessione
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Questo `liveViewUrl` verrà inviato al tuo client React.

Questo URL viene quindi passato al tuo frontend React, che lo utilizzerà per stabilire il live stream.

2. Rendering della Visualizzazione Live nella Tua Applicazione React

Una volta che la tua applicazione React riceve il liveViewUrl dal tuo server, il rendering del flusso in tempo reale è straordinariamente semplice, grazie al componente BrowserLiveView.

// Esempio di codice lato client (componente 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>In attesa dell'URL della Visualizzazione Live...</p>;
    }

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

// Nel tuo componente App principale o nella pagina:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Recupera l'URL della Visualizzazione Live dal tuo backend
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>Visualizzazione Live dell'Agente AI</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Con il solo url={liveViewUrl}, il componente BrowserLiveView gestisce i dettagli complessi dello stabilire la connessione WebSocket, consumare il flusso DCV e renderizzare il feed video in tempo reale all'interno delle dimensioni specificate. Questa integrazione JSX minima semplifica notevolmente lo sviluppo frontend, consentendoti di concentrarti sull'esperienza utente attorno all'agente live.

3. Connettere un Agente AI per Guidare il Browser

Il passaggio finale collega l'intelligenza del tuo agente AI alle azioni effettive del browser all'interno della sessione isolata. Mentre BrowserLiveView fornisce il feedback visivo, il tuo agente AI utilizza Playwright CDP (Chrome DevTools Protocol) per interagire con il browser in modo programmatico.

Il server dell'applicazione, che ospita anche il tuo agente AI, utilizzerà la proprietà page dell'oggetto Browser (che è un oggetto Playwright Page) per eseguire le azioni del browser.

// Esempio di codice lato server (continuazione dal passaggio 1)
// Supponendo che tu abbia un'interfaccia simile a Playwright o un uso diretto di Playwright
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (configurazione precedente per la creazione del browser) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Riconnettersi a una sessione esistente
    await browser.connect(); // Connettersi alla sessione browser

    const page = browser.page; // Ottieni l'oggetto Playwright Page

    // Logica dell'agente AI di esempio (semplificata per illustrazione)
    // Qui integreresti con il tuo LLM (ad esempio, Anthropic Claude tramite l'API Bedrock Converse)
    // per determinare le azioni basate sulle richieste dell'utente e sul contenuto della pagina.
    console.log("L'agente sta navigando su example.com...");
    await page.goto('https://www.example.com');
    console.log("L'agente ha atteso 3 secondi...");
    await page.waitForTimeout(3000); // Simula il tempo di elaborazione

    console.log("L'agente sta digitando in una casella di ricerca (ipotetico)...");
    // Esempio: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Esempio: await page.click('#search-button');

    const content = await page.content();
    // Usa un LLM per analizzare il 'content' e decidere i passaggi successivi
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // o il tuo modello preferito
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analizza il contenuto di questa pagina web e suggerisci la prossima azione: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("Modello AI ha suggerito l'azione:", parsedBody.content[0].text);

    // Basato sul suggerimento dell'LLM, esegui ulteriori azioni sulla pagina...

    // Non dimenticare di chiudere la sessione browser una volta terminato
    // await browser.close();
}

// Dopo aver avviato la sessione e ottenuto l'URL, chiamerai driveAgent(sessionId)

Questo ciclo di interazione—dove il tuo agente AI analizza il contenuto della pagina, determina l'azione successiva ed la esegue tramite Playwright CDP—costituisce il nucleo di un agente di navigazione autonomo. Tutte queste azioni vengono renderizzate visivamente in tempo reale tramite il componente BrowserLiveView sullo schermo dell'utente.

Sbloccare Nuove Possibilità con Agenti AI Integrati

L'integrazione del BrowserLiveView di Amazon Bedrock AgentCore è più di una semplice funzionalità tecnica; è un cambiamento di paradigma nel modo in cui gli utenti interagiscono e si fidano degli agenti AI. Incorporando un feedback visivo in tempo reale, gli sviluppatori possono creare applicazioni basate sull'AI che non sono solo efficienti ma anche trasparenti, verificabili e facili da usare.

Questa capacità è particolarmente trasformativa per le applicazioni che coinvolgono:

• Flussi di Lavoro Complessi: Automazione di processi online a più passaggi come l'inserimento dati, l'onboarding o la conformità normativa, dove la visibilità di ogni passaggio è fondamentale.
• Supporto Clienti: Consentire agli agenti di osservare i co-piloti AI che risolvono le query dei clienti o navigano nei sistemi, garantendo precisione e offrendo opportunità di intervento.
• Formazione e Debugging: Fornire a sviluppatori e utenti finali uno strumento potente per comprendere il comportamento dell'agente, risolvere i problemi e addestrare gli agenti tramite l'osservazione diretta.
• Registri di Controllo Migliorati: Generare registrazioni visive delle azioni dell'agente, che possono essere combinate con le registrazioni di sessione su Amazon S3 per una revisione post-hoc completa e per la conformità.

La capacità di trasmettere direttamente le sessioni browser dal Cloud AWS ai browser client, bypassando il server dell'applicazione per il flusso video, offre vantaggi significativi in termini di prestazioni e scalabilità. Questa architettura minimizza la latenza e riduce l'onere sull'infrastruttura backend, consentendoti di implementare soluzioni di agenti AI altamente reattive e scalabili.

Adottando BrowserLiveView, non stai solo costruendo agenti AI; stai costruendo fiducia, controllo e un'esperienza utente più ricca. Esplora le possibilità e potenzia i tuoi utenti con la sicurezza di delegare complessi compiti web ad agenti intelligenti.