nikkie-ftnextの日記

イベントレポートや読書メモを発信

AG-UI 素振りの記：Agent Development Kit で作ったエージェントを CopilotKit の Chat UI から呼び出す

LLM

はじめに

七尾百合子さん、お誕生日 306日目 おめでとうございます！ nikkieです。

世は大LLM時代にして、大プロトコル時代！
日々新たなプロトコルが提案されている感がありますが、プロトコル群を少し遡って AG-UI を素振りします。

目次

Agent–User Interaction (AG-UI) Protocol

docs.ag-ui.com

最初の提案は2025年5月のようです。
Introducing AG-UI: The Protocol Where Agents Meet Users | Blog | CopilotKit
この半年で主要なエージェントフレームワークがサポートしていって（「Supported Integrations」）、2026年1月時点では無視できない感があります。

この記事では以下の組合せで触ります。

Quickstart1 に沿って、Chat UI を作成します。

docs.copilotkit.ai

Turn your ADK Agents into an agent-native application in 10 minutes.

ADK のエージェントを AG-UI をサポートしたサーバにする

uvicorn で FastAPI アプリをサーブすればよさそうだったので、inline script metadata を使ったスクリプトで実装しました。
動きを理解したかったので、ロギングのコードを追加2しています。

環境変数GOOGLE_API_KEY（またはGEMINI_API_KEY）を指定して起動します。

uv run --python 3.13 main.py

2つのエンドポイントが ag-ui-adk によって追加されていました。

ADKAgentのパラメタは、以下で解説されてそうでした（積ん読）
https://github.com/ag-ui-protocol/ag-ui/blob/5d68c0feeab702e870ea70f0d79146d6bfdfe484/integrations/adk-middleware/python/USAGE.md

CopilotKit で Chat UI を用意する

% node --version
v25.2.1
% npm --version
11.6.2
% npx --version
11.6.2

フロントエンドは Quickstart に沿って進めました。

  • npx create-next-app@latest my-copilot-app
  • npm install @copilotkit/react-ui @copilotkit/react-core @copilotkit/runtime @ag-ui/client@0.0.42
    • ag-ui/clientの最新 0.0.43 が入ると、CopilotRuntimeに渡すエージェントの型が合わなかったので、バージョン指定しました（gpt-5.2-codex 調査による）
  • 3つのファイル編集
    • app/api/copilotkit/route.ts追加
      • ADK 製エージェントのサーバの URL を指定
      • /api/copilotkitエンドポイントを追加
    • app/layout.tsx編集
      • <CopilotKit runtimeUrl="/api/copilotkit" agent="my_agent">
    • app/page.tsx編集（Home関数を消してPage関数追加）

以上をやって npm run dev し、 http://localhost:3000 をブラウザで開くと、
ChatGPT のような UI が用意されています！

AG-UI プロトコルで Chat UI から ADK のエージェント呼び出し

Quickstart にある例を送ります3。

Can you tell me a joke?

ADK 製エージェント側のログ

LLM Request:
-----------------------------------------------------------
System Instruction:
Be helpful and fun!

You are an agent. Your internal name is "assistant".
-----------------------------------------------------------
Config:
{'http_options': {'headers': {'x-goog-api-client': 'google-adk/1.22.1 gl-python/3.13.8', 'user-agent': 'google-adk/1.22.1 gl-python/3.13.8'}}}
-----------------------------------------------------------
Contents:
{"parts":[{"text":"Can you tell me a joke?"}],"role":"user"}
-----------------------------------------------------------
Functions:

-----------------------------------------------------------

LLM Response:
-----------------------------------------------------------
Text:
Okay, you got it! Why did the scarecrow win an award?

...Because he was outstanding in his field! 🏆🌾

Ba-dum-tss! Hope that brought a smile to your face! 😄
-----------------------------------------------------------
Function calls:

-----------------------------------------------------------
Raw response:
(略)
-----------------------------------------------------------

終わりに

ADK (Python)・CopilotKit という構成で、Chat UI から ADK のエージェントを呼び出すことができました！
Next.js が初見で理解が追いついていないところが多々あるのですが、高機能な Chat UI が少ないタイプ量で作れていると感じます。
これは一歩目ですが、ADK のところは AG-UI をサポートする別のフレームワークに置き換えられるわけで、なかなか可能性を感じさせます！

  • ADK の機能で Agent Engine へのデプロイ4を過去にやったが、ag-ui-adk で FastAPI アプリとしてデプロイするという選択肢もありそう（要検証）
  • PydanticAI や Strands Agents5 も触っているが、UI の部分は AG-UI が有力かも（※Strands は対応中）
  • エージェントに UI を操作させられる？？

コードの全体像はこちらです

  1. 先人の記事 [ADK][AG-UI] AG-UI(CopilotKit)を利用してADKのChat UIを楽に作成する も参考に一次情報を見ていき、今の私には CopilotKit の Quickstart が一番分かりやすそうだったので選択しました↩
  2. ↩
  3. 「なにかジョークを言って」と日本語で送っても動きました↩
  4. ↩
  5. ↩