AG-UIプロトコルを使用してAmazon Bedrock AgentCore上でAIエージェント向けの生成UIを構築する

AIエージェントはチャット以上のことができます。適切なプロトコルを使用すると、エージェントは会話中にインタラクティブなチャートをインラインでレンダリングしたり、共有キャンバスをリアルタイムで更新したり、実行中に一時停止してユーザーの承認を待ったりできます。これらのインタラクション（生成UI、共有状態、人間参加型）には、エージェントバックエンドが動的イベントをフロントエンドに伝達するための標準的な方法が必要です。

AG-UI（エージェント-ユーザーインタラクションプロトコル）は、この標準を定義するオープンプロトコルです。複数のエージェントフレームワーク（Strands Agents、LangGraph、CrewAI）およびフロントエンドライブラリ（React、Angular、Vue）で動作します。AG-UIを使用すると、エージェントコードとフロントエンドコードは疎結合のままです。バックエンドに最適なフレームワークとフロントエンドに最適なライブラリを選択し、AG-UIがそれらを接続します。

Amazon Bedrock AgentCoreは、Amazon Bedrockの生成AIサービスの一部です。AgentCoreは、あらゆるフレームワークとあらゆるモデルを使用して、AIエージェントを安全に大規模に構築、デプロイ、運用するためのエージェントプラットフォームです。

この記事では、まずAG-UIがFullstack AgentCore Solution Template（FAST）に統合され、Amazon Bedrock AgentCore上でインタラクティブなエージェントフロントエンドを構築する方法を説明します。次に、CopilotKitが生成UI、共有状態、人間参加型インタラクションによってこの機能を拡張する方法を示します。すべてAmazon Bedrock AgentCoreにデプロイされます。

ソリューションの概要

Amazon Bedrock AgentCore Runtimeは、AIエージェントやツールをデプロイして実行するための、安全でサーバーレスかつ専用に構築されたホスティング環境を提供します。AgentCore Runtimeは複数のエージェントプロトコルをサポートしています。モデルコンテキストプロトコル（MCP）はエージェントをツールに接続し、Agent2Agent（A2A）はエージェントを他のエージェントに接続し、AG-UIはエージェントをユーザーに接続します。AG-UIプロトコルフラグを指定してエージェントコンテナをデプロイすると、AgentCoreは透過的なプロキシとして機能します。認証（Signature Version 4 [SigV4] またはAmazon CognitoによるOAuth 2.0）、セッション分離、スケーリング、および可観測性を処理します。コンテナはポート8080でAG-UIリクエスト用のPOST /invocationsとヘルスチェック用のGET /pingを公開します。AgentCoreはリクエストを変更せずに通過させます。詳細については、「AgentCore RuntimeでのAGUIサーバーのデプロイ」を参照してください。

FASTは、すぐにデプロイ可能なスタータープロジェクトです。AgentCore Runtime、Gateway、Identity、Memory、およびCode InterpreterをReactフロントエンドとAmazon Cognito認証で接続し、すべてAWS Cloud Development Kit (AWS CDK)で定義されています。Strands Agents、LangGraph、およびClaude Agent SDKのエージェントパターンを同梱しています。FAST v0.4.1では、単一のフロントエンドパーサーを共有する2つのAG-UIパターン（agui-strands-agentおよびagui-langgraph-agent）が追加されました。FASTのアーキテクチャとデプロイの完全なチュートリアルについては、「Amazon Bedrock AgentCoreのフルスタックスターターテンプレートでエージェントアプリケーション開発を加速する」を参照してください。

このソリューションには2つのレイヤーがあります。FASTのAG-UIは2つの新しいエージェントパターンと、両方を処理する単一のフロントエンドパーサーを提供するため、フロントエンドは実行中のエージェントフレームワークを知る必要がありません。CopilotKit + FASTは、FASTの組み込みチャットUIをCopilotKitに置き換えるスタンドアロンサンプルです。生成UI（インラインチャートとコンポーネント）、双方向共有状態（Todoキャンバス）、および人間参加型インタラクション（エージェントを一時停止してユーザーの入力を待つ会議スケジューラ）を追加します。両方のレイヤーはAgentCore Runtimeにデプロイされ、Cognito認証、MCPツール接続用のAgentCore Gateway、および永続的な会話用のAgentCore Memoryを使用します。

アーキテクチャの概要。フロントエンドはAG-UIイベントを通じてAgentCore Runtimeと通信します。AgentCoreは認証、スケーリング、およびセッション分離を処理します。エージェントランタイムはフレームワーク固有のイベントをAG-UIプロトコルに変換します。

チュートリアル

このチュートリアルは2部構成です。最初に、AG-UIパターンがFASTでどのように機能するか、および単一のフロントエンドパーサーがStrandsとLangGraphの両方のバックエンドを処理する方法を示します。次に、CopilotKitサンプルをデプロイして、AgentCore上の生成UI、共有状態、および人間参加型を実演します。

ソースコード：

FASTリポジトリ（AG-UIパターンを含む）。

CopilotKit + FASTサンプル。

前提条件

このチュートリアルには、以下の前提条件が必要です：

AWS CloudFormation、Amazon Elastic Container Registry (Amazon ECR)、Amazon Bedrock AgentCore、Amazon Cognito、およびAWS Amplifyの権限を持つAWSアカウント。

AWS Command Line Interface (AWS CLI) v2がインストールおよび設定されていること。

