Bedrock AgentCore: Integra un agent de navegador IA en viu a React

L'era dels agents d'IA que operen com a "caixes negres" opaques s'està acabant ràpidament. A mesura que la intel·ligència artificial assumeix tasques cada cop més complexes i autònomes, particularment en entorns web, la demanda de transparència, confiança i control per part de l'usuari mai ha estat més alta. Els usuaris necessiten entendre i verificar les accions que un agent d'IA realitza en el seu nom, especialment quan aquestes accions impliquen navegar per llocs web, interactuar amb dades sensibles o executar fluxos de treball crítics.

Per abordar aquest desafiament fonamental, Amazon Web Services presenta una solució potent: el component Amazon Bedrock AgentCore BrowserLiveView. Aquesta eina innovadora permet als desenvolupadors incrustar un flux de vídeo en temps real d'una sessió de navegació d'un agent d'IA directament dins les seves aplicacions React. Aquesta integració no només desmitifica el comportament de l'agent, sinó que també proporciona als usuaris una visibilitat sense precedents i un sentit de control crucial.

Part de l'SDK TypeScript de Bedrock AgentCore, el component BrowserLiveView simplifica la integració de fluxos de navegador en viu a la vostra aplicació amb només unes poques línies de JavaScript XML (JSX). Utilitzant el protocol Amazon DCV d'alt rendiment, renderitza la sessió de l'agent, transformant efectivament un procés tradicionalment ocult en una experiència visualment verificable. Aquest article us guiarà a través del procés, des de l'inici d'una sessió i la generació de la URL de Live View, fins a la renderització del flux a la vostra aplicació React i, finalment, la connexió d'un agent d'IA per controlar el navegador mentre els vostres usuaris observen.

Millora de la Transparència dels Agents d'IA amb BrowserLiveView

En el panorama actual d'evolució ràpida de la IA Agentic, la capacitat de delegar tasques de navegació web als agents d'IA promet guanys d'eficiència immensos. No obstant això, aquesta promesa sovint es veu atenuada per preocupacions sobre la fiabilitat, precisió i seguretat dels agents. Sense una finestra clara a les operacions d'un agent, els usuaris es veuen obligats a confiar en un sistema que no poden observar, cosa que pot dificultar l'adopció i limitar el desplegament en escenaris sensibles.

El component BrowserLiveView aborda directament aquest desafiament obrint els "ulls" de l'agent d'IA a l'usuari. Imagineu un agent d'IA encarregat d'emplenar un formulari en línia complex o de recuperar informació específica de diversos llocs web. Tradicionalment, l'usuari només rebria una sortida final o un resum de les accions, deixant-lo amb dubtes sobre els passos intermedis. Amb una Live View incrustada, els usuaris poden seguir cada navegació, enviament de formulari i consulta de cerca en temps real a mesura que l'agent la realitza.

Aquesta confirmació visual immediata és inestimable. Reafirma als usuaris que l'agent es troba a la pàgina correcta, interactuant amb els elements adequats i progressant a través del flux de treball segons el previst. Aquest bucle de retroalimentació en temps real va més enllà de les simples confirmacions de text; proporciona un registre d'auditoria tangible i verificable del comportament de l'agent, fomentant una major confiança. Per als fluxos de treball que estan regulats o que impliquen dades sensibles del client, aquesta evidència visual pot ser crítica per al compliment i la rendició de comptes. A més, en escenaris que requereixen supervisió humana, un supervisor pot observar directament les accions de l'agent dins de l'aplicació, intervenint si cal, sense interrompre el flux.

L'arquitectura darrere de l'observació d'agents en temps real

La integració fluida d'un agent de navegador IA en viu dins d'una aplicació React impulsada per Amazon Bedrock AgentCore s'orquestra mitjançant una arquitectura sofisticada però eficient que comprèn tres components clau. Comprendre la interacció entre aquestes parts és crucial per a una implementació i desplegament reeixits.

La interacció comença amb el navegador web de l'usuari, que executa la vostra aplicació React. Dins d'aquesta aplicació, es renderitza el component BrowserLiveView, esperant una URL pre-signada SigV4 segura i de temps limitat. Aquesta URL, generada pel vostre servidor d'aplicacions, és la clau per establir una connexió WebSocket persistent directament al servei Bedrock AgentCore a l'AWS Cloud.

El vostre servidor d'aplicacions té un doble propòsit: allotja la lògica de l'agent d'IA i actua com a intermediari per a la gestió de sessions. Crida l'API d'Amazon Bedrock AgentCore per iniciar sessions de navegador i després genera de manera segura les URL pre-signades SigV4 que atorguen al vostre navegador client accés al flux de Live View. Crucialment, mentre que el vostre servidor orquestra les accions de l'agent i genera les credencials necessàries, no gestiona directament el flux de vídeo en si.

