Cuando crea aplicaciones impulsadas por IA, sus usuarios deben comprender y confiar en los agentes de IA que navegan por sitios web e interactúan con el contenido web en su nombre. Cuando un agente interactúa con el contenido web de forma autónoma, sus usuarios necesitan visibilidad de esas acciones para mantener la confianza y el control, algo que no tienen actualmente.
El componente BrowserLiveView de Amazon Bedrock AgentCore Browser aborda este desafío al proporcionar una transmisión de video en tiempo real de la sesión de navegación del agente directamente dentro de su aplicación React. Este componente, parte del SDK Bedrock AgentCore TypeScript, agiliza la integración incorporando una secuencia de navegador en vivo con tres líneas de JavaScript XML (JSX).
El componente BrowserLiveView utiliza el protocolo Amazon DCV para representar la sesión del navegador, creando transparencia en las acciones del agente. La implementación solo requiere una URL prefirmada de su servidor, sin necesidad de crear una infraestructura de transmisión.
Esta publicación lo guía a través de tres pasos: iniciar una sesión y generar la URL de visualización en vivo, representar la transmisión en su aplicación React y conectar un agente de inteligencia artificial que controla el navegador mientras sus usuarios miran. Al final, tendrá una aplicación de muestra funcional que podrá clonar y ejecutar.
¿Por qué insertar Live View en su aplicación?
Integrar Live View dentro de su propia aplicación desbloquea valor adicional para sus usuarios a escala.
Con una vista en vivo integrada, sus usuarios siguen cada navegación, envío de formularios y consulta de búsqueda a medida que el agente los realiza. Obtienen una confirmación visual inmediata de que el agente está en la página correcta, interactúa con los elementos correctos y avanza en el flujo de trabajo. Este circuito de retroalimentación en tiempo real brinda a los usuarios finales información directa sobre el comportamiento de los agentes sin esperar el resultado final.
Los usuarios que delegan tareas de navegación a un agente de IA tienen más confianza cuando pueden observar el trabajo. Ver al agente completar un formulario campo por campo es más tranquilizador que recibir una confirmación por mensaje de texto. Para los flujos de trabajo regulados, la evidencia visual de las acciones de los agentes puede respaldar los requisitos de auditoría.
En flujos de trabajo que requieren supervisión humana, como el manejo de cuentas de clientes y el procesamiento de datos confidenciales, un supervisor puede usar la Vista en vivo integrada para observar al agente en tiempo real e intervenir si es necesario, sin salir de su aplicación.
Las organizaciones también obtienen soporte de seguimiento de auditoría a través de evidencia visual de las acciones de los agentes, lo que resulta valioso para los requisitos de cumplimiento y escenarios de resolución de problemas. Combinado con grabaciones de sesiones en Amazon Simple Storage Service (Amazon S3) y reproducción de sesiones basadas en consola, obtiene observación en tiempo real y revisión post-hoc.
como funciona
La integración tiene tres componentes.
El navegador web del usuario ejecuta una aplicación React que contiene el componente BrowserLiveView, que recibe una URL prefirmada por SigV4 y establece una conexión WebSocket persistente para recibir la transmisión de video DCV desde una sesión de navegador remota. La aplicación React maneja la renderización de video y la presentación de la interfaz de usuario mientras mantiene la conexión WebSocket para una transmisión continua.
El servidor de aplicaciones funciona como un agente de IA dentro del ciclo de vida de la sesión de Amazon Bedrock, orquestando la conexión entre los navegadores del cliente y las sesiones del navegador alojadas en la nube. Inicia sesiones utilizando la API de Amazon Bedrock AgentCore y genera URL prefirmadas por SigV4 que otorgan acceso seguro y por tiempo limitado a la transmisión de Live View. Esta capa maneja la gestión de sesiones, la autenticación y la distribución de transmisiones.
AWS Cloud aloja Amazon Bedrock AgentCore Browser y los servicios de Amazon Bedrock que brindan capacidades subyacentes de transmisión y automatización del navegador. Amazon Bedrock AgentCore aloja las sesiones aisladas del navegador en la nube dentro de la nube de AWS y proporciona tanto el punto final de automatización (Playwright CDP) como el punto final de streaming Live View (DCV).
La ventaja clave de eficiencia con esta arquitectura es que la transmisión DCV Live View fluye directamente desde Amazon Bedrock AgentCore al navegador del usuario. No pasa por su servidor de aplicaciones. Su servidor genera la URL y ejecuta el agente, pero la transmisión de video es una conexión WebSocket directa desde AWS al cliente. Esto ayuda a minimizar la latencia y reducir los requisitos de infraestructura.
Figura 1: Arquitectura de la solución que muestra el flujo de datos entre tres componentes. Las flechas numeradas en el diagrama representan los siguientes flujos de datos:
Flecha 1 (gris, sólida): el cliente envía mensajes y sondea el estado desde el servidor de aplicaciones mediante REST.
Flecha 2 (naranja, sólida): el servidor de aplicaciones llama a la API de Amazon Bedrock Converse para el razonamiento del modelo de IA.
Flecha 3 (azul, sólida): el servidor de aplicaciones ejecuta herramientas del navegador en el navegador Amazon Bedrock AgentCore mediante el protocolo Playwright Chrome DevTools (CDP).
Flecha 4 (roja, discontinua): la transmisión de DCV Live View fluye directamente desde Amazon Bedrock AgentCore al navegador del usuario, sin pasar por el servidor de aplicaciones.
Requisitos previos
Antes de comenzar, verifique que tenga lo siguiente:
Importante: Live View (Pasos 1 y 2) solo requiere permisos de Amazon Bedrock AgentCore. No depende de Amazon Bedrock ni de ningún modelo de IA específico. El agente de IA del paso 3 utiliza la API Converse de Amazon Bedrock, que requiere permisos adicionales de Amazon Bedrock, pero esto es específico de nuestro ejemplo. Puede sustituirlo por un proveedor modelo o un marco de agente de su elección. Utilice credenciales temporales de AWS IAM Identity Center o AWS Security Token Service (AWS STS). No utilice claves de acceso de larga duración. Siga el principio de privilegio mínimo al configurar los permisos de AWS Identity and Access Management (IAM).
Instale el SDK de TypeScript de Amazon Bedrock AgentCore:
Para el agente de IA del paso 3, también necesita el SDK de AWS para JavaScript:
El código de esta publicación se ejecuta en dos entornos: el código del lado del servidor (Pasos 1 y 3) se ejecuta en Node.js y el código del lado del cliente (Paso 2) se ejecuta en una aplicación React incluida con Vite. La aplicación de muestra al final de esta publicación incluye todo junto.
Implementación paso a paso
1: Inicie una sesión de navegador y genere la URL de visualización en vivo
En su servidor de aplicaciones, utilice la clase Navegador para iniciar una sesión y generar la URL prefirmada. La API devuelve un identificador de sesión y una URL de transmisión, que el servidor convierte en una URL prefirmada con un tiempo de caducidad definido de 300 segundos de forma predeterminada. Contiene credenciales SigV4 en los parámetros de consulta, por lo que ningún secreto llega al navegador. Pase esta URL a su interfaz a través de un punto final API.
2: renderice el componente BrowserLiveView en su aplicación React
En su navegador, importe el componente BrowserLiveView desde Bedrock AgentCore TypeScript SDK y renderícelo con la URL prefirmada. El componente maneja la conexión WebSocket, la negociación del protocolo DCV, la decodificación de secuencias de video y la representación de cuadros. Se escala automáticamente para adaptarse a su contenedor principal conservando al mismo tiempo su relación de aspecto. El ancho remoto y la altura remota deben coincidir con la ventana gráfica que configuró en el Paso 1. Los valores no coincidentes provocan recortes o barras negras.
Después de agregar este componente, Live View comienza a transmitirse tan pronto como la URL prefirmada sea válida y la sesión del navegador esté activa. Debería ver aparecer el escritorio del navegador remoto dentro del contenedor del componente. Si el contenedor permanece vacío, verifique que la URL prefirmada no haya caducado y que la sesión del navegador aún se esté ejecutando.
3: Conecte un agente de IA para impulsar las acciones del navegador
Con la transmisión Live View, necesitas algo interesante que ver. El siguiente ejemplo utiliza la API de Amazon Bedrock Converse, pero Live View es independiente del modelo. Puede utilizar un modelo de IA o un marco de agente de su elección para controlar el navegador.
El código crea un cliente PlaywrightBrowser, que inicia una nueva sesión del navegador AgentCore y se conecta a ella mediante el protocolo Playwright Chrome DevTools. Este es el mismo tipo de sesión de navegador en la nube que el Paso 1, pero se accede a través de la interfaz de automatización de Playwright en lugar de la interfaz Live View.
El modelo decide qué herramientas del navegador llamar, incluidas navegar, hacer clic, escribir, getText, getHtml y pressKey. Su servidor ejecuta estas herramientas y envía los resultados al modelo para la siguiente iteración.
El modelo es configurable. Puede utilizar Anthropic Claude, Amazon Nova o un modelo de Amazon Bedrock que admita el uso de herramientas. Cada llamada a la herramienta que realiza el modelo es visible para el usuario a través de Live View. Ven cómo navega el navegador, se completa el cuadro de búsqueda y se carga la página de resultados.
Nota: El SDK de TypeScript también incluye una integración del SDK de AI de Vercel (BrowserTools) que incluye estas operaciones del navegador como herramientas nativas del marco.
Pruébelo usando la aplicación de muestra.
Creamos una aplicación de muestra completa en GitHub que reúne los pasos 1 a 3. La muestra incluye un panel de React con Live View integrado, un registro de actividad que muestra el razonamiento y las acciones del agente, y un servidor Fastify que ejecuta el agente de IA. El agente navega a Wikipedia, busca un tema, lee el contenido de la página y resume lo que encuentra mientras usted observa cada paso. Puedes descargarlo desde el repositorio de GitHub.
Figura 2: La aplicación de muestra a mitad de ejecución. El panel izquierdo muestra el componente BrowserLiveView que transmite una página de Wikipedia a la que ha navegado el agente. El panel derecho muestra el registro de actividad con llamadas a herramientas con marca de tiempo (navegar, obtener texto, hacer clic). En la parte inferior, el campo de entrada de solicitud y el botón Iniciar agente están visibles.
Para clonar y ejecutar la aplicación de muestra
Complete los siguientes pasos para clonar y ejecutar la aplicación de muestra.
Clona el repositorio y navega hasta la carpeta de muestra.
Instalar las dependencias. Exporte sus credenciales de AWS.
Importante: utilice credenciales temporales. No envíe credenciales al control de fuente.
Inicie la aplicación. Abra http://localhost:5173, ingrese un mensaje y elija Iniciar agente.
Configuración del paquete
El componente BrowserLiveView utiliza el SDK de cliente web de Amazon DCV, que envía archivos proporcionados dentro del paquete npm bedrock-agentcore. No es necesario descargar ni instalar DCV por separado. Su configuración de Vite necesita tres adiciones:
resolve.alias apunta los especificadores básicos dcv y dcv-ui a los archivos SDK proporcionados. resolve.dedupe verifica que React y las dependencias compartidas se resuelvan desde sus node_modules, no desde la ruta proporcionada. viteStaticCopy copia los archivos de tiempo de ejecución DCV (trabajadores, decodificadores WASM) en la salida de su compilación.
El vite.config.ts de la aplicación de muestra tiene la configuración completa lista para usar. Para obtener más detalles sobre el componente BrowserLiveView, consulte el directorio fuente de visualización en vivo en el SDK de TypeScript.
Limpiar recursos
Para evitar incurrir en cargos, detenga la sesión del navegador y cierre la aplicación cuando haya terminado:
En la interfaz de usuario de la aplicación, elija Detener sesión para finalizar la sesión del navegador Amazon Bedrock AgentCore. En su terminal, presione Ctrl+C para detener los servidores de desarrollo. Si creó funciones o políticas de IAM específicamente para esta demostración, elimínelas de la consola de IAM.
Las sesiones de Amazon Bedrock AgentCore Browser generan cargos mientras están activas. Para obtener detalles sobre los precios, consulte la página de precios de Amazon Bedrock AgentCore.
Próximos pasos
Ahora que tiene una integración de Live View funcional, aquí hay algunas cosas para explorar.
Para comenzar, clone la aplicación de muestra, complete sus credenciales de AWS y ejecute npm run dev para ver la demostración completa en acción. Para obtener instrucciones, consulte la sección Para clonar y ejecutar la aplicación de muestra en esta publicación.
La aplicación de muestra tiene como valor predeterminado Anthropic Claude, pero puede cambiar a Amazon Nova u otro modelo de Amazon Bedrock que admita el uso de herramientas configurando la variable de entorno BEDROCK_MODEL_ID. Para obtener una lista de los modelos disponibles y sus capacidades de uso de herramientas, consulte la documentación del modelo de Amazon Bedrock.
El panel de React en la aplicación de muestra es un punto de partida para su propia implementación. Puede adaptar el diseño para que coincida con su sistema de diseño, integrar Live View en una aplicación existente o agregar controles que permitan a los usuarios intervenir en medio del flujo de trabajo. Para obtener orientación sobre cómo crear aplicaciones React con AgentCore SDK, consulte la documentación del Bedrock AgentCore TypeScript SDK.
El componente BrowserLiveView admite múltiples instancias en la misma página, cada una de las cuales transmite una sesión de navegador diferente. Esta capacidad es útil para monitorear paneles. El código fuente del componente, incluida la lógica de escalado y el flujo de autenticación DCV, está disponible en el directorio fuente de visualización en vivo en el SDK de TypeScript.
Conclusión
En esta publicación, aprendió a utilizar el componente BrowserLiveView para integrar una vista en vivo de una sesión del navegador Amazon Bedrock AgentCore en su aplicación React. La implementación y arquitectura de tres pasos que transmite video directamente desde AWS a los navegadores de los clientes hace que la visualización de agentes en vivo sea accesible sin experiencia especializada en transmisión.
Para obtener una visión más profunda de las capacidades del navegador Amazon Bedrock AgentCore, consulte la documentación del navegador Amazon Bedrock AgentCore. Si tiene comentarios o preguntas, abra una incidencia en el repositorio de GitHub.
Importante: Esta aplicación de muestra está destinada al desarrollo y demostración local. Para uso en producción, agregue autenticación a sus puntos finales de API, habilite HTTPS, restrinja los orígenes de CORS, implemente limitación de velocidad y siga el pilar de seguridad del marco de buena arquitectura de AWS.
Sobre los autores
Sundar Raghavan
Sundar Raghavan es arquitecto senior de soluciones en AWS y forma parte del equipo de Agentic AI Foundation. Dio forma a la experiencia de desarrollador de Amazon Bedrock AgentCore, contribuyendo al SDK, la CLI y el kit de herramientas de inicio, y ahora se centra en las integraciones con marcos de agentes de IA. Anteriormente, Sundar trabajó como especialista en IA generativa, ayudando a los clientes a diseñar aplicaciones de IA en Amazon Bedrock. En su tiempo libre, le encanta explorar nuevos lugares, probar restaurantes locales y disfrutar del aire libre.
Radhe Shyam
Radhe Shyam es ingeniero front-end senior en el equipo de Agentic AI Foundation en AWS, donde crea las experiencias de usuario para Amazon Bedrock AgentCore, incluida la reproducción de sesiones del navegador y herramientas de visualización en vivo para flujos de trabajo agentic. Con casi siete años en Amazon abarcando dominios desde Amazon SageMaker Canvas hasta Prime Video, le apasiona crear sistemas front-end accesibles y de alto rendimiento que brinden capacidades complejas de inteligencia artificial y aprendizaje automático a una audiencia más amplia de creadores.
Saurav Das
Saurav Das es parte del equipo de gestión de productos de Amazon Bedrock AgentCore. Tiene más de 15 años de experiencia trabajando con tecnologías de nube, datos e infraestructura. Tiene un profundo interés en resolver los desafíos de los clientes centrados en la infraestructura de datos e inteligencia artificial.