概要
https://speakerdeck.com/syumai/practical-ai-chat-bot-ui-implementation
詳細内容
## 実践AIチャットボットUI実装入門
https://speakerdeck.com/syumai/practical-ai-chat-bot-ui-implementation
AIチャットボットがテキストだけでなく専用UIをレンダリングする新たなインタラクション方法を、AG-UIとMCP UIの二つの主要プロトコルを通じて解説する。
**Content Type**: 📖 Tutorial & Guide
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:5/5
**Main Journal**: 89/100 | **Annex Potential**: 88/100 | **Overall**: 88/100
**Topics**: [[AIチャットボットUI, AG-UI (CopilotKit), MCP UI, フロントエンド開発, インタラクションデザイン]]
本記事は、AIチャットボットのUIが単なるテキストベースのやり取りを超え、よりリッチなインタラクションへと進化している現状と実装方法を解説するスライド資料です。ユーザー体験の向上には、地図表示や商品選択のような「専用のUI」が不可欠であり、フロントエンド開発が不要になるという「AIチャットボット万能論」を明確に否定し、適切なUIの重要性を強調しています。
特に、2025年5月に登場した「AG-UI (CopilotKit)」と「MCP UI」の二つの主要なプロトコルを掘り下げています。AG-UIは、CopilotKitチームが開発したもので、AIエージェントとユーザー間のテキストメッセージ、ツール呼び出し、そして共有状態の同期（Shared State）までをプロトコルで扱い、アプリケーション全体を制御できる高い表現力を持つ一方、専用のフロントエンド実装が求められます。対照的にMCP UIは、Model Context Protocol (MCP) の上に構築された拡張プロトコルで、ツールの呼び出し結果としてHTMLをiframe内にレンダリングします。これは汎用性が高く、Postmanなど複数のMCP Hostで利用可能ですが、複雑な状態同期には向いていません。
Webアプリケーションエンジニアにとって、どちらを選択するかは、アプリケーション全体の制御が必要か（AG-UI）、あるいはツールの結果表示を簡易に制御したいか（MCP UI）によって判断すべきであり、具体的な実装例を通じてそれぞれの開発アプローチが示されています。AIとのインタラクション設計において、これらの技術的選択肢を理解し、ユーザーに最適な体験を提供するスキルが今後ますます重要になるでしょう。