AWS a montré comment intégrer la vue en direct d'un agent AI dans React via Bedrock AgentCore

Le 9 avril 2026, AWS a publié une décomposition technique sur la manière d'intégrer la visualisation en direct d'un agent IA basé sur navigateur dans une application React via Amazon Bedrock AgentCore. Au lieu d'un mode boîte noire, l'utilisateur voit chaque transition, clic et saisie de données dans l'interface tandis que l'agent exécute la tâche.

Pourquoi Live View est Nécessaire

L'idée principale du post n'est pas une autre automatisation de navigateur, mais la transparence. Si un agent navigue sur des sites Web de son propre chef, recherche 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 : dans un panneau React, vous pouvez afficher la session du navigateur distant en temps réel sans obliger une personne à basculer vers la console, un service de streaming distinct ou un panneau d'administration externe.

Les utilisateurs ont besoin de visibilité sur les actions de l'agent

pour maintenir la confiance et le contrôle.

Cette approche est particulièrement utile lorsque la vérification manuelle ou l'audit est requis : dans les portails clients, les systèmes d'exploitation internes, les services avec données sensibles et les scénarios réglementés. AWS souligne spécifiquement que l'observation des actions de l'agent réduit la méfiance : lorsqu'une personne voit comment le modèle ouvre la bonne page, saisit une requête et obtient des résultats, cela est perçu comme plus fiable qu'un message texte sec « tâche complétée ». De plus, les sessions peuvent être enregistrées dans Amazon S3 et analysées ultérieurement.

Comment Fonctionne l'Architecture

L'architecture se compose de trois parties. Côté client, une application React s'exécute avec un composant `BrowserLiveView` qui reçoit une URL signée et établit une connexion WebSocket persistante pour le flux vidéo. Côté serveur, l'application crée une 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 elle-même maintient une session de navigateur isolée et livre le flux via Amazon DCV, de sorte que le développeur n'a pas besoin d'assembler une infrastructure de streaming distincte.

Un point important est que la vidéo ne passe pas par le serveur d'application. Le backend démarre simplement la session, signe l'URL temporaire et connecte le client à la session requise, tandis que le flux va directement d'AgentCore au navigateur de l'utilisateur via WebSocket. Cela réduit la latence, diminue les exigences d'infrastructure et élimine le besoin d'un service multimédia distinct ou d'un proxy de trafic vidéo propriétaire.

Dans le schéma de base, AWS propose le chemin suivant :

• le serveur démarre une session de navigateur et génère une URL Live View
• le composant React `BrowserLiveView` rend le flux dans l'interface
• l'agent IA contrôle 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

Pour démarrer, trois étapes de base suffisent : créer une session, passer une URL signée au frontend et rendre le composant avec les mêmes dimensions de viewport qui ont été définies sur le serveur. AWS avertit spécifiquement : si `remoteWidth` et `remoteHeight` ne correspondent pas aux paramètres de la session, l'interface subira un recadrage d'image ou des barres noires. Par exemple, le post utilise une résolution de 1920 par 1080 et un TTL d'URL par défaut de 300 secondes.

Ce Qu'il Y a dans l'Exemple

Avec le guide, AWS a publié une application de démonstration prête sur GitHub. Elle comprend un tableau de bord React avec Live View intégré, un journal des actions de l'agent avec horodatages, un champ de saisie d'invite et un serveur Fastify qui lance le modèle et les outils du navigateur. Le scénario de démonstration est simple mais instructif : l'agent ouvre Wikipedia, recherche un sujet, lit la page, puis fait un bref résumé tandis que l'utilisateur observe toutes les étapes sur un panneau et voit quelles commandes sont exécutées en chemin.

La liaison du modèle n'est pas rigide. L'exemple utilise l'API Amazon Bedrock Converse, et vous pouvez choisir Anthropic Claude, Amazon Nova ou un autre modèle Bedrock avec support du tool use comme moteur. Pour le frontend, le projet est construit avec Vite, et il y a un autre point pratique ici : `BrowserLiveView` s'appuie sur le SDK Amazon DCV Web Client, de sorte que la configuration de la build a besoin d'alias, de dédupplication des dépendances et de copie des fichiers d'exécution dans la build.

Pour le déploiement local, AWS recommande d'utiliser uniquement des identifiants temporaires, et pour la production, ajouter immédiatement l'authentification, HTTPS, les restrictions CORS et la limitation de débit.

Ce Que Cela Signifie

AWS déplace les agents IA de navigateur du mode d'automatisation en arrière-plan vers une interface observable où les humains trouvent plus facile de faire confiance au système et d'intervenir à temps. Pour les équipes construisant des produits d'agents sur React, cela abaisse la barrière d'entrée : vous pouvez prendre un composant prêt, connecter un navigateur en cloud et construire rapidement une expérience où les actions du modèle sont visibles non seulement pour le développeur mais pour l'utilisateur final.