AWS montre comment intégrer la vue en direct d'un agent IA dans React avec Bedrock AgentCore
AWS a publié un guide pratique pour intégrer dans React la vue en direct d'un agent IA de navigation via Bedrock AgentCore. Le composant BrowserLiveView affiche en temps réel toutes les actions de l'agent dans l'interface, et le flux vidéo transite directement d'AWS vers le navigateur de l'utilisateur. L'exemple fournit une stack prête à l'emploi en React, Fastify et Vite, ainsi que la connexion au modèle via l'API Bedrock Converse.
Traité par IA depuis AWS Machine Learning Blog ; édité par Hamidun News
Le 9 avril 2026, AWS a publié une analyse technique expliquant comment intégrer dans une application React la vue en direct du travail d'un agent IA de navigation, via Amazon Bedrock AgentCore. Fini la boîte noire : pendant que l'agent exécute sa tâche, l'utilisateur voit dans l'interface chaque changement de page, chaque clic et chaque saisie.
À quoi sert Live View
Le propos du billet ne porte pas sur une énième automatisation du navigateur, mais sur la transparence. Si l'agent parcourt lui-même des sites, cherche des données, remplit des formulaires et prend des décisions intermédiaires, l'utilisateur doit comprendre ce qui se passe exactement à l'écran. AWS propose d'intégrer cette couche visuelle directement dans le produit : un panneau React peut afficher la session de navigateur distante en temps réel, sans obliger l'utilisateur à basculer vers une console, un service de streaming séparé ou une interface d'administration externe.
Les utilisateurs ont besoin de voir les actions de l'agent pour garder
confiance et contrôle.
Cette approche s'avère particulièrement utile lorsqu'une vérification manuelle ou un audit s'impose : espaces clients, systèmes opérationnels internes, services manipulant des données sensibles et scénarios réglementés. AWS insiste sur le fait que l'observation des actions de l'agent réduit la méfiance : voir le modèle ouvrir la bonne page, saisir la requête et obtenir le résultat inspire davantage confiance qu'un sec message textuel « tâche terminée ». Les sessions peuvent en outre être enregistrées dans Amazon S3 pour être analysées a posteriori.
Comment fonctionne l'architecture
L'architecture se compose de trois parties. Côté client, une application React embarque le composant `BrowserLiveView`, qui reçoit une URL signée et ouvre une connexion WebSocket persistante pour le flux vidéo. Côté serveur, l'application crée la session de navigateur via l'API Bedrock AgentCore, gère son cycle de vie et génère une URL SigV4 temporaire. La partie cloud d'AWS héberge quant à elle une session de navigateur isolée et diffuse le flux via Amazon DCV : le développeur n'a donc pas à monter sa propre infrastructure de streaming.
Point important : la vidéo ne transite pas par le serveur applicatif. Le backend se contente de lancer la session, de signer l'URL temporaire et de relier le client à la bonne session ; le flux lui-même part directement d'AgentCore vers le navigateur de l'utilisateur par WebSocket. Résultat : moins de latence, des besoins d'infrastructure réduits, et pas besoin de service média dédié ni de proxy maison pour le trafic vidéo.
Dans le schéma de base, AWS propose le parcours suivant :
- le serveur démarre la session de navigateur et génère l'URL Live View
- le composant React `BrowserLiveView` affiche le flux dans l'interface
- l'agent IA pilote le navigateur via `PlaywrightBrowser`
- le modèle appelle des outils comme `navigate`, `click`, `type` et `getText`
- l'utilisateur voit chaque action en temps réel
Trois étapes principales suffisent pour le lancement : créer la session, transmettre l'URL signée au frontend et afficher le composant avec les mêmes dimensions de viewport que celles définies côté serveur. AWS prévient explicitement : si `remoteWidth` et `remoteHeight` ne correspondent pas aux paramètres de la session, l'image sera rognée ou entourée de bandes noires. L'exemple du billet utilise une résolution de 1920 sur 1080 et un TTL de lien de 300 secondes par défaut.
Ce que contient l'exemple
En parallèle du guide, AWS a mis en ligne sur GitHub une application de démonstration prête à l'emploi. Elle comprend un dashboard React avec Live View intégré, un journal horodaté des actions de l'agent, un champ de saisie du prompt et un serveur Fastify qui exécute le modèle et les outils de navigation. Le scénario de démonstration est simple mais parlant : l'agent ouvre Wikipedia, recherche un sujet, lit la page puis en rédige un bref résumé, tandis que l'utilisateur suit toutes les étapes sur un seul panneau et voit quelles commandes s'exécutent en chemin.
Le choix du modèle n'est pas figé. L'exemple s'appuie sur l'API Amazon Bedrock Converse, et le moteur peut être Anthropic Claude, Amazon Nova ou un autre modèle Bedrock prenant en charge le tool use. Le frontend est construit avec Vite, ce qui implique un point pratique supplémentaire : `BrowserLiveView` repose sur le Amazon DCV Web Client SDK, il faut donc configurer dans le bundler des alias, la déduplication des dépendances et la copie des fichiers runtime dans le build. Pour une exécution locale, AWS recommande de n'utiliser que des identifiants temporaires ; en production, il faut ajouter d'emblée authentification, HTTPS, restrictions CORS et rate limiting.
Ce que cela signifie
AWS fait passer les agents IA de navigation d'une automatisation en arrière-plan à une interface observable, où l'humain peut plus facilement faire confiance au système et intervenir à temps. Pour les équipes qui développent des produits agentiques en React, la barrière d'entrée baisse : il suffit de reprendre le composant prêt à l'emploi, de brancher le navigateur cloud et d'assembler rapidement une expérience où les actions du modèle sont visibles non seulement par le développeur, mais aussi par l'utilisateur final.
- 31 oct. 2026Worldwide Express confie ses factures litigieuses à des agents IA et réduit sa dette de 75%
- 30 oct. 2026AWS offre aux agents de codage un aperçu en direct du site, depuis leur session isolée
- 30 oct. 2026MoEngage ouvre 400 API privées à ses agents IA via AgentCore Gateway, sans serveurs MCP maison
- 29 oct. 2026NVIDIA Nemotron 3.5 Super VL : 120 milliards de paramètres, 12 milliards actifs, déploiement sur AWS
Questions clés sur cet article
Que sait-on sur à quoi sert Live View ?
Le propos du billet ne porte pas sur une énième automatisation du navigateur, mais sur la transparence. Si l'agent parcourt lui-même des sites, cherche des données, remplit des formulaires et prend des décisions intermédiaires, l'utilisateur doit comprendre ce qui se passe exactement à l'écran. AWS propose d'intégrer cette couche visuelle directement dans le produit : un panneau React peut afficher la session de navigateur distante en temps réel, sans obliger l'utilisateur à basculer vers une console, un service de streaming séparé ou une interface d'administration externe.
Comment fonctionne l'architecture?
L'architecture se compose de trois parties. Côté client, une application React embarque le composant `BrowserLiveView`, qui reçoit une URL signée et ouvre une connexion WebSocket persistante pour le flux vidéo. Côté serveur, l'application crée la session de navigateur via l'API Bedrock AgentCore, gère son cycle de vie et génère une URL SigV4 temporaire. La partie cloud d'AWS héberge quant à elle une session de navigateur isolée et diffuse le flux via Amazon DCV : le développeur n'a donc pas à monter sa propre infrastructure de streaming. Point important : la vidéo ne transi
Que sait-on sur Ce que contient l'exemple ?
En parallèle du guide, AWS a mis en ligne sur GitHub une application de démonstration prête à l'emploi. Elle comprend un dashboard React avec Live View intégré, un journal horodaté des actions de l'agent, un champ de saisie du prompt et un serveur Fastify qui exécute le modèle et les outils de navigation. Le scénario de démonstration est simple mais parlant : l'agent ouvre Wikipedia, recherche un sujet, lit la page puis en rédige un bref résumé, tandis que l'utilisateur suit toutes les étapes sur un seul panneau et voit quelles commandes s'exécutent en chemin. Le choix du m
Test Frontier LLMs & Autonomous Agents in One Workspace
Run Claude Opus 5.5, GPT-6, Gemini 3.1, and DeepSeek side-by-side in Nomad AI (nomadnet.ai) — unified model routing, deep research, and multimodal workflows under one subscription.
L'essentiel de l'IA — une fois par semaine
Sept actus qui ont vraiment compté, choisies à la main. Sans bruit ni communiqués.
C'est fait ! Vérifiez votre boîte mail pour la confirmation.