Bedrock AgentCore: ReactアプリにライブAIブラウザエージェントを埋め込む

「ブラックボックス」として機能するAIエージェントの時代は急速に終焉を迎えようとしています。人工知能が、特にウェブ環境において、ますます複雑で自律的なタスクを担うようになるにつれて、透明性、信頼性、およびユーザー制御に対する要求はかつてないほど高まっています。ユーザーは、AIエージェントが彼らの代わりに実行する行動、特にウェブサイトのナビゲーション、機密データとの対話、または重要なワークフローの実行に関わる行動を理解し、検証する必要があります。

この根本的な課題に対処するため、Amazon Web Servicesは強力なソリューション、すなわちAmazon Bedrock AgentCoreのBrowserLiveViewコンポーネントを導入します。この革新的なツールは、開発者がAIエージェントのブラウジングセッションのライブでリアルタイムなビデオフィードを、彼らのReactアプリケーション内に直接埋め込むことを可能にします。この統合は、エージェントの動作を明確にするだけでなく、ユーザーに前例のない可視性と重要な制御感を提供します。

Bedrock AgentCore TypeScript SDKの一部であるBrowserLiveViewコンポーネントは、わずか数行のJavaScript XML (JSX) コードでライブブラウザストリームをアプリケーションに統合することを簡素化します。高性能なAmazon DCVプロトコルを利用してエージェントのセッションをレンダリングし、伝統的に隠されていたプロセスを視覚的に検証可能な体験へと効果的に変革します。この記事では、セッションの開始、ライブビューURLの生成、Reactアプリケーションでのストリームのレンダリング、そして最後に、ユーザーが見守る中でブラウザを駆動するためのAIエージェントの配線について、段階的に説明します。

BrowserLiveViewによるAIエージェントの透明性の向上

今日の急速に進化するエージェントAIの状況において、ウェブブラウジングタスクをAIエージェントに委任する能力は、計り知れない効率向上を約束します。しかし、この約束は、エージェントの信頼性、正確性、セキュリティに関する懸念によってしばしば抑制されます。エージェントの操作に対する明確な窓がなければ、ユーザーは観察できないシステムを信頼するしかなく、これは採用を妨げ、機密性の高いシナリオでの展開を制限する可能性があります。

BrowserLiveViewコンポーネントは、AIエージェントの「目」をユーザーに開くことで、この課題に直接対峙します。複雑なオンラインフォームの入力や、複数のウェブサイトから特定の情報を取得するタスクを任されたAIエージェントを想像してみてください。従来、ユーザーは最終的な出力または行動の要約を受け取るだけで、中間段階について疑問に思うしかありませんでした。埋め込み型ライブビューを使用すると、エージェントが実行するすべてのナビゲーション、フォーム送信、検索クエリをリアルタイムで追跡できます。

この即時的な視覚的確認は非常に貴重です。エージェントが正しいページにいて、適切な要素と対話し、意図したとおりにワークフローを進めていることをユーザーに安心させます。このリアルタイムのフィードバックループは、単なるテキストによる確認以上のものです。エージェントの行動の具体的で検証可能な監査証跡を提供し、より大きな信頼と信用を育みます。規制されているワークフローや機密性の高い顧客データを含むワークフローでは、この視覚的証拠はコンプライアンスとアカウンタビリティにとって非常に重要となる可能性があります。さらに、人間の監督が必要なシナリオでは、監督者はアプリケーション内でエージェントの行動を直接観察し、必要に応じて介入することができます。

リアルタイムエージェント監視の背後にあるアーキテクチャ

Amazon Bedrock AgentCoreを搭載したReactアプリケーション内にライブAIブラウザエージェントをシームレスに統合することは、3つの主要コンポーネントからなる洗練された効率的なアーキテクチャによって実現されます。これらの各部分間の相互作用を理解することは、実装と展開の成功にとって非常に重要です。

インタラクションは、ユーザーのウェブブラウザから始まり、そこでReactアプリケーションが実行されます。このアプリケーション内で、BrowserLiveViewコンポーネントは、安全な期間限定のSigV4署名付きURLを待機しながらレンダリングされます。このURLは、アプリケーションサーバーによって生成され、AWSクラウド内のBedrock AgentCoreサービスへの永続的なWebSocket接続を確立するための鍵となります。

アプリケーションサーバーは二重の目的を果たします。AIエージェントのロジックをホストし、セッション管理の中継役を務めます。Amazon Bedrock AgentCore APIを呼び出してブラウザセッションを開始し、その後、クライアントブラウザにライブビューへのアクセスを許可するSigV4署名付きURLを安全に生成します。重要なのは、サーバーがエージェントのアクションをオーケストレーションし、必要な認証情報を生成する一方で、ビデオストリーム自体を直接処理しないことです。

