AG-UI Agent Framework との統合

AG-UI は、リアルタイム ストリーミング、状態管理、対話型 UI コンポーネントなどの高度な機能を備えた Web ベースの AI エージェント アプリケーションを構築できるプロトコルです。 Agent Framework AG-UI 統合により、エージェントと Web クライアント間のシームレスな接続が提供されます。

AG-UI とは

AG-UI は、次を提供する AI エージェント インターフェイスを構築するための標準化されたプロトコルです。

• リモート エージェント ホスティング: 複数のクライアントからアクセスできる Web サービスとして AI エージェントをデプロイする
• リアルタイム ストリーミング: Server-Sent イベント (SSE) を使用してエージェントの応答をストリーミングし、すぐにフィードバックを得る
• 標準化された通信: 信頼できるエージェントの対話のための一貫したメッセージ形式
• スレッド管理: 複数の要求にわたって会話コンテキストを維持する
• 高度な機能: 人間を介した承認、状態同期、カスタム ユーザーインターフェースのレンダリング

AG-UI を使用するタイミング

次の必要がある場合は、AG-UI の使用を検討してください。

• AI エージェントと対話する Web またはモバイル アプリケーションを構築する
• 複数の同時実行ユーザーがアクセスできるサービスとしてエージェントをデプロイする
• エージェントの応答をリアルタイムでストリーミングして、ユーザーからのフィードバックを即座に提供する
• ユーザーが実行前にアクションを確認する承認ワークフローを実装する
• 対話型エクスペリエンスのためにクライアントとサーバーの間で状態を同期する
• エージェント ツールの呼び出しに基づいてカスタム UI コンポーネントをレンダリングする

サポートされている機能

Agent Framework AG-UI 統合では、次の 7 つの AG-UI プロトコル機能がすべてサポートされています。

1. エージェント チャット: ツールの自動呼び出しを使用した基本的なストリーミング チャット
2. バックエンド ツールのレンダリング: 結果がクライアントにストリーミングされた状態でバックエンドで実行されるツール
3. ヒューマンインザループ: ユーザー確認のための機能承認リクエスト
4. エージェンティック生成 UI: 長時間実行する操作に向けた進捗を通知する非同期ツール
5. ツール ベースの生成 UI: ツール呼び出しに基づいてレンダリングされるカスタム UI コンポーネント
6. 共有状態: クライアントとサーバー間の双方向状態同期
7. 予測状態の更新: オプティミスティック状態の更新としてツールの引数をストリーム配信する

CopilotKit を使用してエージェント UI をビルドする

CopilotKit には、標準の AG-UI プロトコルに基づいてエージェント ユーザー インターフェイスを構築するための豊富な UI コンポーネントが用意されています。 CopilotKit は、ストリーミング チャット インターフェイス、フロントエンドとバックエンド ツールの呼び出し、人間とループ内の対話、生成 UI、共有状態などをサポートしています。 AG-UI Dojo サンプル アプリケーションで CopilotKit がサポートするさまざまなエージェント UI シナリオの例を確認できます。

CopilotKit は、ホイールを再発明することなく洗練されたユーザー エクスペリエンスを提供しながら、エージェントの機能に集中するのに役立ちます。 Microsoft Agent Framework と CopilotKit の概要の詳細については、 CopilotKit の Microsoft Agent Framework 統合に 関するドキュメントを参照してください。

AG-UI と直接エージェントの使用状況

Agent Framework の Run メソッドと RunStreamingAsync メソッドを使用してアプリケーションでエージェントを直接実行できますが、AG-UI には追加の機能が用意されています。

特徴	エージェントの直接使用	AG-UI 統合
デプロイメント	アプリケーションに埋め込む	HTTP 経由のリモート サービス
クライアント アクセス	単一アプリケーション	複数のクライアント (Web、モバイル)
ストリーミング	処理中非同期イテレーション	Server-Sent イベント (SSE)
状態管理	アプリケーションで管理される	プロトコル レベルの状態スナップショット
スレッド コンテキスト	アプリケーションで管理される	プロトコルで管理されるスレッド ID
承認ワークフロー	カスタム実装	組み込みのミドルウェア パターン

アーキテクチャの概要

AG-UI 統合では、ASP.NET Core を使用し、クリーンなミドルウェア ベースのアーキテクチャに従います。

┌─────────────────┐
│  Web Client     │
│  (Browser/App)  │
└────────┬────────┘
         │ HTTP POST + SSE
         ▼
┌─────────────────────────┐
│  ASP.NET Core           │
│  MapAGUI("/", agent)    │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  AIAgent                │
│  (with Middleware)      │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  IChatClient            │
│  (Azure OpenAI, etc.)   │
└─────────────────────────┘

主要コンポーネント

• ASP.NET コア エンドポイント: MapAGUI 拡張メソッドが HTTP 要求と SSE ストリーミングを処理する
• AIAgent: IChatClient またはカスタム実装から作成された Agent Framework エージェント
• ミドルウェア パイプライン: 承認、状態管理、カスタム ロジック用の省略可能なミドルウェア
• プロトコル アダプター: Agent Framework の種類とプロトコル イベント AG-UI 変換します
• チャット クライアント: Microsoft.Extensions.AI チャット クライアント (Azure OpenAI、OpenAI、Ollama など)

エージェント フレームワークを AG-UI に変換する方法

