HTMLジェネレーティブUI最新動向2026/11/03

2026-10-29 CopilotKit アップデート起点 2026-11-02 時点のスナップショット AG-UI / A2UI / MCP Apps / OpenUI / json-render

ジェネレーティブUIは
「モデルが画面を組み立てる」時代に入った

エージェントがテキストで答える代わりに、チャート・地図・フォーム・カードといった実物のUIをその場で生成して返す仕組み ── ジェネレーティブUI。その土台の規格が出揃い、勝ちパターンも見えてきた。CopilotKit の大型アップデートを起点に、規格の地図・各陣営の勢い・実務への影響を整理する。

POINT 01

方式は収束したモデルに自由なHTMLを書かせず、事前登録したコンポーネントカタログから選ばせ、スキーマ検証を通す ── 全陣営共通の勝ちパターン。

POINT 02

置き場所で規格が分かれる自前アプリ内は AG-UI、ChatGPT / Claude など他人のホスト内は MCP Apps が公式標準として確立。

POINT 03

ペイロード形式は未決着A2UI・MCP Apps・OpenUI・json-render が並走中。ただし大半はまだ experimental で、薄いラッパーを挟むのが安全。

規格の地図 ── 3層＋ペイロード

誰と誰の間の通信かで層が分かれる

混乱の元は、性質の違う規格が同じ「ジェネレーティブUI」の看板で語られること。実際には接続の層（トランスポート）と、その上で運ばれるUIの記述形式（ペイロード）は別物で、層ごとに担当が決まっている。

モデル ⇔ ツールツール・データへの接続

MCP Model Context Protocol

▲ ▼

エージェント ⇔ エージェントエージェント間の委譲・連携

A2A Agent2Agent

▲ ▼

エージェント ⇔ ユーザーイベントストリームで UI まで届ける

AG-UI CopilotKit 発この層の上で、下のペイロード形式が運ばれる ↓

ペイロードUI そのものの記述形式（競合中）

A2UI Google MCP Apps MCP 公式拡張 OpenUI Thesys json-render Vercel Labs

読み方: 「どの規格を採用すべきか」は1つの問いではない。自前アプリにエージェントを埋め込むなら AG-UI（トランスポート）＋ペイロード形式の選択、ChatGPT や Claude のような他人のホスト内に UI を出すなら MCP Apps、と置き場所で答えが変わる。

今回の主役 ── CopilotKit（2026-10-29）

土台は Google の A2UI 1.0 / experimental 扱い

AG-UI の発信元である CopilotKit が、生成 UI のための部品群を一式そろえた大型アップデートを出した。目玉は「カタログ」「Surfaces」「Markdown mode」の3点。

Standard Catalog

70 種

標準コンポーネントカタログ。Recharts のチャート、MapLibre の地図、フォーム、商品カード等を1プロパティで有効化できる。エージェントはこの棚から選んで組み立てる。

Surfaces

チャットの外に描ける

ページの一部をラップすると、エージェントがチャット欄以外の任意の場所に UI を描画できる。領域ごとに使える部品を制限でき、自前コンテンツを fallback として置ける。

Markdown Mode

返信文に直接 UI を書く

従来のツールコール方式に加え、返信テキストの中に UI を埋め込んで一緒にストリームする方式を追加。文章と UI が混ざった応答を自然に流せる。

カタログは「合成」できる ── extends / omit / overrides

標準カタログは出発点で、自前コンポーネントと組み合わせる前提の設計になっている。特に overrides で標準部品を自社デザインシステムの実装に差し替えられるのが実務上大きい。

// 概念図: 標準カタログを自前の部品で合成する
const catalog = createCatalog({
  extends: standardCatalog,        // 70種を土台にする
  omit: ['LegacyChart'],            // 使わせない部品を外す
  overrides: {
    DataTable: MyDesignSystemTable,   // 自社DSの実装に差し替え
    Map: MyMapComponent,
  },
  custom: [PriceSimulator],           // 独自部品を追加
});

