A2UI×AgentCore×A2Aで実現するマルチエージェントUIアーキテクチャ

JAWS-UG AI/ML #35：Generative AI/ML LT大会の登壇資料です。

イベント詳細は以下：
https://jawsug-ai.connpass.com/event/381260/

1. ©Mitsubishi Electric Corporation A2UI×AgentCore×A2Aで実現する マルチエージェントUIアーキテクチャ 三菱電機株式会社 AXイノベーションセンター 塚田 真規
2. ©Mitsubishi Electric Corporation 自己紹介 2 塚田 真規 Masaki Tsukada 三菱電機株式会社 デジタルイノベーション事業本部 AXイノベーションセンター • AWS Community Builder (AI Engineering) • 2024/2025 Japan AWS All Certifications Engineers • JAWS-UG AI/ML支部運営
3. ©Mitsubishi Electric Corporation A2UIとは 3 AIエージェントが安全にUIを生成、描画するための 仕組み ライブラリ 技術的な制約 ユーザー AIエージェント …… - ……… -- --- ～ -- …… --- 解決したい問題 ----- …… ～～ ～～ ……… --- AIエージェントとのテキストベースのやり取りは非効率 ボタンやチェックボックスなどの よりリッチなUIでやり取りしたい AIエージェント UI ①AIエージェントは直接UIを操作できない ②HTML/JavaScriptをiframeで送る • パフォーマンス低下の恐れ • アプリテーマの統一感欠如 • セキュリティリスク 解決策 A2UI : UIを定義するJSONメッセージをやり取り
4. ©Mitsubishi Electric Corporation A２UIのデータフロー 4 UI AIエージェント ユーザーリクエスト ユーザー入力 AIエージェント の行動 コンポーネント定義の追加/更新 データモデルの入力/更新 レンダリング開始通知 画面描画 コンポーネントへのユーザー操作 AIエージェント の行動 ユーザー入力 …
5. ©Mitsubishi Electric Corporation コアとなるデータメッセージ 5 コンポーネント定義の追加/更新 「surfaceUpdate」 データモデルの入力/更新 「dataModelUpdate」 レンダリング開始通知 「beginRendering」 { "surfaceUpdate": { "surfaceId": "main", "components": [ { "id": "root", "component": { "Column": { "children": {"explicitList": ["counter"]} } } }, { "id": " counter", "component": { "Text": { "text": {"path": "/count"} ……… { "dataModelUpdate": { "surfaceId": "main", "contents": [ { "key": “count", “valueNumber”: 1 }, } } { "beginRendering": { "surfaceId": "main", "root": "root" } }
6. ©Mitsubishi Electric Corporation 構成アーキテクチャ 6 オーケストレーター Webアプリ (Lit Component) AgentCore Runtime コード生成 エージェント AgentCore Runtime ダッシュボード生成 エージェント AgentCore Runtime 連絡先検索 エージェント AgentCore Runtime … A2A A2A A2A A2A • AIエージェントはAgentCore Runtimeにデプロイ • AIエージェントはStrands Agentsで実装 • コンポーネント間の通信にはA2Aを利用 • マルチエージェントシステム(Supervisor)を採用
7. ©Mitsubishi Electric Corporation 7 オーケストレーター コード生成 エージェント ダッシュボード生成 エージェント Webアプリ チャット パネル A2UI表示 パネル Human-in-the-Loop AIエージェントごとに専用UIを表示
8. ©Mitsubishi Electric Corporation A2UIコンポーネント 8 標準コンポーネントは 「A2UI Composer」から簡単に構築可能！ カスタムコンポーネントとして 独自のUI構造を登録可能！
9. ©Mitsubishi Electric Corporation まとめ 9 • A2UIを用いてリッチなUIを実現 • AgentCore RuntimeにAIエージェントのデプロイ • AIエージェントごとに異なるUIの表示 • A2AによるA2UIデータのやり取り ✓ 注意 ✓ 今回紹介した内容はv0.8の仕様ベースとなっています ✓ v0.9 Draftではメッセージ名称や構造の変更が 明示されているのでご注意ください