AIエージェントがUIを生成する「Generative UI」を広く浅く理解したい

はじめに

「Generative UI」という単語をご存知でしょうか？

Generative UIは、生成AIやAIエージェントによってUIを生成する手法です。

AIエージェントを組み込んだアプリケーションにおいて、ユーザーとの対話中にAIが適切なUIを動的に生成します。

今回は、GenerativeUIの手法や仕様について広く浅くまとめてみます。

先に結論

• Generative UIは、AIエージェントがテキストだけでなく、UIそのものを動的に生成・選択する仕組み
• 3つのアプローチがあり、UIの自由度と制御のしやすさで使い分ける
  • Static：事前定義されたUI部品からAIが選択する
  • Declarative：事前定義されたUI部品をAIが組み合わせて構造を指定する
  • Open-Ended：AIがUIを制限なく自由に生成する
• 主な実現手段は以下の通り
  • Static：CopilotKit、AI SDK UI
  • Declarative：A2UI、Open-JSON-UI
  • Open-Ended：MCP Apps

Generative UIの概要 と 解決される課題

Generative UIの概要

まずはAIエージェントが組み込まれたチャットボットアプリで考えてみます。

よくある簡易なチャットボットアプリでは、ユーザーとAIエージェントの対話を主にテキストベースで行います。

イメージをつける例として、Claudeに天気を聞いてみましたが、天気を知りたいだけなのに長文は読みたくないですよね...

では、次に以下のようにAIエージェントが見やすいUIを表示してくれたらどうでしょう？
こちらの方が使いやすくないですか？これがGenerative UIのイメージです。

参考：https://docs.copilotkit.ai/aws-strands/generative-ui/backend-tools

Generative UIが解決する課題

簡単な内容ならテキストベースでも十分です。

しかし、以下のような複雑なユースケースでは、テキストベースだとユーザー体験が悪いという課題があります。

• 商品の購入
• 飛行機やお店の予約
• データの可視化

例えば、お店を予約する時にテキストで日付や時間帯を入力するのは面倒なのでカレンダーなどUIで入力した方が手っ取り早いですよね。

また、データを取り扱う場合はグラフなどで可視化してくれた方がユーザーとしては分かりやすいですよね。

これらの課題を解決するのがGenerative UIです。

Generative UIを実装するためのアプローチは3つ

AIエージェントのアプリにGenerative UIを組み込むには、どのような実現手段があるでしょうか。

Generative UI自体はあくまで手法なので、実装するためには仕様が必要です。
この仕様には種類がありまして、大きく3つのアプローチに別れています。

• Open-Ended
• Declarative
• Static

No	アプローチ	説明	代表例
1	Open-Ended	AIがHTMLなどのUIを自由に生成する	MCP Apps
2	Declarative	事前に用意されたUI部品をAIが組み合わせる	A2UI, Open-JSON-UI
3	Static	事前に用意されたUI部品からAIが選択する	CopilotKit, AI SDK UI

フロントエンド・PHPカンファレンス北海道2026にて、上記とは別に４つ目のアプローチが提案されていました。
アプローチとしては「Dynamic」と称して、AIにReact(JSX)を書かせるものです。これもまた夢が広がって、面白いですね！
https://speakerdeck.com/yusukebe/aishi-dai-nouihadokohexing-ku-sono2

アプローチ1. Open-Endedで自由にUIを生成する

このアプローチでは、AIエージェントがUIを自由に生成します。

Open-Endedにおける「UI」は、HTML、JavaScript、CSSなど、UIの描画に必要なコンテンツ一式を指します。

他のアプローチは「UI部品」や「UI部品の組み合わせ」で閉じますが、Open-Endedは「Webページ」そのものを生成できるため、より自由なUIを表現できます。

Open-Endedの具体的な実現手段として、よくMCPという仕組みが利用されています。

AIエージェントは、MCPのツール呼び出しを通じてUIを取得し、アプリケーションへ返します。

なお、MCP自体にGenerative UI専用の仕様は搭載されていないため、SDKがそれぞれMPCを拡張することで実現しています。

• Apps SDK
• MCP-UI

Apps SDK

「Apps SDK」は、OpenAIのプラットフォーム上でGenerative UIを使えるようにするためのSDKです。

OpenAIの製品（ChatGPTなど）はMCPにより外部と連携することが可能です。
Apps SDKは、MCPを拡張して、MCP経由でGenerative UI機能の利用を可能にします。

↓ 公式ページ

↓ 参考情報

MCP-UI

「MCP-UI」は、コミュニティが主導するGenerative UIの仕様です。