2つの生成方式

モデルがツールを選択→引数をスキーマ検証→クライアントがネイティブ部品で描画

UI は構造化された呼び出しとして返る。検証しやすく決定的だが、文章と UI は別チャネルになり、混ざった応答の表現はしにくい。

モデルが返信文を生成→文中の UI 記述も一緒にストリーム→到着順にテキストと UI を描画

文章の流れの中にチャートやカードが差し込まれる応答が作れる。ストリーミング表示との相性が良い反面、検証やサニタイズの設計はより重要になる。

成熟度の注意: 土台の A2UI 1.0 自体が仕様確定作業中のため、この機能群は experimental 扱い。API が変わる前提で使うこと（→ 実務への影響）。

ペイロード形式の比較

UI を「どう記述して、どう描くか」の競合

トランスポートが固まりつつある一方、UI の記述形式は4方式が並走している。最大の違いは描画モデル ── 宣言的 JSON をクライアント側のネイティブ部品で描くか、サーバが配った HTML を iframe で描くか。

形式	描画方式	向いている場所	成熟度	メモ
A2UIGoogle 発	宣言的 JSON をクライアントのネイティブコンポーネントで描画	自前アプリ（CopilotKit 等の土台）	仕様確定中	1.0 の仕様確定作業中。カタログ前提の設計で、表現は部品の範囲内に制限される
MCP AppsMCP 公式拡張	サーバが HTML を配布し、ホスト側で iframe 描画	ChatGPT / Claude など他人のホスト内	安定版あり	2026-01-26 に MCP 初の公式拡張として安定版。ChatGPT の Apps SDK のパターンが upstream されたもの
OpenUIThesys	専用言語で UI を記述し、ランタイムが描画	自前アプリ	発展途上	独自の記述言語を採る陣営。エコシステムはまだ小さい
json-renderVercel Labs	JSON ツリーを React コンポーネントにマッピングして描画	自前アプリ（React 前提）	発展途上	Vercel AI SDK 周辺の文脈。React / Next.js スタックとの親和性が高い

形式は割れても、方式は1つに収束している: どの陣営も「モデルに自由に HTML を書かせる」道は選んでいない。事前登録したコンポーネントカタログからモデルが選び、スキーマ検証を通したものだけを描く ── 制約こそが、生成 UI を本番に出せる理由になっている。

組み立ての仕組み ── ミニデモ

カタログ選択 → 検証 → 描画を疑似体験

プロンプトを選ぶと、モデルがカタログから部品を選び、検証済みの JSON（ペイロード）が組み上がって右に流れ、左に UI として描画される ── という一連の流れを再現したもの。実際の生成ではなく、仕組みの説明用。

USER PROMPT

ポイント: モデルが返すのは HTML ではなく「どの部品を、どの props で」という宣言だけ。描画とインタラクションはクライアント側の実装が担うため、見た目はホスト側のデザインシステムに揃う。

勢いの整理

どこが固まって、どこが未決着か

AG-UI自前アプリ向けトランスポート

収束しつつある

MCP Appsホスト内 UI の公式標準

確立

ペイロード形式A2UI / OpenUI / json-render ほか

勝敗未確定

カタログ方式そのもの全陣営共通のパターン

事実上の標準

AG-UI の広がり

Microsoft Agent Framework、Google ADK、Mastra、LangChain などが統合済みで、自前アプリ向けのイベントストリームとしては事実上の中心になりつつある。

ただし中立団体ではなく CopilotKit 主導のプロジェクトである点は割り引いて見る必要がある。

出来事の時系列

2026-01-26

MCP Apps が MCP 初の公式拡張として安定版に。ホスト内 UI の標準が確立

2026-09

AG-UI 1.0 公開（二次ソース・ベンダー申告ベースの日付）

2026-10-29

CopilotKit が標準カタログ70種・Surfaces・Markdown mode を発表。土台は A2UI 1.0

