AWS mostró cómo integrar la vista en vivo de un agente de AI en React mediante Bedrock AgentCore

El 9 de abril de 2026, AWS publicó un desglose técnico sobre cómo integrar la visualización en vivo de un agente IA basado en navegador en una aplicación React a través de Amazon Bedrock AgentCore. En lugar de un modo de caja negra, el usuario ve cada transición, clic e introducción de datos en la interfaz mientras el agente ejecuta la tarea.

Por Qué Se Necesita Live View

La idea principal del post no es otra automatización de navegador, sino transparencia. Si un agente navega por sitios web por su cuenta, busca datos, rellena formularios y toma decisiones intermedias, el usuario necesita entender qué está sucediendo exactamente en la pantalla. AWS propone integrar esta capa visual directamente en el producto: en un panel React, puedes mostrar la sesión del navegador remoto en tiempo real sin obligar a una persona a cambiar a la consola, un servicio de streaming separado o un panel administrativo externo.

Los usuarios necesitan visibilidad de las acciones del agente para

mantener confianza y control.

Este enfoque es particularmente útil cuando se requiere verificación manual o auditoría: en portales de cliente, sistemas operativos internos, servicios con datos sensibles y escenarios regulados. AWS enfatiza específicamente que observar las acciones del agente reduce la desconfianza: cuando una persona ve cómo el modelo abre la página correcta, introduce una consulta y obtiene resultados, esto se percibe como más confiable que un mensaje de texto seco "tarea completada". Además, las sesiones se pueden registrar en Amazon S3 y analizarse posteriormente.

Cómo Funciona la Arquitectura

La arquitectura consta de tres partes. En el lado del cliente, una aplicación React se ejecuta con un componente `BrowserLiveView` que recibe una URL firmada y levanta una conexión WebSocket persistente para el flujo de vídeo. En el lado del servidor, la aplicación crea una sesión de navegador a través de la API Bedrock AgentCore, administra su ciclo de vida y genera una URL SigV4 temporal. La parte en la nube de AWS en sí mantiene una sesión de navegador aislada y entrega el flujo a través de Amazon DCV, por lo que el desarrollador no necesita montar una infraestructura de streaming separada.

Un detalle importante es que el vídeo no pasa por el servidor de la aplicación. El backend solo inicia la sesión, firma la URL temporal y conecta el cliente a la sesión requerida, mientras que el flujo va directamente desde AgentCore al navegador del usuario a través de WebSocket. Esto reduce la latencia, disminuye los requisitos de infraestructura y elimina la necesidad de un servicio de medios separado o proxy de tráfico de vídeo propietario.

En el esquema básico, AWS propone el siguiente camino:

• servidor inicia una sesión de navegador y genera una URL Live View
• componente React `BrowserLiveView` renderiza el flujo en la interfaz
• agente IA controla el navegador a través de `PlaywrightBrowser`
• el modelo llama a herramientas como `navigate`, `click`, `type` y `getText`
• el usuario ve cada acción en tiempo real

Para comenzar, tres pasos básicos son suficientes: crear una sesión, pasar una URL firmada al frontend y renderizar el componente con las mismas dimensiones de viewport que se establecieron en el servidor. AWS advierte específicamente: si `remoteWidth` y `remoteHeight` no coinciden con los parámetros de la sesión, la interfaz sufrirá recorte de imagen o barras negras. Por ejemplo, el post utiliza una resolución de 1920 por 1080 y un TTL de URL predeterminado de 300 segundos.

Qué Hay en el Ejemplo

Junto con la guía, AWS lanzó una aplicación de demostración lista en GitHub. Incluye un panel React con Live View integrado, un registro de acciones del agente con marcas de tiempo, un campo de entrada de prompt y un servidor Fastify que inicia el modelo y las herramientas del navegador. El escenario de demostración es simple pero instructivo: el agente abre Wikipedia, busca un tema, lee la página y luego hace un breve resumen mientras el usuario observa todos los pasos en un panel y ve qué comandos se ejecutan en el camino.

La vinculación del modelo no es rígida. El ejemplo utiliza la API Amazon Bedrock Converse, y puedes elegir Anthropic Claude, Amazon Nova u otro modelo Bedrock con soporte de tool use como motor. Para el frontend, el proyecto se construye con Vite, y hay otro punto práctico aquí: `BrowserLiveView` depende del SDK de Amazon DCV Web Client, por lo que la configuración de compilación necesita aliases, deduplicación de dependencias y copia de archivos de tiempo de ejecución a la compilación.

Para la implementación local, AWS recomienda usar solo credenciales temporales, y para producción, agregar inmediatamente autenticación, HTTPS, restricciones CORS y rate limiting.

Lo Que Esto Significa

AWS está moviendo agentes IA de navegador del modo de automatización en segundo plano hacia una interfaz observable donde a los humanos les resulta más fácil confiar en el sistema e intervenir a tiempo. Para equipos que construyen productos de agentes en React, esto reduce la barrera de entrada: puedes tomar un componente listo, conectar un navegador en la nube y construir rápidamente una experiencia donde las acciones del modelo son visibles no solo para el desarrollador sino para el usuario final.