MCPを拡張してGenerative UIを実現するというコンセプトはApps SDKと同じですが、
UIの表示にiframeを使う点など、MCPの拡張方法が異なります。

↓ 公式ページ

MCP Apps

「Apps SDK」と「MCP-UI」をMCPの標準的な拡張仕様としてまとめたものが「MCP Apps」です。
両者を参考にしており、MCPにおけるGenerative UIの仕様標準化を目指しています。

「MCP Apps」は、元々2025年11月21日に提案されていましたが、2026年1月27日にMCP拡張として正式リリースされました。

↓ 参考させていただきた記事(感謝)

アプローチ2. DeclarativeでUIの組み合わせを生成する

このアプローチでは、AIエージェントが事前定義されたUI部品を組み合わせることで、UIを生成します。

この「UI部品の組み合わせ」はJSONで表現されます。

JSONはUIの設計図のようなものです。フロントエンドは、このJSONをもとにUIを構築することでGenerative UIを実現しています。

Declarativeの代表的な仕様として、以下の2つがあります。

• Open-JSON-UI
• A2UI

Open-JSON-UI

Open-JSON-UIは、OpenAIが規定した仕様で、AIエージェントがJSON形式で宣言的にUI定義を返します。

CopilotKItというフレームワークのページにはOpen-JSON-UIの説明があるのですが、Open-JSON-UI自体の公式ページが見つかりませんでした。

↓ CopilotKit内の説明ページ

https://docs.copilotkit.ai/generative-ui-specs/open-json-ui

A2UI

「A2UI(Agent to UI)」は、GoogleがGenerative UIのために策定した仕様です。

AIエージェントがJSON Lines形式のUIデータを生成し、フロントエンド側でそれを解析して
画面にUIを表示します。

{"surfaceUpdate": {"surfaceId": "booking", "components": [
  {"id": "title", "component": {"Text": {"text": {"literalString": "Book Your Table"}, "usageHint": "h1"}}},
  {"id": "datetime", "component": {"DateTimeInput": {"value": {"path": "/booking/date"}, "enableDate": true}}},
  {"id": "submit-text", "component": {"Text": {"text": {"literalString": "Confirm"}}}},
  {"id": "submit-btn", "component": {"Button": {"child": "submit-text", "action": {"name": "confirm_booking"}}}}
]}}

ストリーミングでの通信に対応しており、AG-UIなど共通的な接続プロトコルとも連携できます。

↓ 公式ページ

↓ A2UIのロードマップ

↓ 参考

アプローチ3. Staticで事前定義されたUIを選択する

このアプローチでは、フロントエンドで事前にUI部品を構築しておきます。
AIエージェントがその中から適切なものを選択し、UI部品に任意の値を渡して表示します。

他のアプローチに比べ、決められたUIを使用するため、制御はしやすいです。

Staticの代表的な実装手段として、CopilotKitやAI SDK UIといったライブラリ・フレームワークを利用するケースが多いです。

CopilotKit や AI SDK UIの独自仕様

AIエージェントのフロントエンドを構築するための選択肢として「CopilotKit」や「AI SDK UI」といったフレームワークやSDKを使用することが可能です。

↓ CopilotKitの場合

↓ AI SDK UIの場合

各アプローチのメリット・デメリットを考えてみる

それぞれのアプローチは、一長一短と思うので、少しメリットデメリットを考えてみます。

アプローチ	メリット	デメリット
Open-Ended	疎結合で再利用しやすい UIをMCPサーバー側で管理できるため、複数のホストやエージェントから使いやすい	アプリ全体との統一感を出しにくい UIがiframe内で独立するため、デザインやレイアウトをそろえにくい
Declarative	柔軟にUIを組み立てられる AIが複数のUIを組み合わせて構造を定義できる	設計コストがかかる 使えるUI表現はスキーマの範囲内に限られるため、事前にUIカタログの設計・管理が必要
Static	UI品質が安定しやすい アプリ側でコンポーネントや引数を管理するため、表示されるUIを制御しやすい	柔軟性には限界がある AIが使えるUIは、基本的に事前に用意したUIに限られる

まとめ

今回は、Generative UIについて全体像を理解するため、簡単にまとめてみました。

複数のアプリケーションにUIを展開したい場合や、すでにMCPサーバーを運用していて
MCPの機能拡張としてUIも提供したい場合は、Open-EndedでMCPとして展開するのが
良い選択肢になると思います。

Generative UIで実現したいことが明確でない、あるいは規模が大きくない場合は、
まずStaticから始めるのが良いかなと思いました。

今回の記事を書いたことで、なんとなくイメージはついてきたので、次は実際にAIエージェントに組み込んでみたいです。

そのほか参考