ブラウザの自動化とビデオストリーミングの重い処理はAWSクラウド内で行われます。Amazon Bedrock AgentCoreは隔離されたクラウドブラウザセッションをホストし、AIエージェントがPlaywright Chrome DevTools Protocol (CDP) を使用して対話する自動化エンドポイントと、Amazon DCVを搭載したライブビューのストリーミングエンドポイントの両方を提供します。この設計により、DCVライブビューのストリームはAmazon Bedrock AgentCoreからユーザーのブラウザに直接流れます。この直接WebSocket接続はアプリケーションサーバーをバイパスし、レイテンシを最小限に抑え、インフラストラクチャのオーバーヘッドを削減し、スムーズでリアルタイムな視聴体験を保証します。

ライブAIエージェントをデプロイするための前提条件

ライブAIブラウザエージェントの実装に入る前に、開発環境が正しく設定されており、必要なAWSリソースとパーミッションがあることを確認することが重要です。これらの前提条件に従うことで、開発プロセスが合理化され、安全な運用体制を維持するのに役立ちます。

1. Node.js環境: アプリケーションのサーバーサイドコンポーネントを実行するには、システムにNode.jsバージョン20以降がインストールされている必要があります。
2. AWSアカウントとリージョン: Amazon Bedrock AgentCoreが利用可能な、サポートされているAWSリージョンへのアクセス権を持つアクティブなAWSアカウントが必要です。
3. AWS認証情報とパーミッション: AWS認証情報には、適切なAmazon Bedrock AgentCore Browserパーミッションが必要です。AWS Identity and Access Management (IAM)パーミッションを設定する際には、最小権限の原則に従うことが不可欠です。セキュリティを強化するために、常にAWS IAM Identity CenterまたはAWS Security Token Service (AWS STS)から取得した一時的な認証情報を使用し、長期間有効なアクセスキーは避けてください。
4. AIモデルへのアクセス: エージェントを駆動するためにAIモデルを使用する場合（サンプルではAnthropic Claudeを用いたAmazon Bedrock Converse APIを使用しているように）、その特定のモデルと関連するAWS Bedrockパーミッションへのアクセスが必要です。ただし、ライブビュー自体はモデルに依存しないため、任意のモデルプロバイダーまたはエージェントフレームワークを統合できることを忘れないでください。
5. SDKのインストール:
   • AgentCoreと対話するためのbedrock-agentcore TypeScript SDKをインストールします。

     npm install bedrock-agentcore
     

   • AIモデルにAWS Bedrockを使用している場合は、AWS SDK for JavaScriptをインストールします。

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

ライブビューを実装するためのコードベースは通常分割されます。サーバーサイドコード（セッション管理とAIエージェントロジック用）はNode.jsで実行され、クライアントサイドコード（ライブビューのレンダリング用）はReactアプリケーション内で実行され、Viteのようなツールでバンドルされることがよくあります。

ステップバイステップ統合：セッションからストリームへ

Amazon Bedrock AgentCoreとライブAIブラウザエージェントを統合するには、サーバーサイドロジックをクライアントサイドのReactアプリケーションとAWSクラウドの堅牢な機能に橋渡しする、明確な3つのステッププロセスが必要です。

1. ブラウザセッションの開始とライブビューURLの生成

最初のステップはアプリケーションサーバーで行われます。ここで、バックエンドロジックがAmazon Bedrock AgentCore内でブラウザセッションを開始し、ライブビューをストリーミングするために必要なURLを安全に取得します。

bedrock-agentcore SDKのBrowserクラスを使用します。このクラスは、クラウドで隔離されたブラウザ環境を作成および管理する複雑さを処理します。このステップからの主要な出力は、ブラウザセッションのライブビデオストリームへの安全で一時的なアクセスを許可するSigV4署名付きURLです。

// 例：サーバーサイドコード (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Bedrock AgentCoreクライアントを初期化します (適切なAWS認証情報が設定されていることを確認してください)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // ご希望のリージョンを使用してください

async function startLiveSession() {
    // 新しいブラウザセッションを作成します
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // ライブビューURLを生成します
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // AIエージェントを接続したり、セッションを終了したりするために browser.sessionId を保存します
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// この `liveViewUrl` はReactクライアントに送信されます。

このURLはReactフロントエンドに渡され、ライブストリームを確立するために使用されます。

2. Reactアプリケーションでのライブビューのレンダリング

ReactアプリケーションがサーバーからliveViewUrlを受信すると、BrowserLiveViewコンポーネントのおかげで、リアルタイムストリームのレンダリングは非常に簡単です。

// 例：クライアントサイドコード (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>Waiting for Live View URL...</p>;
    }

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

