6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Agent2Agent】 公式の A2A のデモアプリを試してみる(3つのエージェントを組み合わせる)

Last updated at Posted at 2025-05-11

はじめに

以下の投稿から、1ヶ月後くらいになって手をつけ始めてみた A2A(Agent2Agent)の話です。

直近では、公式の Pythonチュートリアルを見かけて、それを途中まで試してみていました。

●【Agent2Agent Protocol】 公式の Python を使った A2Aチュートリアルのサーバー立ち上げまでを試す(バグの対処も) - Qiita
 https://qiita.com/youtoy/items/47e80be2145639489414

しかし、試している途中で日をまたいだらサイトの内容に修正が入ったり、手順の内容が固まりきってない等の状況がありそうな感じもしたので、いったん別の内容を試してみることにしました。

今回試す内容

今回試してみる内容は、A2A の公式デモアプリです。GitHub のリポジトリでは、以下に置いてあるものです。

●A2A/demo at main · google/A2A
 https://github.com/google/A2A/tree/main/demo

関連する情報を検索していると、例えば以下など、既に試された話の記事を複数見つけることができる状況です。

●AI エージェント新時代到来 A2A protocol を試してみた #GoogleCloudNext | DevelopersIO
 https://dev.classmethod.jp/articles/ai-a2a-protocol-googlecloudnext/
●10分くらいでできるA2Aのはじめ方
 https://zenn.dev/churadata/articles/c505d4c2d39281

こちらのデモは、問題なく進められそうかと思われるので、進めてみることにします。

公式デモを試していく

それでは、公式デモを試していきます。

デモアプリの構成

上で記載したデモアプリの URL にアクセスすると、以下の図が掲載されています。赤枠で囲んだ 2つの部分の間で A2A が使われているようです。

image.png

さらに構成を見ていく

もう少し構成を見ていくと、ブラウザでアクセスするフロントエンドの実装には、以下の「Mesop」を使っているようです。

●mesop-dev/mesop: Rapidly build AI apps in Python
 https://github.com/mesop-dev/mesop

そして、ホストエージェントは Google ADK が使われているようです。説明文からリンクがはられている、「複数のエージェントとやりとりするホストエージェントのコード」の冒頭部分を見ると、Google ADK がインポートされているのが確認できます。

image.png

また、A2A を使ったやりとりをする部分は、Google ADK を使った

Each remote agent will retrieve the A2AServer's AgentCard and then proxy all requests using A2A.

環境準備とデモアプリの実行

環境準備に関する確認

それでは、デモアプリを試すために環境を準備します。公式の Prerequisites という部分に以下の記載があります。

image.png

自分の環境では以下のセットが使える状態でした。

  • 自分の環境
    • Python 3.13系
    • UV
    • Gemini の APIキー

APIキーの設定は、この後で行います。

また上記と合わせて、以下にあるサンプルを使うようです。

●A2A/samples/python/agents/README.md at main · google/A2A
 https://github.com/google/A2A/blob/main/samples/python/agents/README.md

デモアプリを動かす1: 下準備・フロントエンド側

あとは Running the Examples という項目に書かれた、以下の手順を進めていきます。

image.png

まず、リポジトリに置かれたコードをローカルに持ってきて、 demo/ui フォルダへ移動します。
また、そのフォルダ内で以下を実行し、Gemini の APIキーをセットしました。

echo "GOOGLE_API_KEY=【自分の APIキー】" >> .env

そして以下のコマンドを実行した後、サーバーが起動されたというメッセージが出るのを待ちます。

uv run main.py

image.png

そしてブラウザで http://0.0.0.0:12000 にアクセスしたところ、以下のページが表示されるのを確認できました。

image.png

デモアプリを動かす2: エージェントを 1つ追加して動作確認

次にエージェントを追加して、フロントエンドからやりとりしていきます。

まずは以下に記載されたサンプルを使います。

●A2A/samples/python/agents/google_adk/README.md at main · google/A2A
 https://github.com/google/A2A/blob/main/samples/python/agents/google_adk/README.md

公式ページの cd ../../samples/agents/google_adk/ という部分が実態と合っていないようだったので(パスの途中に python が必要)、以下で uiフォルダ内からサンプルのフォルダへと移動します。

