AWS muestra cómo integrar la vista en directo de un agente de IA en React con Bedrock AgentCore

El 9 de abril de 2026, AWS publicó un análisis técnico que explica cómo integrar en una aplicación React la vista en directo del trabajo de un agente de IA en el navegador mediante Amazon Bedrock AgentCore. El agente deja de funcionar como una caja negra: mientras ejecuta la tarea, el usuario ve en la interfaz cada navegación, cada clic y cada dato que introduce.

Para qué sirve Live View

El foco del artículo está en la transparencia, más que en otra forma de automatizar el navegador. Si el agente recorre sitios web por su cuenta, busca datos, rellena formularios y toma decisiones intermedias, el usuario necesita entender qué está pasando exactamente en pantalla. AWS propone integrar esta capa visual directamente en el producto: un panel de React puede mostrar la sesión remota del navegador en tiempo real, sin obligar al usuario a cambiar a la consola, a un servicio de streaming aparte o a un panel de administración externo.

Los usuarios necesitan visibilidad sobre las acciones del agente para

mantener la confianza y el control.

Este enfoque resulta especialmente útil donde hace falta revisión manual o auditoría: áreas de cliente, sistemas operativos internos, servicios con datos sensibles y escenarios regulados. AWS subraya que observar las acciones del agente reduce la desconfianza: cuando una persona ve cómo el modelo abre la página correcta, introduce la consulta y obtiene el resultado, lo percibe como algo más fiable que un escueto mensaje de texto de «tarea completada». Además, las sesiones pueden grabarse en Amazon S3 para analizarlas a posteriori.

Cómo funciona el esquema

La arquitectura tiene tres partes. En el cliente se ejecuta una aplicación React con el componente `BrowserLiveView`, que recibe una URL firmada y abre una conexión WebSocket persistente para el flujo de vídeo. En el servidor, la aplicación crea la sesión de navegador a través de la API de Bedrock AgentCore, gestiona su ciclo de vida y genera una URL SigV4 temporal. La parte en la nube de AWS mantiene una sesión de navegador aislada y emite el flujo mediante Amazon DCV, de modo que el desarrollador no necesita montar una infraestructura de streaming propia.

Un matiz importante: el vídeo no pasa por el servidor de la aplicación. El backend solo inicia la sesión, firma la URL temporal y vincula al cliente con la sesión correspondiente; el flujo va directamente desde AgentCore al navegador del usuario por WebSocket. Esto reduce la latencia, rebaja los requisitos de infraestructura y ahorra al equipo un servicio multimedia dedicado o un proxy propio para el tráfico de vídeo.

En el esquema básico, AWS propone este recorrido:

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

Para ponerlo en marcha bastan tres pasos principales: crear la sesión, pasar la URL firmada al frontend y renderizar el componente con las mismas dimensiones de viewport definidas en el servidor. AWS advierte expresamente que, si `remoteWidth` y `remoteHeight` no coinciden con los parámetros de la sesión, la imagen aparecerá recortada o con bandas negras. En el ejemplo del artículo se usa una resolución de 1920 por 1080 y un TTL del enlace de 300 segundos por defecto.

Qué incluye el ejemplo

Junto con la guía, AWS ha publicado en GitHub una aplicación de demostración lista para usar. Incluye un dashboard de React con Live View integrado, un registro de acciones del agente con marcas de tiempo, un campo para introducir el prompt y un servidor Fastify que ejecuta el modelo y las herramientas de navegador. El escenario de demostración es sencillo pero ilustrativo: el agente abre Wikipedia, busca un tema, lee la página y redacta un breve resumen, mientras el usuario sigue todos los pasos desde un único panel y ve qué comandos se ejecutan por el camino.

La elección del modelo no es rígida. El ejemplo usa Amazon Bedrock Converse API, y como motor se puede elegir Anthropic Claude, Amazon Nova u otro modelo de Bedrock compatible con tool use. El frontend está construido con Vite, y aquí hay otro detalle práctico: `BrowserLiveView` depende de Amazon DCV Web Client SDK, por lo que la configuración del bundler necesita alias, deduplicación de dependencias y la copia de los archivos de runtime al build. Para la ejecución local, AWS recomienda usar solo credenciales temporales y, en producción, añadir desde el principio autenticación, HTTPS, restricciones de CORS y rate limiting.

Qué significa

AWS está llevando a los agentes de IA de navegador desde la automatización en segundo plano hacia una interfaz observable, donde a las personas les resulta más fácil confiar en el sistema e intervenir a tiempo. Para los equipos que desarrollan productos basados en agentes con React, esto baja la barrera de entrada: pueden tomar un componente ya hecho, conectar un navegador en la nube y montar rápidamente una experiencia en la que las acciones del modelo son visibles tanto para el desarrollador como para el usuario final.