すぐに使えるマルチエージェント時代の UI を考えるメモ

2025 年は Agentic AI 全盛ということで、Microsoft でもハンズオンやワークショップでマルチエージェント開発をテーマに開催することが増えてきています。ワークショップでは、できるだけマルチエージェント開発フレームワークの動作を理解してほしいという思いでやっていますが、ロジックからビジュアライズまで一貫して分かりやすく見せる（魅せる）のは難しい気がします。

まぁ実際は UI なんて不要でバックエンド動き続けるエージェントも多いことかと思いますが、かっこよくしたいですよね？


# タスク解決指向の UI
## AutoGen Studio v0.4.x
AutoGen Studio では洗練された UI を用いてマルチエージェント開発およびチャットプレイグラウンド実験が可能となっています。Team Builder のデザインはとても綺麗に仕上がっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/9597600b-1f57-40c9-9eec-b33a2f542573.png)

チャットプレイグラウンドは以下のような UI になっており、上部に与えられたタスクが、左下に AgentStep、 右下に実行フローが表示されているのが特徴的です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/9925fbdd-e7a4-4271-9db5-e10a112121f3.png)

↑このフロー表示好きですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/470353bd-df6c-4deb-8c4c-0e3faa868b61.png)

各エージェントの実行回数をクリックすることで複数回の実行内容を確認できます。

https://github.com/microsoft/autogen/tree/main/python/packages/autogen-studio


## Multi-Agent-Custom-Automation-Engine-Solution-Accelerator
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/53be05be-516a-4178-8c46-ce426f888898.png)

https://github.com/microsoft/Multi-Agent-Custom-Automation-Engine-Solution-Accelerator

これは Microsoft 謹製のマルチエージェントソリューションアクセラレーターですね。複雑なタスクを解決するために、プランナーがサブタスクに分解し、サブタスクごとにエージェントが課題解決します。サブタスクごとにデータも管理するため、Progress 表示やタスクの進捗状況を可視化できるスグレモノとなっています。プランを動的に修正するリプランも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/f6c00c9a-a898-4ff0-8ab9-321824b92ab1.png)

実装は AutoGen v0.4 系が使用されており、Core API でゴリゴリ実装されているためカスタマイズは戸惑うかもしれません。私は丸々 AgentChat で置き換えたバージョンを作って簡略化したりしています。

### On Azure アーキテクチャ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/74fe22a1-b58f-4587-b814-d12844e155b4.png)
Azure OpenAI Service のリファレンスアーキテクチャに沿ったアーキテクチャをボタン[一発でデプロイ](https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2Fmicrosoft%2FMulti-Agent-Custom-Automation-Engine-Solution-Accelerator%2Frefs%2Fheads%2Fmain%2Fdeploy%2Fmacae-continer-oc.json)することができます。


## Magentic-UI 
Microsoft Research が発表したオープンソース研究プロトタイプ Magentic-UI は、Web ブラウジング、Python およびシェルコードの作成と実行、ファイルの理解といったタスクを実行できる Web アプリケーションです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/4bfd196d-f334-4716-aba8-ff87405fa93b.png)


https://qiita.com/nohanaga/items/fe4e2f8856500ee5cebf


## KaibanJS
![kaiban-board.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/d0810023-315f-48e0-bb61-d425ef8271a0.gif)

タスクを解決するためにかんばんボードを利用するという面白いアイデアの UI。マルチエージェントの定義は LangChainJS ベースの実装なので UI 上で定義→実行までできてしまう。実際のかんばんボードの使い方としては、タスクの進捗状況を To Do, Doing, Block, Done の 4 つに分けてリアルタイムでカードを移動させていきます。もし Human-in-the-Loop が必要なタスクがあれば一旦 Blocked に格納されてユーザーからの承認を受け付けます。チャットスレッドはあくまでサブとしてサイドメニューに格納されているのが面白いです。

