AG-UI Dojo を使用したテスト

AG-UI Dojo アプリケーションは、AG-UI プロトコルを実装する Microsoft Agent Framework エージェントをテストおよび調査するための対話型環境を提供します。 Dojo には、エージェントに接続し、7 つのすべての AG-UI 機能と対話するためのビジュアルインターフェイスが用意されています。

[前提条件]

開始する前に、次のことを確認します。

Python 3.10 以降
依存関係管理のためのツールuv
OpenAI API キーまたは Azure OpenAI エンドポイント
Node.js と pnpm (Dojo フロントエンドを実行する場合)

Installation

1. AG-UI リポジトリを複製する

まず、Dojo アプリケーションと Microsoft Agent Framework の統合例を含む AG-UI リポジトリを複製します。

git clone https://github.com/ag-oss/ag-ui.git
cd ag-ui

2. Examples ディレクトリに移動する

cd integrations/microsoft-agent-framework/python/examples

3. Python の依存関係をインストールする

uvを使用して、必要な依存関係をインストールします。

uv sync

4. 環境変数を構成する

指定したテンプレートから .env ファイルを作成します。

cp .env.example .env

.env ファイルを編集し、API 資格情報を追加します。

# For OpenAI
OPENAI_API_KEY=your_api_key_here
OPENAI_CHAT_MODEL_ID="gpt-4.1"

# Or for Azure OpenAI
AZURE_OPENAI_ENDPOINT=your_endpoint_here
AZURE_OPENAI_API_KEY=your_api_key_here
AZURE_OPENAI_CHAT_DEPLOYMENT_NAME=your_deployment_here

注

DefaultAzureCredentialを使用する場合は、認証用のapi_keyに代わりに、Azure で認証されていることを確認します (たとえば、az login経由)。詳細については、 Azure ID のドキュメントを参照してください。

Dojo アプリケーションの実行

1. バックエンドサーバーを起動する

examples ディレクトリで、エージェントの例を使用してバックエンドサーバーを起動します。

cd integrations/microsoft-agent-framework/python/examples
uv run dev

既定では、サーバーは http://localhost:8888 で起動します。

2. 道場フロントエンドを開始する

新しいターミナルウィンドウを開き、AG-UI リポジトリのルートに移動し、Dojo アプリケーションディレクトリに移動します。

cd apps/dojo
pnpm install
pnpm dev

Dojo フロントエンドは、 http://localhost:3000で利用できるようになります。

3. エージェントに接続する

ブラウザーで http://localhost:3000 を開く
サーバーの URL を次のように構成する http://localhost:8888
ドロップダウンから [Microsoft Agent Framework (Python)]\(Microsoft エージェントフレームワーク (Python)\) を選択します
エージェントのサンプルを探索し始める

使用可能なエージェントの例

統合の例では、さまざまなエージェントエンドポイントを通じて 7 つの AG-UI 機能すべてを示します。

エンドポイント	特徴	Description
`/agentic_chat`	機能 1: エージェントチャット	ツール呼び出しを使用した基本的な会話エージェント
`/backend_tool_rendering`	機能 2: バックエンドツールのレンダリング	カスタムツール UI レンダリングを使用したエージェント
`/human_in_the_loop`	機能 3: ループ内の人間	承認ワークフローを含むエージェント
`/agentic_generative_ui`	機能 4: エージェント生成的 UI	ストリーミング更新プログラムを使用してタスクをステップに分割するエージェント
`/tool_based_generative_ui`	機能 5: ツールベースの生成 UI	カスタム UI コンポーネントを生成するエージェント
`/shared_state`	機能 6: 共有状態	双方向状態同期を使用するエージェント
`/predictive_state_updates`	機能 7: 予測状態の更新	ツールの実行中に予測状態が更新されたエージェント

独自のエージェントのテスト

Dojo で独自のエージェントをテストするには:

1. エージェントを作成する

作業の開始ガイドに従って新しいエージェントを作成します。

from agent_framework import ChatAgent
from agent_framework_azure_ai import AzureOpenAIChatClient

