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-ui-protocol/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_COMPLETION_MODEL="gpt-4.1"

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

Note

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 機能すべてを示します。

エンドポイント	特徴	説明
`/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. エージェントを作成する

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

import os
from agent_framework import Agent
from agent_framework.openai import OpenAIChatCompletionClient

# Create your agent
chat_client = OpenAIChatCompletionClient(
    model=os.getenv("AZURE_OPENAI_CHAT_COMPLETION_MODEL"),
    azure_endpoint=os.getenv("AZURE_OPENAI_ENDPOINT"),
    api_version=os.getenv("AZURE_OPENAI_API_VERSION"),
    api_key=os.getenv("AZURE_OPENAI_API_KEY"),
)

agent = Agent(
    name="my_test_agent",
    client=chat_client,
    instructions="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

Troubleshooting

サーバー接続の問題

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

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

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

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

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

環境変数の問題

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

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

次のステップ

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

その他のリソース

Go AG-UI サーバーは、Dojo 互換クライアントが呼び出すことができる HTTP エンドポイントを公開します。 aguiprovider.NewJSONHTTPHandlerを使用してエージェントをホストし、サーバーの URL で Dojo をポイントします。

mux := http.NewServeMux()
mux.Handle("/", aguiprovider.NewJSONHTTPHandler(myAgent, aguiprovider.HandlerConfig{}))

if err := http.ListenAndServe(":8888", mux); err != nil {
    log.Fatal(err)
}

Tip

完全な実行可能サーバーについては、AG-UI サーバーの概要サンプルを参照してください。

Dojo は AG-UI 相互運用性ツールであり、MAF 固有の.NET構成は必要ありません。 MapAGUIServerを使用してシナリオを公開し、Dojo のドキュメントに従って AG-UI エンドポイントを接続します。

エージェントフレームワーク/Dojo の例

前提条件

始める前に、以下のことを確認してください:

.NET SDK 10.0 (LTS) 以降
チャットモデルのデプロイを使用した Azure OpenAI エンドポイント
DefaultAzureCredentialで使用できるAzure資格情報 (たとえば、az login でサインイン)
Node.js と pnpm (Dojo フロントエンドを実行する場合)

Installation

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

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

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

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

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

3. 環境変数を構成する

サンプルサーバーで使用Azure OpenAI エンドポイントとチャット展開名を設定します。

export AZURE_OPENAI_ENDPOINT="https://your-resource.openai.azure.com/"
export AZURE_OPENAI_CHAT_DEPLOYMENT_NAME="gpt-4o-mini"

Note

このサンプルはDefaultAzureCredentialで認証されるため、サーバーを実行する前にAzure (az login 経由など) で認証されていることを確認してください。詳細については、 Azure ID のドキュメントを参照してください。

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

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

サンプルディレクトリで、サンプルサーバーを復元し、エージェントの例を使用して実行します。

dotnet restore AGUIDojoServer/AGUIDojoServer.csproj
dotnet run --project AGUIDojoServer/AGUIDojoServer.csproj --urls "http://localhost:8889"

サーバーは http://localhost:8889で起動します。

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

新しいターミナルウィンドウを開き、AG-UI リポジトリのルートに移動し、Dojo アプリケーションディレクトリに移動します。 Dojo が.NET サーバーを検出できるようにAGENT_FRAMEWORK_DOTNET_URL設定し、起動します。

cd apps/dojo
pnpm install
export AGENT_FRAMEWORK_DOTNET_URL="http://localhost:8889"
pnpm dev

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

Note

pnpm devを実行する前に、AGENT_FRAMEWORK_DOTNET_URLを設定します。この環境変数により、Dojo に "Microsoft Agent Framework (.NET)" エントリが表示されます。

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

ブラウザーで http://localhost:3000 を開く
ドロップダウンから [Microsoft Agent Framework (.NET)] を選択します
エージェントのサンプルを探索し始める

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

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

エンドポイント	特徴	説明
`/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: 予測状態の更新	ツールの実行中に予測状態が更新されたエージェント

次のステップ

ファーストステップガイドに従って独自のエージェントを作成する
ツール UI をカスタマイズするためのバックエンドツールレンダリングについて説明します

その他のリソース

Nexte Steps

MAF 実装ガイダンスについては、このセクションのシナリオに関する記事を参照してください。

フィードバック

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

Last updated on 2026-08-25

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

前提条件

Installation

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

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

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

4. 環境変数を構成する

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

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

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

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

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

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

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

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

3. 道場でのテスト

プロジェクト構造

Troubleshooting

サーバー接続の問題

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

環境変数の問題

次のステップ

その他のリソース

エージェント フレームワーク/Dojo の例

前提条件

Installation

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

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

3. 環境変数を構成する

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

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

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

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

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

次のステップ

その他のリソース

Nexte Steps

フィードバック

その他のリソース

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

エージェントフレームワーク/Dojo の例

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