AG-UIとは何か？（Browser and UI #3 ）

2025/08/20に開催された「Browser and UI #3 Network/Performance」に、IVRyのYukako Otsukiが登壇しました。

■リンク集
・コーポレートサイト：https://ivry.jp/company/
・採用ページ：https://ivry-jp.notion.site/
・イベント一覧：https://ivry.connpass.com/event/
・IVRy Tech（Xアカウント）：https://x.com/IVRy_tech

Transcript

1. AG-UIとは何か？ Browser and UI #3 Yukako Otsuki @otsuky_
2. Yukako Otsuki ⾃⼰紹介 @otsuky_
3. 時は⼤AI時代...
4. AI エージェントを作りたい
5. AI エージェントを作るのは⼤変
6. AIエージェントとは ‧タスクを⾃動化し、ユーザーと対話し、データに基づいて知的な判断を下 すためにアプリケーションに組み込まれたデジタルな協働者。 ‧AIを使⽤して推論、決定、⾏動を⾏う⾃律的なソフトウェアシステム。 しばしば直接的な⼈間の指⽰なしに動作する。 (AI調べ)
7. AIエージェントの例 ‧Devin 仕様理解から実装/テスト/PR 作成/デプロイまで⾃律的にこなす。 開発⽤の仮想環境を持っていてその中でブラウザを動かしたり、ターミナル でコマンドを実⾏したりする。
8. AIエージェントの⾏動のステップ 知覚 推論 ⾏動 学習 Agent
9. AIエージェントの実装 さまざまなフレームワークやツール群が充実してきた
10. AIエージェントが使⽤する通信プロトコル ‧MCP: 外部のエージェントとツールを連携 ‧A2A: 異なるエージェント同⼠を連携
11. AI エージェントを作るのは⼤変
12. Agent User Agent Tool
13. Agent User Agent Tool MCP A2A
14. Agent User Agent Tool ⽴ ち は だ か る 壁 MCP A2A
15. 壁は何か ‧バックエンドとフロントエンドの分断 ‧UXの課題
16. Agent User Agent Tool MCP A2A Frontend Backend ここがむずい
17. バックエンドとフロントエンドの分断 ‧フレームワークによって通信の⽅式が異なるためアドホックな開発になり がち
18. UXの課題  ‧トークンごとのストリーミング表⽰  ‧AIエージェントの思考プロセスや作業状況のリアルタイム可視化  ‧実⾏中にキャンセル、⼀時中断、返答したい（Human-in-the-Loop） AIエージェントのUXの要求は上がっているが実現難易度が⾼い
19. AG-UI
20. AG-UI（Agent User Interaction Protocol） フロントエンドアプリケーションがAIエージェントに接続する⽅法を標準化 するためのプロトコル
21. AIエージェントが使⽤する通信プロトコル ‧MCP: エージェントとツールを連携 ‧A2A: 異なるエージェント同⼠を連携 ‧AG-UI: UIとエージェントを連携 ← New!
22. Agent User Agent Tool ⽴ ち は だ か る 壁 MCP A2A
23. Agent User Agent Tool ⽴ ち は だ か る 壁 MCP A2A AG-UI
24. AG-UIの特徴 ‧特定の配信⽅法に依存しない  ‧HTTP標準であるServer-Sent Eventsをサポート  ‧様々なアーキテクチャに柔軟に対応  ‧異なるバックエンド技術でも同⼀のフロント環境で利⽤可能
25. AG-UIの特徴 ‧ユーザーから渡される⼊⼒を16種類の標準イベントとして扱う  ‧RUN_STARTED: ライフサイクル開始  ‧TEXT_MESSAGE_START: テキストメッセージ開始  ‧TEXT_MESSAGE_CONTENT: テキストメッセージのチャンクが到着 ‧イベントをストリームで送受信  ‧ユーザーのインタラクションにエージェントがリアルタイムで応答
26. 開発者は特定の技術に縛られずに スムーズ & インタラクティブなUXを提供できる
27. フレームワークのサポート状況
28. フロントエンドで使えるツール ‧@ag-ui/client  ‧AG-UI Cliend SDK ‧CopliotKit  ‧フロントエンド⽤エージェントフレームワーク  ‧AG-UI をサポート
29. まとめ ‧フロントエンドがAIエージェントに接続する⽅法を標準化するプロトコル ‧イベント駆動のアーキテクチャを基盤とし、AIエージェントのリアルタイ ム性を提供することでUXを向上させる ‧標準化により開発/運⽤⾯にも⼤きなメリット AG-UIはスムーズでインタラクティブなUXを実現する基盤技術
30. 参考 https://docs.ag-ui.com/ https://github.com/ag-ui-protocol/ag-ui https://webflow.copilotkit.ai/blog/introducing-ag-ui-the-protocol-where-agents-meet-users https://www.marktechpost.com/2025/05/12/ag-ui-agent-user-interaction-protocol-an-open-li ghtweight-event-based-protocol-that-standardizes-how-ai-agents-connect-to-front-end-appli cations/ https://medium.com/@rohanmistry231/ag-ui-the-protocol-powering-the-future-of-ai-fronten d-integration-2caf9bf0fb43 https://blog.dailydoseofds.com/p/agent-to-user-interaction-protocol https://www.copilotkit.ai/blog/how-to-add-a-frontend-to-any-ag2-agent-using-ag-ui-protocol https://note.com/panda_lab/n/n12d9fe86a52b