Bedrock AgentCore : Intégrer un agent de navigateur IA en direct dans React

• Si vous utilisez AWS Bedrock pour votre modèle IA, installez le SDK AWS pour JavaScript :

  npm install @aws-sdk/client-bedrock-runtime
  

La base de code pour l'implémentation de la Vue en direct est généralement divisée : le code côté serveur (pour la gestion de session et la logique de l'agent IA) s'exécute dans Node.js, et le code côté client (pour le rendu de la Vue en direct) s'exécute dans une application React, souvent packagée avec des outils comme Vite.

Intégration étape par étape : De la session au flux

L'intégration d'un agent de navigateur IA en direct avec Amazon Bedrock AgentCore implique un processus clair en trois étapes, faisant le pont entre votre logique côté serveur et votre application React côté client et les puissantes capacités du Cloud AWS.

1. Démarrer une session de navigateur et générer l'URL de la Vue en direct

La première étape se déroule sur votre serveur d'application. C'est là que votre logique backend initie une session de navigateur au sein d'Amazon Bedrock AgentCore et obtient en toute sécurité l'URL nécessaire pour diffuser la vue en direct.

Vous utiliserez la classe Browser du SDK bedrock-agentcore. Cette classe gère la complexité de la création et de la gestion d'environnements de navigateur isolés dans le cloud. Le résultat clé de cette étape est une URL présignée SigV4, qui accorde un accès sécurisé et temporaire au flux vidéo en direct de la session du navigateur.

// Exemple de code côté serveur (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Initialiser le client Bedrock AgentCore (s'assurer que les identifiants AWS appropriés sont configurés)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Utiliser votre région souhaitée

async function startLiveSession() {
    // Créer une nouvelle session de navigateur
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Générer l'URL de la Vue en direct
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Stocker browser.sessionId pour connecter ultérieurement votre agent IA ou terminer la session
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Cette `liveViewUrl` sera envoyée à votre client React.

Cette URL est ensuite transmise à votre frontend React, qui l'utilisera pour établir le flux en direct.

2. Rendre la Vue en direct dans votre application React

Une fois que votre application React reçoit le liveViewUrl de votre serveur, le rendu du flux en temps réel est remarquablement simple, grâce au composant BrowserLiveView.

// Exemple de code côté client (composant React)
import React, { useEffect, useState } from 'react';
import { BrowserLiveView } from 'bedrock-agentcore';

interface LiveAgentViewerProps {
    liveViewUrl: string;
}

const LiveAgentViewer: React.FC<LiveAgentViewerProps> = ({ liveViewUrl }) => {
    if (!liveViewUrl) {
        return <p>En attente de l'URL de la Vue en direct...</p>;
    }

    return (
        <div style={{ width: '100%', height: '600px', border: '1px solid #ccc' }}>
            <BrowserLiveView url={liveViewUrl} />
        </div>
    );
};

// Dans votre composant App principal ou page :
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Récupérer le liveViewUrl de votre backend
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>Vue en direct de l'agent IA</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Avec juste url={liveViewUrl}, le composant BrowserLiveView gère les détails complexes de l'établissement de la connexion WebSocket, de la consommation du flux DCV et du rendu du flux vidéo en direct dans les dimensions spécifiées. Cette intégration JSX minimale simplifie grandement le développement frontend, vous permettant de vous concentrer sur l'expérience utilisateur autour de l'agent en direct.

3. Connecter un agent IA pour piloter le navigateur

La dernière étape connecte l'intelligence de votre agent IA aux actions réelles du navigateur au sein de la session isolée. Alors que le BrowserLiveView fournit le retour visuel, votre agent IA utilise Playwright CDP (Chrome DevTools Protocol) pour interagir avec le navigateur de manière programmatique.

Votre serveur d'application, qui héberge également votre agent IA, utilisera la propriété page de l'objet Browser (qui est un objet Playwright Page) pour exécuter les actions du navigateur.

// Exemple de code côté serveur (suite de l'étape 1)
// En supposant que vous ayez une interface de type Playwright ou une utilisation directe de Playwright
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (configuration précédente pour la création du navigateur) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Se reconnecter à une session existante
    await browser.connect(); // Se connecter à la session du navigateur

    const page = browser.page; // Obtenir l'objet Playwright Page

    // Exemple de logique d'agent IA (simplifié pour l'illustration)
    // Ici, vous intégreriez votre LLM (par exemple, Anthropic Claude via l'API Bedrock Converse)
    // pour déterminer les actions en fonction des invites de l'utilisateur et du contenu de la page.
    console.log("L'agent navigue vers example.com...");
    await page.goto('https://www.example.com');
    console.log("L'agent a attendu 3 secondes...");
    await page.waitForTimeout(3000); // Simuler le temps de traitement

    console.log("L'agent tape dans un champ de recherche (hypothétique)...");
    // Exemple : await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Exemple : await page.click('#search-button');

    const content = await page.content();
    // Utiliser un LLM pour analyser le 'content' et décider des étapes suivantes
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // ou votre modèle préféré
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analysez le contenu de cette page web et suggérez l'action suivante : ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("Action suggérée par le modèle IA :", parsedBody.content[0].text);

    // Basé sur la suggestion du LLM, exécuter d'autres actions sur la page...

    // N'oubliez pas de fermer la session du navigateur une fois terminé
    // await browser.close();
}