実務への影響 ── フロントエンドの仕事はどう変わるか

コンポーネントに「モデル向けの説明」を持たせるデザインシステムの各コンポーネントに description とスキーマ付き props を整備することが、生成 UI 対応の前提になる。カタログ整備 = 新しい棚卸し作業。
ページ設計が「領域＋fallback」になる固定レイアウトを設計するのではなく、エージェントに書き換えられうる領域（Surfaces）と、その領域に何も来なかったときの自前コンテンツを設計する仕事に変わる。
インタラクションはブラウザ内で完結させるスライダー操作や価格の再計算のような細かい対話はクライアント側で処理し、モデルのトークンを消費しないのが推奨形。モデルは「組み立て」まで、操作はローカルで。
薄いラッパーを挟んで API 変更を吸収するA2UI も CopilotKit の新機能群も experimental が多い。自前コードがベンダー API に直結しないよう、間に自前の抽象を1枚挟む。
置き場所ごとに標準が違う前提で選ぶ自前アプリは AG-UI 系、他人のホスト（ChatGPT / Claude）に出す UI は MCP Apps。「1つの規格に全賭け」ではなく、出口ごとに使い分ける。

注意点 ── 数字の出どころ

AG-UI 1.0 の公開時期（2026-09）や標準カタログの「70種」といった数字は、二次ソースおよびベンダーの自己申告ベースで、一次資料での裏取りが済んでいないものを含む。また A2UI 1.0 は仕様確定作業中のため、CopilotKit の今回の機能群も experimental として扱われている。採用判断の前に、各プロジェクトの公式ドキュメントとリリースノートで現行の状態を確認すること。

総括すると ── ジェネレーティブUIは「実験的なデモ」の段階を抜け、規格の層構造と勝ちパターン（カタログ方式）が定まった段階にある。残る勝負はペイロード形式の標準化と、各デザインシステム側のカタログ整備の速度。フロントエンドエンジニアにとっては、コンポーネントを「人間が使う部品」であると同時に「モデルが選ぶ部品」として設計する視点が、これからの差になるところ。

ジェネレーティブUI最新動向

2026/11/03HTML

2026-10-29 CopilotKit アップデート起点 2026-11-02 時点のスナップショット AG-UI / A2UI / MCP Apps / OpenUI / json-render

ジェネレーティブUIは

「モデルが画面を組み立てる」時代に入った

エージェントがテキストで答える代わりに、チャート・地図・フォーム・カードといった実物のUIをその場で生成して返す仕組み ── ジェネレーティブUI。その土台の規格が出揃い、勝ちパターンも見えてきた。CopilotKit の大型アップデートを起点に、規格の地図・各陣営の勢い・実務への影響を整理する。

POINT 01

方式は収束したモデルに自由なHTMLを書かせず、事前登録したコンポーネントカタログから選ばせ、スキーマ検証を通す ── 全陣営共通の勝ちパターン。

POINT 02

置き場所で規格が分かれる自前アプリ内は AG-UI、ChatGPT / Claude など他人のホスト内は MCP Apps が公式標準として確立。

POINT 03

ペイロード形式は未決着A2UI・MCP Apps・OpenUI・json-render が並走中。ただし大半はまだ experimental で、薄いラッパーを挟むのが安全。

規格の地図 CopilotKit 2026-10-29 ペイロード形式の比較組み立ての仕組み（デモ）勢いの整理実務への影響注意点

規格の地図 ── 3層＋ペイロード

誰と誰の間の通信かで層が分かれる

混乱の元は、性質の違う規格が同じ「ジェネレーティブUI」の看板で語られること。実際には接続の層（トランスポート）と、その上で運ばれるUIの記述形式（ペイロード）は別物で、層ごとに担当が決まっている。

モデル ⇔ ツールツール・データへの接続

MCP Model Context Protocol

▲ ▼

エージェント ⇔ エージェントエージェント間の委譲・連携