cd ../../samples/python/agents/google_adk

そして、以下を実行します。

cp ../../../../demo/ui/.env ./
uv run .

そうすると 10002番ポートでエージェントが起動しました。

image.png

http://localhost:10002 で直接アクセスすると、「Method Not Allowed」という出力が表示されます。

そこで、先ほど uiフォルダで起動していたサーバーにアクセスします。ブラウザで http://0.0.0.0:12000 にアクセスして、左メニューの「Agents」を選択し、右側の画面のアイコンをクリックします。

image.png

そして、Agent Address という項目に「localhost:10002」を入力し、Readボタンを押します。

image.png

その後の画面で Saveボタンを押して、以下のようにエージェントを追加できた状態になりました。

image.png

ここまでできたら、軽く動作確認をしてみます。
左メニューの「Home」を選び、右側画面に出る「+」アイコンをクリックします。そしてチャットの画面が出てくるので、「あなたは、何ができますか?」と送ると、以下の応答が得られました。

image.png

デモアプリを動かす3: さらにエージェントを 2つ追加

さらにエージェントを追加してみます。今回のデモアプリの構成図は、以下 3つを使ったものになっていました。

image.png

そこで、以下 2つをさらに追加してみます。

●A2A/samples/python/agents/langgraph/README.md at main · google/A2A
 https://github.com/google/A2A/blob/main/samples/python/agents/langgraph/README.md
●A2A/samples/python/agents/crewai/README.md at main · google/A2A
 https://github.com/google/A2A/blob/main/samples/python/agents/crewai/README.md

デモアプリのルートフォルダから以下のようにたどって、コマンドを実行します。

cd samples/python/agents/langgraph
cp ../../../../demo/ui/.env ./
uv run .
cd samples/python/agents/crewai
cp ../../../../demo/ui/.env ./
uv run .

その後、上記を実行したターミナルそれぞれが、以下のようになりました。

image.png

image.png

localhost:10000 と localhost:10001 でエージェントが準備されたようなので、先ほどのフロントエンド側でのエージェント追加の操作を、これらについても同様に行います。

追加の操作を行った後の状態は、以下のとおりです。3つのエージェントを設定できたことが確認できます。

image.png

デモアプリを動かす4: 動作確認

3つのエージェントをセットできたところで、あらためて動作確認を行います。
http://0.0.0.0:12000 にアクセスして、画面左の「Home」からチャット画面を開きます。

まずは「できることを教えて」という内容を送ってみたところ、以下の回答を得られました。

image.png

新規チャットを開いて「ファンタジー世界のドラゴンと魔法使いのピクセルアートを生成して」という内容を送ったところ、依頼先を聞き返されてしまいましたが、画像を生成してもらえました。

image.png

また「100ドルは何円?」という内容を送ってみたところ、また依頼先を確認されましたが、その後に結果を得ることができました。

image.png

また新規チャットにして、以下 2つを聞いてみました。

  • Generate pixel art of a dragon and a wizard in a fantasy world.
  • How many yen is $100?

今回は依頼先のエージェントは聞き返されず、直接タスクが実行されました(2つ目は、どこの国のドルなのかを聞き返されてはいるものの)。

image.png

もう 1セット、新規チャットで以下を送ってみました。

  • 子犬と子猫のかわいいピクセルアートを適切なエージェントで生成して
  • 100米ドルは何円?
  • Generate pixel art of a dog and a cat

1つ目の画像生成がうまくできなかったのですが、他2つはサクッと応答を得られました。

image.png

おわりに

今回、公式の A2A のデモアプリを試してみました。
環境さえ用意できれば、あとは基本的に手順通りのコマンド実行・画面操作を行うだけで、短時間でお試しを完了させられるものだったので、ありがたかったです。

気になっている内容

エージェントのサンプルを見ていて、以下の MCP に関するものもあったので、別途こちらを組み込んだものも試せればと思っています。

●A2A/samples/python/agents/ag2/README.md at main · google/A2A
 https://github.com/google/A2A/blob/main/samples/python/agents/ag2/README.md

他、以下の JavaScriptサンプルも見かけて、こちらも気になりました。

●A2A/samples/js at main · google/A2A
 https://github.com/google/A2A/tree/main/samples/js

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?