La part més pesada de l'automatització del navegador i la transmissió de vídeo es produeix a l'AWS Cloud. Amazon Bedrock AgentCore allotja sessions de navegador al núvol aïllades, proporcionant tant el punt final d'automatització —amb el qual el vostre agent d'IA interactua utilitzant el Playwright Chrome DevTools Protocol (CDP)— com el punt final de transmissió de Live View, impulsat per Amazon DCV. Aquest disseny garanteix que el flux de Live View DCV flueixi directament d'Amazon Bedrock AgentCore al navegador de l'usuari. Aquesta connexió WebSocket directa evita el vostre servidor d'aplicacions, minimitzant la latència, reduint la vostra despesa general d'infraestructura i assegurant una experiència de visualització fluida i en temps real.

Requisits Previs per Desplegar el vostre Agent d'IA en Viu

Abans d'endinsar-vos en la implementació del vostre agent de navegador IA en viu, és essencial assegurar-vos que el vostre entorn de desenvolupament estigui configurat correctament i que disposeu dels recursos i permisos d'AWS necessaris. Complir aquests requisits previs agilitzarà el vostre procés de desenvolupament i ajudarà a mantenir una postura operativa segura.

1. Entorn Node.js: Necessitareu Node.js versió 20 o posterior instal·lat al vostre sistema per executar els components del servidor de la vostra aplicació.
2. Compte i Regió d'AWS: Es requereix un compte d'AWS actiu, amb accés a una regió d'AWS compatible on Amazon Bedrock AgentCore estigui disponible.
3. Credencials i Permisos d'AWS: Les vostres credencials d'AWS han de tenir els permisos d'Amazon Bedrock AgentCore Browser adequats. És crucial seguir el principi del menor privilegi en configurar els permisos d'AWS Identity and Access Management (IAM). Per millorar la seguretat, utilitzeu sempre credencials temporals obtingudes d'AWS IAM Identity Center o d'AWS Security Token Service (AWS STS), evitant les claus d'accés de llarga durada.
4. Accés al Model d'IA: Si teniu previst utilitzar un model d'IA per controlar l'agent (com es demostra a l'exemple, que utilitza l'API Amazon Bedrock Converse amb Anthropic Claude), necessitareu accés a aquest model específic i a qualsevol permís d'AWS Bedrock associat. No obstant això, recordeu que Live View en si és agnòstic del model, la qual cosa us permet integrar qualsevol proveïdor de model o framework d'agent de la vostra elecció.
5. Instal·lacions de l'SDK:
   • Instal·leu l'SDK TypeScript bedrock-agentcore per interactuar amb AgentCore:

     npm install bedrock-agentcore
     

   • Si utilitzeu AWS Bedrock per al vostre model d'IA, instal·leu l'SDK d'AWS per a JavaScript:

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

La base de codi per implementar Live View normalment es divideix: el codi del servidor (per a la gestió de sessions i la lògica de l'agent d'IA) s'executa en Node.js, i el codi del client (per a la renderització de Live View) s'executa dins d'una aplicació React, sovint empaquetada amb eines com Vite.

Integració Pas a Pas: De la Sessió al Flux

La integració d'un agent de navegador IA en viu amb Amazon Bedrock AgentCore implica un procés clar de tres passos, que connecta la vostra lògica del servidor amb la vostra aplicació React del client i les robustes capacitats d'AWS Cloud.

1. Iniciant una Sessió de Navegador i Generant la URL de Live View

El primer pas es produeix al vostre servidor d'aplicacions. Aquí és on la vostra lògica de backend inicia una sessió de navegador dins d'Amazon Bedrock AgentCore i obté de manera segura la URL necessària per transmetre la vista en temps real.

Utilitzareu la classe Browser de l'SDK bedrock-agentcore. Aquesta classe gestiona la complexitat de crear i administrar entorns de navegador aïllats al núvol. El resultat clau d'aquest pas és una URL pre-signada SigV4, que atorga accés segur i temporal al flux de vídeo en directe de la sessió del navegador.

// Codi d'exemple del servidor (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Inicialitza el client Bedrock AgentCore (assegura't que les credencials d'AWS estiguin configurades correctament)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Utilitza la teva regió desitjada

async function startLiveSession() {
    // Crea una nova sessió de navegador
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Genera la URL de Live View
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Desa browser.sessionId per connectar posteriorment el teu agent d'IA o finalitzar la sessió
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Aquesta `liveViewUrl` s'enviarà al teu client React.

Aquesta URL es passa llavors al vostre frontend React, que la utilitzarà per establir la transmissió en directe.

2. Renderitzant la Live View a la vostra Aplicació React

Un cop la vostra aplicació React rep la liveViewUrl del vostre servidor, la renderització del flux en temps real és remarcablement senzilla, gràcies al component BrowserLiveView.

// Codi d'exemple del client (component 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>Esperant la URL de Live View...</p>;
    }

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

