Data Driven Knowledgebase

前回の記事では、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を使用し、使用感などを確認していきます。

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

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

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

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

agent_dev

 ├─ .venv/

 └─ shogi_info_agent/

      ├─ __init__.py

      ├─ agent.py

      └─ .env

cd ./agent_dev

.\.venv\Scripts\Activate.ps1

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

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

3. Web UI の起動

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

adk web

http://127.0.0.1:8000

２，チェスのニュースを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） をクリックすると、

• どのエージェントが


• どのツールを


• どのような引数で呼び出したか

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

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

1. boardgame_info_agent が LLM にプロンプトを投げる


2. LLM が「get_shogi_news(limit=1) を呼ぶべき」と判断してツール呼び出しを生成


3. ツールの実行結果（RSS から取得したニュース）が LLM に戻る


4. それを日本語で整形して最終回答を返す

という一連の流れが、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

ここまで見えると、

• システムプロンプトがちゃんと渡っているか


• ツールの宣言が意図した通りになっているか


• LLM がどのツールをどの引数で呼ぼうとしているか

といった点を細かく調査できます。

プロンプト調整やツール設計のデバッグにはかなり有用 です。

本記事では、

• ADK Web UI がどういう位置付けのツールなのか


• ローカル環境で adk web を起動して、既存のエージェントと対話する方法


• Web UI 上で何が確認できるのか（Trace / Request / Response など）

をざっくり紹介しました。

ターミナルだけで開発していると、

• 「とりあえず動いてはいるけど、中で何が起きているか分からない」


• 「ツールの呼び出し方がおかしい気がするが、ログの追い方が面倒」

といった行き詰まりが起きがちですが、

ADK Web UI を使うと、エージェント開発の試行錯誤サイクルをかなり高速化 できます。