A2A Agent2Agent

▲ ▼

エージェント ⇔ ユーザーイベントストリームで UI まで届ける

AG-UI CopilotKit 発この層の上で、下のペイロード形式が運ばれる ↓

ペイロードUI そのものの記述形式（競合中）

A2UI Google MCP Apps MCP 公式拡張 OpenUI Thesys json-render Vercel Labs

読み方: 「どの規格を採用すべきか」は1つの問いではない。自前アプリにエージェントを埋め込むなら AG-UI（トランスポート）＋ペイロード形式の選択、ChatGPT や Claude のような他人のホスト内に UI を出すなら MCP Apps、と置き場所で答えが変わる。

今回の主役 ── CopilotKit（2026-10-29）

土台は Google の A2UI 1.0 / experimental 扱い

Standard Catalog

70 種

標準コンポーネントカタログ。Recharts のチャート、MapLibre の地図、フォーム、商品カード等を1プロパティで有効化できる。エージェントはこの棚から選んで組み立てる。

Surfaces

チャットの外に描ける

ページの一部をラップすると、エージェントがチャット欄以外の任意の場所に UI を描画できる。領域ごとに使える部品を制限でき、自前コンテンツを fallback として置ける。

Markdown Mode

返信文に直接 UI を書く

従来のツールコール方式に加え、返信テキストの中に UI を埋め込んで一緒にストリームする方式を追加。文章と UI が混ざった応答を自然に流せる。

カタログは「合成」できる ── extends / omit / overrides

標準カタログは出発点で、自前コンポーネントと組み合わせる前提の設計になっている。特に overrides で標準部品を自社デザインシステムの実装に差し替えられるのが実務上大きい。

// 概念図: 標準カタログを自前の部品で合成する

