Bedrock AgentCore: Incrusta un agente de navegador IA en vivo en React

La era de los agentes de IA que operan como 'cajas negras' opacas está llegando rápidamente a su fin. A medida que la inteligencia artificial asume tareas cada vez más complejas y autónomas, particularmente en entornos web, la demanda de transparencia, confianza y control del usuario nunca ha sido tan alta. Los usuarios necesitan comprender y verificar las acciones que un agente de IA realiza en su nombre, especialmente cuando esas acciones implican navegar por sitios web, interactuar con datos sensibles o ejecutar flujos de trabajo críticos.

Para abordar este desafío fundamental, Amazon Web Services presenta una solución potente: el componente BrowserLiveView de Amazon Bedrock AgentCore. Esta herramienta innovadora permite a los desarrolladores incrustar una transmisión de video en vivo y en tiempo real de la sesión de navegación de un agente de IA directamente dentro de sus aplicaciones React. Esta integración no solo desmitifica el comportamiento del agente, sino que también proporciona a los usuarios una visibilidad sin precedentes y una sensación crucial de control.

Como parte del SDK de TypeScript de Bedrock AgentCore, el componente BrowserLiveView simplifica la integración de transmisiones en vivo del navegador en tu aplicación con solo unas pocas líneas de JavaScript XML (JSX). Utilizando el protocolo Amazon DCV de alto rendimiento, renderiza la sesión del agente, transformando eficazmente un proceso tradicionalmente oculto en una experiencia visualmente verificable. Este artículo te guiará a través del proceso, desde cómo iniciar una sesión y generar la URL de Vista en Vivo, hasta cómo renderizar la transmisión en tu aplicación React y, finalmente, cómo conectar un agente de IA para que controle el navegador mientras tus usuarios observan.

Mejorando la transparencia de los agentes de IA con BrowserLiveView

En el panorama actual de rápida evolución de la IA Agéntica, la capacidad de delegar tareas de navegación web a agentes de IA promete inmensas ganancias de eficiencia. Sin embargo, esta promesa a menudo se ve atenuada por preocupaciones sobre la fiabilidad, precisión y seguridad del agente. Sin una ventana clara a las operaciones de un agente, los usuarios se ven obligados a confiar en un sistema que no pueden observar, lo que puede dificultar la adopción y limitar su implementación en escenarios sensibles.

El componente BrowserLiveView aborda directamente este desafío abriendo los "ojos" del agente de IA al usuario. Imagina un agente de IA encargado de rellenar un formulario en línea complejo o de recuperar información específica de múltiples sitios web. Tradicionalmente, el usuario solo recibiría un resultado final o un resumen de las acciones, lo que le dejaría preguntándose sobre los pasos intermedios. Con una Vista en Vivo incrustada, los usuarios pueden seguir cada navegación, envío de formulario y consulta de búsqueda en tiempo real mientras el agente lo realiza.

Esta confirmación visual inmediata es invaluable. Reafirma a los usuarios que el agente está en la página correcta, interactuando con los elementos adecuados y progresando en el flujo de trabajo según lo previsto. Este ciclo de retroalimentación en tiempo real va más allá de las meras confirmaciones de texto; proporciona un rastro de auditoría tangible y verificable del comportamiento del agente, fomentando una mayor confianza. Para flujos de trabajo regulados o que implican datos sensibles del cliente, esta evidencia visual puede ser crítica para el cumplimiento y la rendición de cuentas. Además, en escenarios que requieren supervisión humana, un supervisor puede observar directamente las acciones del agente dentro de la aplicación, interviniendo si es necesario, sin interrumpir el flujo.

La arquitectura detrás de la observación de agentes en tiempo real

La integración fluida de un agente de navegador IA en vivo dentro de una aplicación React impulsada por Amazon Bedrock AgentCore se orquesta a través de una arquitectura sofisticada pero eficiente que comprende tres componentes clave. Comprender la interacción entre estas partes es crucial para una implementación y despliegue exitosos.

La interacción comienza con el navegador web del usuario, que ejecuta tu aplicación React. Dentro de esta aplicación, se renderiza el componente BrowserLiveView, a la espera de una URL prefirmada con SigV4 segura y con límite de tiempo. Esta URL, generada por el servidor de tu aplicación, es la clave para establecer una conexión WebSocket persistente directamente con el servicio Bedrock AgentCore en la Nube de AWS.

El servidor de tu aplicación tiene un doble propósito: aloja la lógica del agente de IA y actúa como intermediario para la gestión de sesiones. Llama a la API de Amazon Bedrock AgentCore para iniciar sesiones de navegador y luego genera de forma segura las URL prefirmadas con SigV4 que otorgan a tu navegador cliente acceso a la transmisión de Vista en Vivo. Fundamentalmente, aunque tu servidor orquesta las acciones del agente y genera las credenciales necesarias, no maneja directamente la transmisión de video.

