【AIエージェント】ADK Web UIについて

2025年12月26日

Google ADK Web UI をローカル環境で起動し、既存のエージェントと対話しながらデバッグ・評価する方法を解説。UI で確認できる情報やトレースの見方も紹介します。

はじめに

前回の記事では、Google ADK（Agent Development Kit）を用いて、将棋・オセロ・チェスのニュースを取得するエージェントを作成しました。

今回は、そのエージェントをブラウザ上の Web UI から操作・観察できる「ADK Web UI」にフォーカスします。

ターミナルからの対話だけだと、

「中でどんなプロンプトが投げられているのか？」

「どのツールがどう呼ばれているのか？」

を把握しづらいところがあります。

ADK Web UI を使うと、これらを視覚的に追いかけながらデバッグ・評価できるようになります。

概要

ADK Web UI は、Google の Agent Development Kit（ADK）に統合されている開発者向け Web UI です。今回は実際にADK Web UIを使用し、使用感などを確認していきます。

使用方法

ここでは、前回作成したエージェント（

shogi_info_agent

）が正常に動く状態を前提に、Web UI の起動～アクセスまでの手順を整理します。

1. 親ディレクトリに移動する

前回の記事と同様、プロジェクト構成は次のようになっているとします。

agent_dev
 ├─ .venv/
 └─ shogi_info_agent/
      ├─ __init__.py
      ├─ agent.py
      └─ .env

まずは PowerShell でプロジェクトのルートディレクトリに移動します。

cd ./agent_dev

2. 仮想環境の有効化

次に、uv で作成した仮想環境を有効化します。

.\.venv\Scripts\Activate.ps1

プロンプトの先頭に (.venv) のような表示が出れば OK です。

この状態で実行するコマンドは、すべてこの仮想環境の Python / パッケージを利用 することになります。

3. Web UI の起動

仮想環境が有効化された状態で、次のコマンドを実行します。

adk web

しばらくすると、コンソール上にローカルサーバの URL が表示されます（例）:

http://127.0.0.1:8000

4. ブラウザでアクセス

表示された URL（通常は http://127.0.0.1:8000）をブラウザに入力すると、

ADK Web UI のトップページにアクセスできます。

右側：エージェントとのチャット画面
左側：エージェントやツールの定義、トレース情報などの詳細ビュー

といった構成になっており、**ターミナルで adk run していたときの対話を、そのまま GUI で行えるイメージです。

質問と応答の確認

ここでいくつか質問をし、それに対する応答を確認しましょう。

１，将棋に関するニュースを教えてください

右側のチャット欄に上記の質問を打ち込むと、
get_shogi_news が呼び出され、日本将棋連盟の RSS から取得した最新ニュースが表示されます。

２，チェスのニュースを2つ箇条書きで教えてください

今度はチェス用のツール get_chess_news を用いて、
「件数 2」「箇条書き」といった条件を踏まえたレスポンスが返ってきます。

確認できること

ADK Web UI が便利なのは、単なるチャット UI にとどまらず、エージェントの内部挙動をかなり細かく可視化できる点にあります。ここでは、主に確認できる代表的なポイントをまとめます。

1. エージェントの定義と構成の可視化

どのエージェントが定義されているか
それぞれのエージェントがどのツールを持っているか
どのような説明（description）や instruction を持っているか

といった情報を、UI 上で一覧できます。

今回の例だと、

boardgame_info_agent
- 使用モデル：openai/gpt-4o-mini
- ツール：get_shogi_news, get_othello_news, get_chess_news

といった構成が視覚的に確認できます。

2. プロンプトのテストとデバッグ

Web UI のチャット欄からプロンプト（指示文）を試し打ちできるので、

質問文を少し変えたときの挙動
曖昧な問い合わせに対する応答
箇条書き / 要約などのフォーマット指定

などをその場で試しながらチューニングできます。ターミナルでも同じことはできますが、

Web UI だと「過去のやり取り」「トレース情報」「ツール呼び出し」が一画面で見えるので、

“どこが悪さをしているのか” を掘りやすいのがメリットです。

3. ツール利用の監視（Trace ビュー）

左側のメニューから「Trace」→特定のイベント（例：call_llm）をクリックすると、

どのエージェントが
どのツールを
どのような引数で呼び出したか

といった情報を以下のように時系列に追うことができます。

たとえば、将棋ニュースの質問では、

boardgame_info_agent が LLM にプロンプトを投げる
LLM が「get_shogi_news(limit=1) を呼ぶべき」と判断してツール呼び出しを生成
ツールの実行結果（RSS から取得したニュース）が LLM に戻る
それを日本語で整形して最終回答を返す

という一連の流れが、Trace 上にイベントとして記録されます。

4. Request / Response の中身の確認 Request 例

model: "openai/gpt-4o-mini"
config:
  system_instruction: "あなたは日本語のアシスタントです。常に日本語で、簡潔かつ正確に回答してください。ユーザーの指示に応じて、必要なら下記ツールを呼び出して結果を要約して提示します。- get_shogi_news(limit: int=1) - get_othello_news(limit: int=3) - get_chess_news(limit: int=3) ツールから返る report を整えて、箇条書きで提示してください。 You are an agent. Your internal name is "boardgame_info_agent". The description about you is "将棋・オセロ・チェスの最新情報を取得して要約するエージェント"."
tools:
  - name: "get_shogi_news"
    description: "日本将棋連盟のRSS/Atomから最新ニュースを取得..."
  - name: "get_othello_news"
    description: "PR TIMES のサイトマップから最新の記事URLを取得..."
  - name: "get_chess_news"
    description: "チェス掲示板のRSSから最新トピックを取得..."
contents:
  - role: "user"
    parts:
      - text: "将棋に関するニュースを教えてください"

Response 例（ツール呼び出し）

content:
parts:
- function_call:
id: "call_mVByHvjk7SXo98TgfYv6y2bQ"
name: "get_shogi_news"
args:
limit: 1
role: "model"
usage_metadata:
prompt_token_count: 363
candidates_token_count: 16
total_token_count: 379

ここまで見えると、