// Al vostre component o pàgina principal de l'aplicació:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Obté la liveViewUrl del teu backend
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>Vista en temps real de l'agent d'IA</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Amb només url={liveViewUrl}, el component BrowserLiveView gestiona els detalls complexos d'establir la connexió WebSocket, consumir el flux DCV i renderitzar el flux de vídeo en viu dins de les vostres dimensions especificades. Aquesta integració JSX mínima simplifica en gran mesura el desenvolupament de frontend, permetent-vos centrar-vos en l'experiència d'usuari al voltant de l'agent en viu.

3. Connectant un Agent d'IA per Controlar el Navegador

El pas final connecta la intel·ligència del vostre agent d'IA amb les accions reals del navegador dins de la sessió aïllada. Mentre que el BrowserLiveView proporciona la retroalimentació visual, el vostre agent d'IA utilitza Playwright CDP (Chrome DevTools Protocol) per interactuar amb el navegador de manera programàtica.

El vostre servidor d'aplicacions, que també allotja el vostre agent d'IA, utilitzarà la propietat page de l'objecte Browser (que és un objecte Playwright Page) per executar accions del navegador.

// Codi d'exemple del servidor (continuació del pas 1)
// Assumint que teniu una interfície tipus Playwright o un ús directe de Playwright
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (configuració prèvia per a la creació del navegador) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Reconnecta a la sessió existent
    await browser.connect(); // Connecta a la sessió del navegador

    const page = browser.page; // Obtén l'objecte Page de Playwright

    // Lògica d'exemple de l'agent d'IA (simplificada per a la il·lustració)
    // Aquí us integraríeu amb el vostre LLM (p. ex., Anthropic Claude mitjançant l'API Bedrock Converse)
    // per determinar accions basades en les indicacions de l'usuari i el contingut de la pàgina.
    console.log("L'agent navega a example.com...");
    await page.goto('https://www.example.com');
    console.log("L'agent va esperar 3 segons...");
    await page.waitForTimeout(3000); // Simula el temps de processament

    console.log("L'agent escriu en un quadre de cerca (hipotètic)...");
    // Exemple: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Exemple: await page.click('#search-button');

    const content = await page.content();
    // Utilitza un LLM per analitzar 'content' i decidir els passos següents
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // o el teu model preferit
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analitza el contingut d'aquesta pàgina web i suggereix la següent acció: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("Acció suggerida pel model d'IA:", parsedBody.content[0].text);

    // Basant-se en el suggeriment de l'LLM, executa més accions a la pàgina...

    // No oblidis tancar la sessió del navegador quan hagis acabat
    // await browser.close();
}

// Després d'iniciar la sessió i obtenir la URL, cridaríeu a driveAgent(sessionId)

Aquest bucle d'interacció —on el vostre agent d'IA analitza el contingut de la pàgina, determina la següent acció i l'executa mitjançant Playwright CDP— constitueix el nucli d'un agent de navegació autònom. Totes aquestes accions es renderitzen visualment en temps real a través del component BrowserLiveView a la pantalla de l'usuari.

Desbloquejant Noves Possibilitats amb Agents d'IA Incrustats

La integració de BrowserLiveView d'Amazon Bedrock AgentCore és més que una simple característica tècnica; és un canvi de paradigma en la manera com els usuaris interactuen i confien en els agents d'IA. En incrustar retroalimentació visual en temps real, els desenvolupadors poden crear aplicacions impulsades per IA que no només són eficients, sinó també transparents, auditables i fàcils d'utilitzar.

Aquesta capacitat és particularment transformadora per a aplicacions que impliquen:

• Fluxos de Treball Complexos: Automatitzant processos en línia de diversos passos com l'entrada de dades, l'incorporació o el compliment normatiu, on la visibilitat de cada pas és primordial.
• Suport al Client: Permetent als agents observar els copilots d'IA resolent consultes de clients o navegant per sistemes, assegurant la precisió i proporcionant oportunitats d'intervenció.
• Formació i Depuració: Oferint als desenvolupadors i usuaris finals una eina potent per entendre el comportament de l'agent, depurar problemes i entrenar agents mitjançant l'observació directa.
• Rastres d'Auditoria Millorats: Generant registres visuals de les accions de l'agent, que es poden combinar amb gravacions de sessions a Amazon S3 per a una revisió post-mortem i un compliment exhaustius.

La capacitat de transmetre directament sessions de navegador des d'AWS Cloud als navegadors del client, evitant el servidor d'aplicacions per al flux de vídeo, ofereix avantatges significatius en termes de rendiment i escalabilitat. Aquesta arquitectura minimitza la latència i redueix la càrrega de la vostra infraestructura de backend, permetent-vos desplegar solucions d'agents d'IA altament responsives i escalables.

En adoptar BrowserLiveView, no només esteu construint agents d'IA; esteu construint confiança, control i una experiència d'usuari més rica. Exploreu les possibilitats i doneu als vostres usuaris la confiança per delegar tasques web complexes a agents intel·ligents.