# Create your agent
chat_client = AzureOpenAIChatClient(
    endpoint=os.getenv("AZURE_OPENAI_ENDPOINT"),
    api_key=os.getenv("AZURE_OPENAI_API_KEY"),
    deployment_name=os.getenv("AZURE_OPENAI_CHAT_DEPLOYMENT_NAME"),
)

agent = ChatAgent(
    name="my_test_agent",
    chat_client=chat_client,
    system_message="You are a helpful assistant.",
)

2. エージェントをサーバーに追加する

FastAPI アプリケーションで、エージェントエンドポイントを登録します。

from fastapi import FastAPI
from agent_framework_ag_ui import add_agent_framework_fastapi_endpoint
import uvicorn

app = FastAPI()

# Register your agent
add_agent_framework_fastapi_endpoint(
    app=app,
    path="/my_agent",
    agent=agent,
)

if __name__ == "__main__":
    uvicorn.run(app, host="127.0.0.1", port=8888)

3. 道場でのテスト

サーバーを起動する
http://localhost:3000で道場を開く
サーバーの URL を http://localhost:8888 に設定してください。
エンドポイントのドロップダウンに "my_agent" としてエージェントが表示されます
それを選択してテストを開始する

プロジェクト構造

AG-UI リポジトリの統合例は、次の構造に従います。

integrations/microsoft-agent-framework/python/examples/
├── agents/
│   ├── agentic_chat/                  # Feature 1: Basic chat agent
│   ├── backend_tool_rendering/        # Feature 2: Backend tool rendering
│   ├── human_in_the_loop/             # Feature 3: Human-in-the-loop
│   ├── agentic_generative_ui/         # Feature 4: Streaming state updates
│   ├── tool_based_generative_ui/      # Feature 5: Custom UI components
│   ├── shared_state/                  # Feature 6: Bidirectional state sync
│   ├── predictive_state_updates/      # Feature 7: Predictive state updates
│   └── dojo.py                        # FastAPI application setup
├── pyproject.toml                     # Dependencies and scripts
├── .env.example                       # Environment variable template
└── README.md                          # Integration examples documentation

トラブルシューティング

サーバー接続の問題

Dojo がサーバーに接続できない場合:

サーバーが正しいポートで実行されていることを確認します (既定値: 8888)
Dojo のサーバー URL がサーバーアドレスと一致することを確認します
ファイアウォールによって接続がブロックされていないことを確認する
ブラウザーコンソールで CORS エラーを探す

エージェントが表示されない

エージェントが Dojo ドロップダウンに表示されない場合:

エージェントエンドポイントが正しく登録されていることを確認する
起動エラーがないかサーバーログを確認する
add_agent_framework_fastapi_endpoint呼び出しが正常に完了したことを確認する

環境変数の問題

認証エラーが表示される場合:

.env ファイルが正しいディレクトリに存在するかどうかを確認する
必要なすべての環境変数が設定されていることを確認する
API キーとエンドポイントが有効であることを確認する
環境変数を変更した後にサーバーを再起動する

次のステップ

エージェントの例を調べて実装パターンを確認する
ツール UI をカスタマイズするためのバックエンドツールレンダリングについて説明します

その他のリソース

もうすぐです。

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-11-11

次の方法で共有

AG-UI Dojo を使用したテスト

[前提条件]

Installation

1. AG-UI リポジトリを複製する

2. Examples ディレクトリに移動する

3. Python の依存関係をインストールする

4. 環境変数を構成する

Dojo アプリケーションの実行

1. バックエンド サーバーを起動する

2. 道場フロントエンドを開始する

3. エージェントに接続する

使用可能なエージェントの例

独自のエージェントのテスト

1. エージェントを作成する

2. エージェントをサーバーに追加する

3. 道場でのテスト

プロジェクト構造

トラブルシューティング

サーバー接続の問題

エージェントが表示されない

環境変数の問題

次のステップ

その他のリソース

フィードバック

その他のリソース

1. バックエンドサーバーを起動する