// Après avoir démarré la session et obtenu l'URL, vous appelleriez ensuite driveAgent(sessionId)

Cette boucle d'interaction – où votre agent IA analyse le contenu de la page, détermine l'action suivante et l'exécute via Playwright CDP – constitue le cœur d'un agent de navigation autonome. Toutes ces actions sont rendues visuellement en temps réel via le composant BrowserLiveView sur l'écran de l'utilisateur.

Débloquer de nouvelles possibilités avec les agents IA intégrés

L'intégration de BrowserLiveView d'Amazon Bedrock AgentCore est plus qu'une simple fonctionnalité technique ; c'est un changement de paradigme dans la façon dont les utilisateurs interagissent avec les agents IA et leur font confiance. En intégrant un retour visuel en temps réel, les développeurs peuvent créer des applications alimentées par l'IA qui sont non seulement efficaces, mais aussi transparentes, auditables et conviviales.

Cette capacité est particulièrement transformatrice pour les applications impliquant :

• Flux de travail complexes : Automatisation des processus en ligne multi-étapes comme la saisie de données, l'intégration ou la conformité réglementaire, où la visibilité de chaque étape est primordiale.
• Support client : Permettre aux agents d'observer les copilotes IA résoudre les requêtes des clients ou naviguer dans les systèmes, garantissant la précision et offrant des opportunités d'intervention.
• Formation et débogage : Fournir aux développeurs et aux utilisateurs finaux un outil puissant pour comprendre le comportement des agents, déboguer les problèmes et former les agents par observation directe.
• Traces d'audit améliorées : Génération d'enregistrements visuels des actions de l'agent, qui peuvent être combinés avec des enregistrements de session vers Amazon S3 pour un examen post-hoc et une conformité complets.

La capacité de diffuser directement les sessions de navigateur du Cloud AWS vers les navigateurs clients, en contournant le serveur d'application pour le flux vidéo, offre des avantages significatifs en termes de performances et d'évolutivité. Cette architecture minimise la latence et réduit la charge sur votre infrastructure backend, vous permettant de déployer des solutions d'agents IA très réactives et évolutives.

En adoptant BrowserLiveView, vous ne construisez pas seulement des agents IA ; vous construisez la confiance, le contrôle et une expérience utilisateur plus riche. Explorez les possibilités et donnez à vos utilisateurs la confiance nécessaire pour déléguer des tâches web complexes à des agents intelligents.