Agent Framework の概念を AG-UI にマップして、効果的な統合を構築する方法を理解します。

エージェント フレームワークの概念	AG-UI 同等	Description
AIAgent	エージェント エンドポイント	各エージェントが HTTP エンドポイントになる
agent.Run()	HTTP POST 要求	クライアントが HTTP 経由でメッセージを送信する
agent.RunStreamingAsync()	サーバー側イベント	SSE を使用した応答のストリーミング
AgentRunResponseUpdate	AG-UI イベント	プロトコル イベントに自動的に変換される
AIFunctionFactory.Create()	バックエンド ツール	サーバー上で実行され、結果がストリーミングされる
ApprovalRequiredAIFunction	人間関与システム	ミドルウェアが承認プロトコルに変換される
AgentThread	スレッド管理	ConversationId はコンテキストを保持します
ChatResponseFormat.ForJsonSchema<T>()	状態スナップショット	構造化された出力が状態イベントになる

Installation

AG-UI 統合は、ASP.NET Core ホスティング パッケージに含まれています。

dotnet add package Microsoft.Agents.AI.Hosting.AGUI.AspNetCore

このパッケージには、 Microsoft.Extensions.AIを含む AG-UI 統合に必要なすべての依存関係が含まれています。

次のステップ

AG-UI 統合を開始するには:

1. 作業の開始: 最初の AG-UI サーバーとクライアントを構築する
2. バックエンド ツールのレンダリング: エージェントに関数ツールを追加する

その他のリソース

• Agent Framework のドキュメント
• AG-UI プロトコルのドキュメント
• Microsoft.Extensions.AI ドキュメント
• Agent Framework GitHub リポジトリ

AG-UI と直接エージェントの使用状況

Agent Framework の run メソッドと run_streaming メソッドを使用してアプリケーションでエージェントを直接実行できますが、AG-UI には追加の機能が用意されています。

特徴	エージェントの直接使用	AG-UI 統合
デプロイメント	アプリケーションに埋め込む	HTTP 経由のリモート サービス
クライアント アクセス	単一アプリケーション	複数のクライアント (Web、モバイル)
ストリーミング	プロセス内非同期イテレーション	Server-Sent イベント (SSE)
状態管理	アプリケーションで管理される	双方向プロトコル レベルの同期
スレッド コンテキスト	アプリケーションで管理される	プロトコルで管理されるスレッド ID
承認ワークフロー	カスタム実装	組み込みのプロトコルのサポート

アーキテクチャの概要

AG-UI 統合では、クリーンでモジュール式のアーキテクチャが使用されます。

┌─────────────────┐
│  Web Client     │
│  (Browser/App)  │
└────────┬────────┘
         │ HTTP POST + SSE
         ▼
┌─────────────────────────┐
│  FastAPI Endpoint       │
│  (add_agent_framework_  │
│   fastapi_endpoint)     │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  AgentFrameworkAgent    │
│  (Protocol Wrapper)     │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  Orchestrators          │
│  (Execution Flow Logic) │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  ChatAgent              │
│  (Agent Framework)      │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  Chat Client            │
│  (Azure OpenAI, etc.)   │
└─────────────────────────┘

主要コンポーネント

• FastAPI エンドポイント: SSE ストリーミングと要求ルーティングを処理する HTTP エンドポイント
• AgentFrameworkAgent: Agent Framework エージェントを AG-UI プロトコルに適合させる軽量ラッパー
• オーケストレーター: さまざまな実行フローを処理する (標準、人間が介在する、状態管理)
• イベント ブリッジ: Agent Framework イベントをプロトコル イベント AG-UI に変換します
• メッセージ アダプター: AG-UI と Agent Framework のメッセージ形式間の双方向変換
• 確認戦略: ドメイン固有の確認メッセージの拡張戦略

エージェント フレームワークを AG-UI に変換する方法

Agent Framework の概念を AG-UI にマップして、効果的な統合を構築する方法を理解します。

エージェント フレームワークの概念	AG-UI 同等	Description
ChatAgent	エージェント エンドポイント	各エージェントが HTTP エンドポイントになる
agent.run()	HTTP POST 要求	クライアントが HTTP 経由でメッセージを送信する
agent.run_streaming()	サーバー側イベント	SSE を使用した応答のストリーミング
エージェントの応答の更新	AG-UI イベント	TEXT_MESSAGE_CONTENT、TOOL_CALL_START などです。
関数ツール (@ai_function)	バックエンド ツール	サーバー上で実行され、結果がクライアントにストリーミングされる
ツール承認モード	人間関与システム	プロトコルによる承認要求/応答
会話履歴	スレッド管理	threadId 要求間でコンテキストを維持する

Installation

AG-UI 統合パッケージをインストールします。

pip install agent-framework-ag-ui --pre

これにより、コア エージェント フレームワークと AG-UI 統合コンポーネントの両方がインストールされます。

次のステップ

AG-UI 統合を開始するには:

1. 作業の開始: 最初の AG-UI サーバーとクライアントを構築する
2. バックエンド ツールのレンダリング: エージェントに関数ツールを追加する

その他のリソース

• Agent Framework のドキュメント
• AG-UI プロトコルのドキュメント
• AG-UI Dojo アプリ - Agent Framework の統合を示すアプリケーションの例
• Agent Framework GitHub リポジトリ