El trabajo pesado de la automatización del navegador y la transmisión de video ocurre dentro de la Nube de AWS. Amazon Bedrock AgentCore aloja sesiones de navegador aisladas en la nube, proporcionando tanto el punto final de automatización —con el que interactúa tu agente de IA utilizando el Protocolo de Herramientas de Desarrollo de Chrome (CDP) de Playwright— como el punto final de transmisión de Vista en Vivo, impulsado por Amazon DCV. Este diseño garantiza que la transmisión de Vista en Vivo de DCV fluya directamente desde Amazon Bedrock AgentCore al navegador del usuario. Esta conexión directa de WebSocket evita el servidor de tu aplicación, minimizando la latencia, reduciendo la sobrecarga de tu infraestructura y asegurando una experiencia de visualización fluida y en tiempo real.

Requisitos previos para desplegar tu agente de IA en vivo

Antes de sumergirte en la implementación de tu agente de navegador IA en vivo, es esencial asegurarte de que tu entorno de desarrollo esté configurado correctamente y de que tengas los recursos y permisos de AWS necesarios. Cumplir con estos requisitos previos agilizará tu proceso de desarrollo y ayudará a mantener una postura operativa segura.

1. Entorno Node.js: Necesitarás Node.js versión 20 o posterior instalado en tu sistema para ejecutar los componentes del lado del servidor de tu aplicación.
2. Cuenta y Región de AWS: Se requiere una cuenta de AWS activa, con acceso a una región de AWS compatible donde Amazon Bedrock AgentCore esté disponible.
3. Credenciales y Permisos de AWS: Tus credenciales de AWS deben tener los permisos de navegador de Amazon Bedrock AgentCore adecuados. Es crucial seguir el principio de privilegio mínimo al configurar los permisos de AWS Identity and Access Management (IAM). Para una mayor seguridad, utiliza siempre credenciales temporales obtenidas de AWS IAM Identity Center o AWS Security Token Service (AWS STS), evitando claves de acceso de larga duración.
4. Acceso al Modelo de IA: Si planeas usar un modelo de IA para controlar el agente (como se demuestra en el ejemplo, que utiliza la API de Amazon Bedrock Converse con Anthropic Claude), necesitarás acceso a ese modelo específico y a cualquier permiso asociado de AWS Bedrock. Sin embargo, recuerda que la Vista en Vivo en sí misma es agnóstica al modelo, lo que te permite integrar cualquier proveedor de modelo o framework de agente de tu elección.
5. Instalaciones del SDK:
   • Instala el SDK de TypeScript bedrock-agentcore para interactuar con AgentCore:

     npm install bedrock-agentcore
     

   • Si utilizas AWS Bedrock para tu modelo de IA, instala el SDK de AWS para JavaScript:

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

La base de código para implementar la Vista en Vivo normalmente se divide: el código del lado del servidor (para la gestión de sesiones y la lógica del agente de IA) se ejecuta en Node.js, y el código del lado del cliente (para renderizar la Vista en Vivo) se ejecuta dentro de una aplicación React, a menudo empaquetada con herramientas como Vite.

Integración paso a paso: De la sesión a la transmisión

La integración de un agente de navegador IA en vivo con Amazon Bedrock AgentCore implica un proceso claro de tres pasos, que une la lógica de tu servidor con tu aplicación React del lado del cliente y las sólidas capacidades de la Nube de AWS.

1. Iniciando una sesión de navegador y generando la URL de Vista en Vivo

El primer paso ocurre en el servidor de tu aplicación. Aquí es donde tu lógica de backend inicia una sesión de navegador dentro de Amazon Bedrock AgentCore y obtiene de forma segura la URL necesaria para transmitir la vista en vivo.

Utilizarás la clase Browser del SDK bedrock-agentcore. Esta clase maneja la complejidad de crear y gestionar entornos de navegador aislados en la nube. El resultado clave de este paso es una URL prefirmada con SigV4, que otorga acceso seguro y temporal a la transmisión de video en vivo de la sesión del navegador.

// Código de ejemplo del lado del servidor (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Inicializa el cliente de Bedrock AgentCore (asegúrate de que las credenciales de AWS estén configuradas correctamente)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Usa tu región deseada

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

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

    // Almacena browser.sessionId para luego conectar tu agente de IA o terminar la sesión
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Esta `liveViewUrl` se enviará a tu cliente React.

Esta URL se pasa luego a tu frontend de React, que la usará para establecer la transmisión en vivo.

2. Renderizando la Vista en Vivo en tu aplicación React

Una vez que tu aplicación React recibe la liveViewUrl de tu servidor, renderizar la transmisión en tiempo real es notablemente sencillo, gracias al componente BrowserLiveView.

// Código de ejemplo del lado del cliente (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>Esperando la URL de Vista en Vivo...</p>;
    }

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