### Agent 定義
UI 上で Agent と Task を定義したあと Team を構成して Start Workflow をクリックすると即実行されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/107313a5-2d5f-49cf-a95d-2118e6a89d6b.png)

### Activity
かんばんのカードをクリックすると、Sub Task ごとの Activity が確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/f5d0f567-850c-49d6-9ae1-d209dc8c9678.png)

実際の推論結果はサイドバーの Activity に格納されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/58f4f457-da0f-425a-9f66-30c18aa9c44a.png)

### Blocked
Blocked に入ったものは人手で Approve ができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/8ce1719f-844e-4669-b282-0a601cf8c09e.png)

### すぐに試せるプレイグラウンド
https://www.kaibanjs.com/playground


ここまでの完成度で MIT license なのが素晴らしいです🥰

https://github.com/kaiban-ai/KaibanJS


# 大部屋的指向 UI
マルチエージェント×かんばんボードは面白い発想ですね。タスク解決指向のサンプルは結構多い気がしますが、日本的というか、だれが何を発言したかを可視化するってあんまりなさそうな気がします。そういえば Ignite 2024 では [TOYOTA さんのマルチエージェント事例](https://qiita.com/nohanaga/items/093488c3a69c3c2d55ba)が発表されていましたね。あの考え方に似ている気がします。

私もなんか作りましょう。

![画像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/b9793b50-5f21-41b4-823a-3c14fd9c2265.png)

出来たのがこんな感じです。サクッと作ったのでめっちゃ適当です。ちょうど素晴らしいオープンソースのかんばんボード「[Personal Kanban](https://github.com/nishantpainter/personal-kanban)」がありましたので、それを使わせてもらいました。感謝！これのバックエンドを AutoGen v0.4.x と統合します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/07d7f6a8-2975-4b82-b552-ec521befbb6d.png)


AutoGen v0.4.x の Magentic-One は[すでに解説](https://qiita.com/nohanaga/items/28fcf00a23e990ac3551)した通り、優れたメタ認知機能が魅力的ですが、いかんせん内部処理が分かりにくい！ということでエージェントごとの発言内容をそれぞれのかんばんにマッピングしつつ、`MagenticOneOrchestrator` による外部ループと `Progress Ledger` による内部ループの状態を非同期的に UI に送信して内部処理を可視化します。通信は Websocket で実装してあるので、ポンポンと発言履歴がかんばんに追加されていくのが見ていて楽しいです。

![4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/55335e61-c04c-464a-97d8-e0a5dc2e57fa.gif)

デフォルトは Magentic-One ですが、[SelectorGroupChat](https://qiita.com/nohanaga/items/164d70e4c50c1ce2cd4c) と [Swarm](https://qiita.com/nohanaga/items/9bd32514655f142b23c6) タイプの GroupChat が利用可能です。このように可視化することで、リアルタイムマルチエージェント UI での利用にとどまらず、ログでの利用やデバッグ用にも使える気がします。

もっとカッコよくしたやつを AutoGen によるマルチエージェントワークショップで内容理解のために使おうかと思います。

かんばん、いいかも…

https://github.com/nohanaga/kanban-multiagent-autogen

## ChatDev
ChatDev はソフトウェア開発エージェントを集めて特定のアプリケーションのコーディング、設計、テスト、開発を行う、LLM チャットを活用したバーチャルソフトウェア開発会社です。

![replay.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/cdf2594d-0e41-47c9-8a5b-7f9bd76a6c57.gif)

開発風景のビジュアライズが印象的です。今誰が発言しているか💬を出すのもいいアイデアだと思いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/5097b3e6-30ef-40d2-94d9-0067a3f8c768.png)

いやかっこよすぎ！

https://github.com/OpenBMB/ChatDev


# くわしくは Azure OpenAI Developers Seminar 2025 にて解説中
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674344/4f23fd59-1486-4320-8d49-30572d042315.png)

https://youtu.be/jHW6zcIzm7g