const catalog = createCatalog({

extends: standardCatalog, // 70種を土台にする

omit: ['LegacyChart'], // 使わせない部品を外す

overrides: {

DataTable: MyDesignSystemTable, // 自社DSの実装に差し替え

Map: MyMapComponent,

custom: [PriceSimulator], // 独自部品を追加

});

2つの生成方式

ツールコール方式（従来） Markdown mode（新）

モデルがツールを選択→引数をスキーマ検証→クライアントがネイティブ部品で描画

UI は構造化された呼び出しとして返る。検証しやすく決定的だが、文章と UI は別チャネルになり、混ざった応答の表現はしにくい。

モデルが返信文を生成→文中の UI 記述も一緒にストリーム→到着順にテキストと UI を描画

成熟度の注意: 土台の A2UI 1.0 自体が仕様確定作業中のため、この機能群は experimental 扱い。API が変わる前提で使うこと（→ 実務への影響）。

ペイロード形式の比較

UI を「どう記述して、どう描くか」の競合

トランスポートが固まりつつある一方、UI の記述形式は4方式が並走している。最大の違いは描画モデル ── 宣言的 JSON をクライアント側のネイティブ部品で描くか、サーバが配った HTML を iframe で描くか。

形式描画方式向いている場所成熟度メモ

A2UIGoogle 発宣言的 JSON をクライアントのネイティブコンポーネントで描画自前アプリ（CopilotKit 等の土台）仕様確定中 1.0 の仕様確定作業中。カタログ前提の設計で、表現は部品の範囲内に制限される

MCP AppsMCP 公式拡張サーバが HTML を配布し、ホスト側で iframe 描画 ChatGPT / Claude など他人のホスト内安定版あり 2026-01-26 に MCP 初の公式拡張として安定版。ChatGPT の Apps SDK のパターンが upstream されたもの

OpenUIThesys 専用言語で UI を記述し、ランタイムが描画自前アプリ発展途上独自の記述言語を採る陣営。エコシステムはまだ小さい

json-renderVercel Labs JSON ツリーを React コンポーネントにマッピングして描画自前アプリ（React 前提）発展途上 Vercel AI SDK 周辺の文脈。React / Next.js スタックとの親和性が高い

形式は割れても、方式は1つに収束している: どの陣営も「モデルに自由に HTML を書かせる」道は選んでいない。事前登録したコンポーネントカタログからモデルが選び、スキーマ検証を通したものだけを描く ── 制約こそが、生成 UI を本番に出せる理由になっている。

組み立ての仕組み ── ミニデモ

カタログ選択 → 検証 → 描画を疑似体験

USER PROMPT

今期の売上を見せて近くの電源のある店は？来週の面談を予約したい

勢いの整理

どこが固まって、どこが未決着か

AG-UI自前アプリ向けトランスポート

収束しつつある

MCP Appsホスト内 UI の公式標準

確立

ペイロード形式A2UI / OpenUI / json-render ほか

勝敗未確定

カタログ方式そのもの全陣営共通のパターン

事実上の標準

AG-UI の広がり

Microsoft Agent Framework、Google ADK、Mastra、LangChain などが統合済みで、自前アプリ向けのイベントストリームとしては事実上の中心になりつつある。

ただし中立団体ではなく CopilotKit 主導のプロジェクトである点は割り引いて見る必要がある。

出来事の時系列

2026-01-26

MCP Apps が MCP 初の公式拡張として安定版に。ホスト内 UI の標準が確立

2026-09

AG-UI 1.0 公開（二次ソース・ベンダー申告ベースの日付）

2026-10-29

CopilotKit が標準カタログ70種・Surfaces・Markdown mode を発表。土台は A2UI 1.0

実務への影響 ── フロントエンドの仕事はどう変わるか

コンポーネントに「モデル向けの説明」を持たせるデザインシステムの各コンポーネントに description とスキーマ付き props を整備することが、生成 UI 対応の前提になる。カタログ整備 = 新しい棚卸し作業。

ページ設計が「領域＋fallback」になる固定レイアウトを設計するのではなく、エージェントに書き換えられうる領域（Surfaces）と、その領域に何も来なかったときの自前コンテンツを設計する仕事に変わる。

インタラクションはブラウザ内で完結させるスライダー操作や価格の再計算のような細かい対話はクライアント側で処理し、モデルのトークンを消費しないのが推奨形。モデルは「組み立て」まで、操作はローカルで。

薄いラッパーを挟んで API 変更を吸収するA2UI も CopilotKit の新機能群も experimental が多い。自前コードがベンダー API に直結しないよう、間に自前の抽象を1枚挟む。

置き場所ごとに標準が違う前提で選ぶ自前アプリは AG-UI 系、他人のホスト（ChatGPT / Claude）に出す UI は MCP Apps。「1つの規格に全賭け」ではなく、出口ごとに使い分ける。

注意点 ── 数字の出どころ

AG-UI 1.0 の公開時期（2026-09）や標準カタログの「70種」といった数字は、二次ソースおよびベンダーの自己申告ベースで、一次資料での裏取りが済んでいないものを含む。また A2UI 1.0 は仕様確定作業中のため、CopilotKit の今回の機能群も experimental として扱われている。採用判断の前に、各プロジェクトの公式ドキュメントとリリースノートで現行の状態を確認すること。

総括すると ── ジェネレーティブUIは「実験的なデモ」の段階を抜け、規格の層構造と勝ちパターン（カタログ方式）が定まった段階にある。残る勝負はペイロード形式の標準化と、各デザインシステム側のカタログ整備の速度。フロントエンドエンジニアにとっては、コンポーネントを「人間が使う部品」であると同時に「モデルが選ぶ部品」として設計する視点が、これからの差になるところ。

2026-11-02 時点の調査スナップショット。CopilotKit 2026-10-29 アップデート、A2UI、AG-UI、MCP Apps（2026-01-26 安定版）、OpenUI、json-render の公開情報をもとに整理。仕様は変動が速いため、最新の状態は各公式ドキュメントを参照。