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

## はじめに

以下の投稿から、1ヶ月後くらいになって手をつけ始めてみた [A2A（Agent2Agent）](https://github.com/google/A2A/tree/main)の話です。

https://x.com/googlecloud_jp/status/1910196039711142294


直近では、公式の 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](https://github.com/google/A2A/tree/main/demo) にアクセスすると、以下の図が掲載されています。赤枠で囲んだ 2つの部分の間で A2A が使われているようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/539fcde3-b906-4f0e-b932-0505e7007e73.png)


#### さらに構成を見ていく

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

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


そして、ホストエージェントは Google ADK が使われているようです。説明文からリンクがはられている、「[複数のエージェントとやりとりするホストエージェントのコード](https://github.com/google/A2A/blob/main/samples/python/hosts/multiagent/host_agent.py)」の冒頭部分を見ると、Google ADK がインポートされているのが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7e2e1e41-0867-4ab6-9d56-455d94dc72d3.png)

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




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






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

#### 環境準備に関する確認

それでは、デモアプリを試すために環境を準備します。公式の [Prerequisites](https://github.com/google/A2A/tree/main/demo#prerequisites) という部分に以下の記載があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ecea4d65-b155-46fc-a7dd-17e641bf9b79.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](https://github.com/google/A2A/tree/main/demo#running-the-examples) という項目に書かれた、以下の手順を進めていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/59b6f1c2-451c-423b-89bf-a2baed7494dc.png)


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

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

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

```zsh
uv run main.py
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b2f79d14-5958-4421-825c-0fe0b185b7b0.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b3fd73e4-bc80-4dab-88cb-5cdf8718f443.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フォルダ内からサンプルのフォルダへと移動します。

```zsh
cd ../../samples/python/agents/google_adk
```

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cc20b13e-f3c1-436a-9ece-df1d0fc65fdb.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/439a4a55-1d3d-4699-a8e3-bb26327fcd48.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/342c4441-0f2d-4211-8f16-0020e1eda9c3.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0a6628fa-c0bd-49cf-808c-d7efd8814f43.png)


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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/82969ca9-d8c0-4ac8-9379-00dbc69fa315.png)



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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/011aa89f-08c3-493b-ade1-814d302c489c.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


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


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


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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/54b6bf6a-d4bc-4504-8410-4364da4eb5d7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/867bcdca-7108-4c33-9250-0ce046329c80.png)


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2c1cfc7e-388b-499f-afb2-c27773bdb605.png)


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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a277cc6a-2fe8-4255-9e9b-9779bf4f55ca.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/57cebb5d-b832-4756-a7f9-ebce8e839934.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c0aec2b3-6104-48b5-9151-5ceb768e9fa6.png)



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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cb0e4b0b-a643-4b2c-b809-fa061abae5c7.png)


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

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d841892b-ec59-4373-874e-2a324e25c349.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