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

はじめに

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

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

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

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

先に結論

• GenerativeUIを実装するために２つのアプローチがある
  1. 既存のUIからAIエージェントが適切なUIを選択する
  2. AIエージェントが動的にUIの情報を生成する
• アプローチ1：「MCP Apps」がMCPの公式仕様として策定中
• アプローチ2：「A2UI」がGenerativeUIの標準プロトコルとして公開された

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を実装するためのアプローチは2つ

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

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

1. 既存のUIからAIエージェントが適切なUIを選択する
2. AIエージェントが動的にUIの情報を生成する

アプローチ1. 既存のUIからAIエージェントが適切なUIを選択する

このアプローチでは、あらかじめ構築されたUIの中からAIエージェントが状況に応じて適切なUIを選択します。

ここでいうUIは、WebでいうHTML、JavaScript、CSSなど、UIの描画に必要な静的なコンテンツ一式です。

AIエージェントは、MCP経由でUIの情報へアクセスし、適切なUIをアプリケーションへ返します。

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

• Apps SDK
• MCP-UI

現状は、これらを「MCP Apps」というMCPの標準的な仕様とするため、以下のIssueで取り組みが進んでいます。

アプローチ2. AIエージェントが動的にUIの情報を生成する

このアプローチでは、アプリケーションがUIを表示するために必要な情報をAIエージェントが生成します。

そのため、AIエージェントがHTMLやJavaScriptといったコードそのものを生成するわけではないです。

AIエージェントは「宣言的」にUIを定義し、フロントエンド側でその定義を元にUIを組み立てます。

こちらのアプローチは、以下のようなSDK、フレームワークを利用することで実装できます。

• Open-JSON-UI
• AI SDK UI
• CopilotKIt

そして、2025年12月に、これらの共通仕様となる「A2UI」をGoogleが策定しています。

最終的には、以下のようなイメージになります。トレンドを抑えるなら、「A2UI」と「MCP Apps」を追うのが良いかと思っています。

アプローチ1を実現するための手段

Apps SDK

「Apps SDK」は、ChatGPTのチャット内でGenerative UIを使えるようにするためのSDKです。

ChatGPTは、MCPにより外部と連携することが可能です。
Apps SDKは、MCPを拡張して、MCP経由でGenerartive AI機能の利用を可能にします。

↓ 公式ページ

↓ 参考情報

MCP-UI

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

MCPを拡張してGenerativeUIを実現するというコンセプトは、前述した「Apps SDK」と同じですが、MCPの拡張方法が異なります。

なお、フロントエンドにおけるGenerative UIの表示は、iframeを介して行われます。

↓ 公式ページ

MCP Apps

「MCP Apps」は、MCPを標準的にGenerativeUIの機能を拡張する仕様であり、2025年11月21日に提案されました。

前述のApps SDK、MCP-UIの両方が参考にされており、MCPの仕様を標準化することを目指しています。

↓ GitHubで提案されている仕様

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

アプローチ2を実現するための手段

Open-JSON-UI

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

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

↓ CopilotKit内の説明ページ

CopilotKit や AI SDK UIの独自仕様

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

↓ CopilotKitの場合

↓ AI SDK UIの場合

A2UI

「A2UI(Agent to UI)」は、Generative UIのための共通プロトコルです。

フロントエンドとAIエージェント間は、JSON LinesのUIデータを受け渡します。
AIエージェントがSON Lines形式のUIデータを生成し、フロントエンド側でJSON Linesを解析して、実際に画面へ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"}}}}
]}}

AIエージェントとUIのやりとりは、ストリーミングで行われ、AG-UIなど共通的な接続プロトコルにも対応しています。

ちなみにUI側は「Lit」「Anguler」「Flutter」はA2UIに対応していますが、「React」など未対応です。一応、2026年第1四半期には対応するらしいので、個人的には少し様子見ですね。

↓ 公式ページ

↓ A2UIのロードマップ

↓ 概要を知るのに以下の記事が参考になりました。(感謝)

まとめ

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

現状は、MCP Appsは共通仕様の策定中！A2UIはReactを未対応！という感じなので、もう少しするとデファクトスタンダードの手法が確立するのかなという感じですね。

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

そのほか参考