AWS CDKがインストールされていること。

Node.js 18以降およびPython 3.11以降。

コンテナビルドのためにDockerが実行中であること。

エージェントが使用するモデルに対してAmazon Bedrockコンソールでモデルアクセスが有効であること。

FASTのAG-UI：1つのパーサー、2つのフレームワーク

agui-strands-agentパターンは、ag-ui-strandsライブラリのStrandsAgentでStrands Agentをラップします。ラッパーはStrandsのストリーミングイベントを自動的にAG-UI Server-Sent Eventsに変換します。

各リクエストは、Gateway MCPツールを持つ新しいエージェントを作成します。AgentCore Memoryはセッションマネージャープロバイダーを通じてスレッドごとにアタッチされるため、会話履歴はAgentCore Runtimeのスケーリング全体で保持されます。Memoryはオプトインです。MEMORY_IDが設定されていない場合、プロバイダーはNoneを返します。

BedrockAgentCoreAppはAgentCore Runtimeヘッダー（WorkloadAccessToken、Authorization、Session-Id）を読み取り、コンテキスト変数を設定するため、Gateway認証とMemoryはHTTPパターンと同じように機能します。

agui-langgraph-agentパターンは、copilotkitライブラリのLangGraphAGUIAgentを使用します。リクエストごとにコンパイル済みグラフを新たに構築するため、各呼び出しは呼び出し元にスコープされたMCPツールを取得します。ここでもAgentCore Memoryはオプトインです。MEMORY_IDが設定されていない場合、ヘルパーはNoneを返すため、Memoryをプロビジョニングせずにパターンを実行できます。

両方のパターンは同じAG-UIイベントを生成します。プロトコルはServer-Sent Eventsを介した型付きイベントストリームを定義します。例えば、単一のツール呼び出しは次のシーケンスを生成します：RUN_STARTED、TEXT_MESSAGE_START、TEXT_MESSAGE_CONTENT、TEXT_MESSAGE_END、TOOL_CALL_START、TOOL_CALL_ARGS、TOOL_CALL_END、TOOL_CALL_RESULT、RUN_FINISHED。

フロントエンドパーサーは各イベントをフロントエンドアクションにマッピングします。例えば、parseAguiChunk関数はTEXT_MESSAGE_CONTENT、TOOL_CALL_START、TOOL_CALL_RESULT、RUN_FINISHEDを処理します。

HTTPパターンと比較すると、Strands、LangGraph、Claude-agent-sdkはそれぞれ異なるストリーミング形式を処理するために個別のパーサーが必要です。AG-UIを使用すると、バックエンドフレームワークが抽象化されます。設定でagui-strands-agentとagui-langgraph-agentを交換でき、フロントエンドは変更されません。

デプロイするには、infra-cdk/config.yamlでパターンを設定し、CDKを実行します。

CopilotKit + FAST：生成UI、共有状態、人間参加型

基本的なFASTフロントエンドは機能的なチャットインターフェースを提供しますが、AG-UIはよりリッチなインタラクションをサポートします。エージェントがカスタムUIコンポーネントをレンダリングしたり、フロントエンドと状態を同期したり、実行中にユーザー入力を待つために一時停止したりできます。CopilotKitはこれらのパターンに特化して構築されたReactライブラリです。CopilotKitチームは、FAST上にサンプルアプリケーションを構築し、AgentCore上でこれらの機能を実演しました。LangGraphとStrandsのエージェントパターンが含まれており、デプロイ時に選択できます。

生成UIは、高いフロントエンド制御から高いエージェント自由度までのスペクトラムに及びます。このサンプルは制御された側にあります。フロントエンドが事前構築されたReactコンポーネントを所有し、エージェントはレンダリングするコンポーネントを選択し、AG-UIイベントを介してデータを提供します。スペクトラムのさらに先では、エージェントはフロントエンドがレンダリングする宣言型UIの説明、またはフロントエンドが埋め込む完全なUIサーフェスを返します。AG-UIは3つすべてをサポートします。UI自体ではなくイベントと状態のストリームを標準化するからです。エージェントに与える自由度が高ければ高いほど、責任も大きくなります。オープンエンドなサーフェスにはサンドボックス化と入力検証が必要です。

CopilotKitサンプルアーキテクチャ。CopilotKit Runtime Lambdaは、ブラウザとAgentCore Runtimeの間のサーバーサイドブリッジとして機能し、AG-UIイベント解析、生成UIルーティング、認証転送を処理します。

生成UI：エージェントがReactコンポーネントをレンダリング

CopilotKitを使用すると、エージェントはテキストだけでなく、カスタムReactコンポーネントをチャットにインラインでレンダリングできます。フロントエンドはコンポーネントを登録し、エージェントはAG-UIツール呼び出しイベントを介してそれらを呼び出せます。

例えば、エージェントがデータをレンダリングするために呼び出すことができる円グラフコンポーネントを登録します。エージェントがpieChartツールを呼び出すと、CopilotKitはTOOL_CALL_STARTおよびTOOL_CALL_ARGSイベントをインターセプトし、PieChartコンポーネントを会話内に直接レンダリングします。エージェントは最初にquery_dataツールを呼び出してデータを取得し、次にチャートをレンダリングします。

元の記事は途中で切れていますが、上記は利用可能な部分に基づいた要約です。完全な記事には、さらに多くの例や詳細が含まれている可能性があります。