4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-03-31

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

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

タスク解決指向の UI

AutoGen Studio v0.4.x

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

image.png

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

image.png

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

image.png

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

Multi-Agent-Custom-Automation-Engine-Solution-Accelerator

image.png

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

image.png

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

On Azure アーキテクチャ

image.png
Azure OpenAI Service のリファレンスアーキテクチャに沿ったアーキテクチャをボタン一発でデプロイすることができます。

KaibanJS

kaiban-board.gif

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

Agent 定義

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

image.png

Activity

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

image.png

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

image.png

Blocked

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

すぐに試せるプレイグラウンド

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

大部屋的指向 UI

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

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

画像.png

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

image.png

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

4.gif

デフォルトは Magentic-One ですが、SelectorGroupChatSwarm タイプの GroupChat が利用可能です。このように可視化することで、リアルタイムマルチエージェント UI での利用にとどまらず、ログでの利用やデバッグ用にも使える気がします。

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

かんばん、いいかも…

ChatDev

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

replay.gif

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

image.png

いやかっこよすぎ!

くわしくは Azure OpenAI Developers Seminar 2025 にて解説中

image.png

4
1
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
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?