// メインのAppコンポーネントまたはページで:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // バックエンドからliveViewUrlを取得します
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>AI Agent Live View</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

url={liveViewUrl}だけで、BrowserLiveViewコンポーネントはWebSocket接続の確立、DCVストリームの消費、指定された寸法内でのライブビデオフィードのレンダリングという複雑な詳細を処理します。この最小限のJSX統合により、フロントエンドの開発が大幅に簡素化され、ライブエージェント周辺のユーザーエクスペリエンスに集中できるようになります。

3. ブラウザを駆動するためのAIエージェントの配線

最後のステップは、AIエージェントの知能を、隔離されたセッション内の実際のブラウザアクションに接続することです。BrowserLiveViewが視覚的なフィードバックを提供する一方で、AIエージェントはPlaywright CDP (Chrome DevTools Protocol) を使用して、プログラムでブラウザと対話します。

アプリケーションサーバーは、AIエージェントをホストする場所でもあり、Browserオブジェクトのpageプロパティ（これはPlaywrightのPageオブジェクトです）を使用してブラウザアクションを実行します。

// 例：サーバーサイドコード (ステップ1からの続き)
// Playwrightライクなインターフェースまたは直接Playwrightを使用していると仮定
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (ブラウザ作成の以前の設定) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // 既存のセッションに再接続
    await browser.connect(); // ブラウザセッションに接続

    const page = browser.page; // PlaywrightのPageオブジェクトを取得

    // 例：AIエージェントロジック (説明のために簡略化)
    // ここで、ユーザープロンプトとページコンテンツに基づいてアクションを決定するために、
    // LLM (例：Bedrock Converse APIを介したAnthropic Claude) と統合します。
    console.log("Agent navigating to example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent waited for 3 seconds...");
    await page.waitForTimeout(3000); // 処理時間をシミュレート

    console.log("Agent typing into a search box (hypothetical)...");
    // 例：await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // 例：await page.click('#search-button');

    const content = await page.content();
    // LLMを使用して「content」を分析し、次のステップを決定します
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // またはご希望のモデル
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analyze this webpage content and suggest the next action: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("AI Model suggested action:", parsedBody.content[0].text);

    // LLMの提案に基づいて、さらにページアクションを実行...

    // 完了したらブラウザセッションを閉じることを忘れないでください
    // await browser.close();
}

// セッションを開始してURLを取得した後、driveAgent(sessionId)を呼び出します

AIエージェントがページコンテンツを分析し、次のアクションを決定し、Playwright CDPを介してそれを実行するというこの対話ループは、自律型ブラウジングエージェントの核を形成します。これらのすべてのアクションは、ユーザーの画面上のBrowserLiveViewコンポーネントを通じてリアルタイムで視覚的にレンダリングされます。

組み込み型AIエージェントで新たな可能性を解き放つ

Amazon Bedrock AgentCoreのBrowserLiveViewの統合は、単なる技術的な機能以上のものです。それは、ユーザーがAIエージェントとどのように対話し、信頼するかのパラダイムシフトです。リアルタイムの視覚的フィードバックを埋め込むことで、開発者は効率的であるだけでなく、透明性、監査可能性、そしてユーザーフレンドリーなAI搭載アプリケーションを作成できます。

この機能は、特に以下のアプリケーションに変革をもたらします。

• 複雑なワークフロー: データ入力、オンボーディング、規制遵守など、多段階のオンラインプロセスを自動化し、各ステップの可視性が最も重要となる場合。
• 顧客サポート: エージェントがAIコパイロットが顧客の問い合わせを解決したり、システムをナビゲートしたりするのを観察し、正確性を確保し、介入の機会を提供する。
• トレーニングとデバッグ: 開発者とエンドユーザーに、エージェントの動作を理解し、問題をデバッグし、直接観察を通じてエージェントをトレーニングするための強力なツールを提供する。
• 強化された監査証跡: エージェントの行動の視覚的記録を生成し、包括的な事後レビューとコンプライアンスのために、セッション記録をAmazon S3に結合できる。

AWSクラウドからクライアントブラウザへ、ビデオストリームのためにアプリケーションサーバーをバイパスして、ブラウザセッションを直接ストリーミングする能力は、パフォーマンスとスケーラビリティの面で大きな利点をもたらします。このアーキテクチャは、レイテンシを最小限に抑え、バックエンドインフラストラクチャの負担を軽減し、非常に応答性が高くスケーラブルなAIエージェントソリューションを展開することを可能にします。

BrowserLiveViewを採用することで、AIエージェントを構築するだけでなく、信頼、制御、そしてより豊かなユーザーエクスペリエンスを構築していることになります。可能性を探求し、インテリジェントなエージェントに複雑なウェブタスクを委任する自信をユーザーに与えましょう。