// En tu componente principal de App o página:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Obtener la liveViewUrl de tu backend
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>Vista en Vivo del Agente de IA</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Con solo url={liveViewUrl}, el componente BrowserLiveView maneja los detalles intrincados de establecer la conexión WebSocket, consumir la transmisión DCV y renderizar la transmisión de video en vivo dentro de las dimensiones especificadas. Esta integración JSX mínima simplifica en gran medida el desarrollo frontend, permitiéndote concentrarte en la experiencia de usuario alrededor del agente en vivo.

3. Conectando un agente de IA para controlar el navegador

El paso final conecta la inteligencia de tu agente de IA con las acciones reales del navegador dentro de la sesión aislada. Mientras que BrowserLiveView proporciona la retroalimentación visual, tu agente de IA utiliza Playwright CDP (Protocolo de Herramientas de Desarrollo de Chrome) para interactuar con el navegador de forma programática.

El servidor de tu aplicación, que también aloja tu agente de IA, utilizará la propiedad page del objeto Browser (que es un objeto Page de Playwright) para ejecutar acciones del navegador.

// Código de ejemplo del lado del servidor (continuación del paso 1)
// Suponiendo que tienes una interfaz tipo Playwright o uso directo 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ón previa para la creación del navegador) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Reconecta a la sesión existente
    await browser.connect(); // Conecta a la sesión del navegador

    const page = browser.page; // Obtiene el objeto Playwright Page

    // Lógica de ejemplo del agente de IA (simplificada para ilustración)
    // Aquí integrarías con tu LLM (por ejemplo, Anthropic Claude a través de la API de Bedrock Converse)
    // para determinar acciones basadas en las indicaciones del usuario y el contenido de la página.
    console.log("El agente navegando a example.com...");
    await page.goto('https://www.example.com');
    console.log("El agente esperó 3 segundos...");
    await page.waitForTimeout(3000); // Simula tiempo de procesamiento

    console.log("El agente escribiendo en un cuadro de búsqueda (hipotético)...");
    // Ejemplo: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Ejemplo: await page.click('#search-button');

    const content = await page.content();
    // Usa un LLM para analizar 'content' y decidir los próximos pasos
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // o tu modelo preferido
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analiza el contenido de esta página web y sugiere la siguiente acción: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("Acción sugerida por el modelo de IA:", parsedBody.content[0].text);

    // Basado en la sugerencia del LLM, ejecuta más acciones en la página...

    // No olvides cerrar la sesión del navegador cuando termines
    // await browser.close();
}

// Después de iniciar la sesión y obtener la URL, llamarías a driveAgent(sessionId)

Este bucle de interacción —donde tu agente de IA analiza el contenido de la página, determina la siguiente acción y la ejecuta a través de Playwright CDP— forma el núcleo de un agente de navegación autónomo. Todas estas acciones se renderizan visualmente en tiempo real a través del componente BrowserLiveView en la pantalla del usuario.

Desbloqueando nuevas posibilidades con agentes de IA incrustados

La integración de BrowserLiveView de Amazon Bedrock AgentCore es más que una simple característica técnica; es un cambio de paradigma en la forma en que los usuarios interactúan y confían en los agentes de IA. Al incrustar retroalimentación visual en tiempo real, los desarrolladores pueden crear aplicaciones impulsadas por IA que no solo son eficientes, sino también transparentes, auditables y fáciles de usar.

Esta capacidad es particularmente transformadora para aplicaciones que implican:

• Flujos de trabajo complejos: Automatizar procesos en línea de varios pasos, como la entrada de datos, la incorporación o el cumplimiento normativo, donde la visibilidad de cada paso es primordial.
• Soporte al cliente: Permitir a los agentes observar a los copilotos de IA resolver consultas de clientes o navegar por sistemas, garantizando la precisión y brindando oportunidades de intervención.
• Capacitación y depuración: Proporcionar a los desarrolladores y usuarios finales una potente herramienta para comprender el comportamiento del agente, depurar problemas y entrenar agentes mediante la observación directa.
• Rastros de auditoría mejorados: Generar registros visuales de las acciones del agente, que pueden combinarse con grabaciones de sesión en Amazon S3 para una revisión y cumplimiento post-mortem exhaustivos.

La capacidad de transmitir directamente sesiones de navegador desde la Nube de AWS a los navegadores del cliente, omitiendo el servidor de la aplicación para la transmisión de video, ofrece ventajas significativas en términos de rendimiento y escalabilidad. Esta arquitectura minimiza la latencia y reduce la carga sobre tu infraestructura de backend, permitiéndote desplegar soluciones de agentes de IA altamente receptivas y escalables.

Al adoptar BrowserLiveView, no solo estás construyendo agentes de IA; estás construyendo confianza, control y una experiencia de usuario más rica. Explora las posibilidades y empodera a tus usuarios con la confianza para delegar tareas web complejas a agentes inteligentes.