生成UIとは?AIが答えを画面の部品で返す仕組み

生成UIとは?AIが答えを画面の部品で返す仕組み

2026年10月7日、OpenAI は ChatGPT の Chat タブを GPT-6 に切り替え、答えを図やボタン、フォーム、グラフで組み立てる「Intelligent UI」を始めました。

有料プランはその日から、Free と Go は翌日から順に展開されています。

AI が答えの中身だけでなく、答えを見せる画面まで作る考え方は「生成UI(Generative UI)」と呼ばれています。

Google も 2025年11月に同じ名前の研究を発表し、Gemini アプリと Google 検索の AI モードに実験として組み込み始めました。

生成UIは「誰が画面の部品を作るか」で 3 つの型に分けると、ChatGPT・Gemini・開発者向けの仕組みの違いがまとめて見通せます。

GPT-6 and Intelligent UI for everyone(OpenAI)

生成UIは答えの見せ方までAIが決める考え方

これまでのチャット AI は、答えをマークダウンの文章で返し、決まった画面にそのまま流し込んでいました。

Google Research の論文はこの状態を、マークダウンの「文字の壁」と表現しています。

生成UIは、AI が内容と一緒にインターフェースそのものも生成するという考え方です。

Google Research のプロジェクトページには、「2 個のサイコロで 8 が出る確率」や「フラクタルとは何か」といった質問に、専用の画面で答えた例が並んでいます。

OpenAI の発表では、比較なら横並び、仕組みの説明なら操作できる図、と質問に合わせて形を選ぶと説明されています。

文章で答えるのが一番役に立つときは、文章で答えるとも書かれていて、何でも画面にするわけではありません。

Generative UI: A rich, custom, visual interactive user experience for any prompt(Google Research)

Generative UI: A rich, custom, visual interactive user experience for any prompt

誰が部品を作るかで3つの型に分かれる

生成UIと呼ばれる仕組みは、実装を見るとかなり幅があります。

違いが一番はっきり出るのは、画面の部品をあらかじめ人が用意しておくか、AI がその場で書くかです。

型部品を作る人AI が決めること例
部品を呼び出すアプリの開発者どの部品を、どのデータで出すかVercel AI SDK
部品を組み立てる部品集を用意する側部品の選び方と並べ方ChatGPT の Intelligent UI、A2UI
画面を丸ごと書くAI 自身HTML・CSS・JavaScript のすべてGoogle Research の実装、Gemini の dynamic view

下の型ほど AI の自由が大きく、その分だけ速さや安全面の手当てが重くなります。

開発者の部品をAIが呼び出す型

一番単純なのは、開発者が作った画面の部品を、AI がツール呼び出しで選ぶ型です。

ファンクションコーリングとは?AIが外部の道具を呼ぶ仕組み

Vercel の AI SDK のドキュメントは、生成UIを「ツール呼び出しの結果を React のコンポーネントにつなぐこと」と定義しています。

流れは 4 段階で、会話とツールを AI に渡し、AI がツールを呼ぶと判断し、ツールが実行されてデータを返し、そのデータを部品に渡して描きます。

次のコードは、ドキュメントの天気の例から、ツールの結果を部品に渡す部分だけを抜き出したものです。

{message.parts.map((part, index) => {
  if (part.type === 'text') {
    return <span key={index}>{part.text}</span>;
  }
  if (part.type === 'tool-displayWeather') {
    switch (part.state) {
      case 'input-available':
        return <div key={index}>Loading weather...</div>;
      case 'output-available':
        return (
          <div key={index}>
            <Weather {...part.output} />
          </div>
        );
      // 省略(output-error など)
    }
  }
})}

AI が選べるのは用意された部品だけなので、見た目は開発者が決めたとおりになります。

その代わり、部品を用意していない種類の答えは文章で返すことになります。

Generative User Interfaces(AI SDK)

Generative User Interfaces | AI SDK

部品の一覧から組み立てる型

2 つ目は、部品の一覧を渡しておき、組み合わせ方を AI に任せる型です。

ChatGPT の Intelligent UI はこの型で、OpenAI は「ネイティブで、ストリーミングできる部品のライブラリ」と、生成中の画面を処理するコンパイラを作ったと説明しています。

コンパイラがあるので、答えが全部できあがる前から画面が少しずつ表示されます。

学習の面では、内容・配置・図・操作の決め方を身につけさせ、作った画面の分かりやすさや抜けのなさも評価に入れたと説明しています。

Google が作り、CopilotKit やコミュニティも開発に加わっているオープンな仕様の A2UI も、同じ考え方を開発者向けに形にしたものです。

A2UI では、AI は「どの部品をどう並べるか」を JSON で書いて送り、アプリ側が自分の部品で描きます。

AI が送るのはデータで、実行できるコードは送らないので、許可した部品以外は画面に出ません。

2026年10月9日時点で、A2UI の本番向けの版は v0.9.1、v1.0 はリリース候補という位置づけです。

A2UI(公式サイト)

AIが画面のコードを丸ごと書く型

3 つ目は、AI が HTML・CSS・JavaScript を丸ごと書き、そのページをブラウザに表示する型です。

Google Research の実装は Gemini 3 Pro を使い、3 つの仕掛けを足しています。

  • 画像生成や Web 検索などのツールを呼べるサーバー
  • 目的・計画の立て方・例・書式・よくある失敗の避け方までを書いた細かいシステム指示
  • 指示だけでは直しきれないよくある不具合を、出力のあとで直す後処理

Gemini アプリの dynamic view はこの実装をもとにしていて、質問ごとに Gemini が画面を設計し、コードを書きます。

同じマイクロバイオームの話でも、5 歳の子に説明するときと大人に説明するときでは、内容も画面の機能も変える、と Google は書いています。

部品の一覧に縛られないので、ゲームや教材のような一点物も作れます。

Generative UI: LLMs are Effective UI Generators(プロジェクトページ)

ツールの側から画面を届けるMCP Apps

ここまでの 3 つの型は、チャットのアプリを作る側の話でした。

外部のツールが自分の画面をチャットに持ち込む方法として、MCP の拡張機能「MCP Apps」もあります。

MCP は AI と外部ツールをつなぐ共通の規格で、ツールが MCP サーバーとして機能を公開する仕組みです。

MCPとは?AIエージェントと外部ツールをつなぐ標準規格

MCP Apps では、サーバーが ui:// で始まる URI で HTML の画面を先に登録し、ツールの説明にその URI をひもづけます。

ツールが呼ばれると、チャットのアプリはその HTML を隔離した iframe の中に表示し、画面とアプリのやりとりは MCP と同じ JSON-RPC で行います。

画面を先に登録しておくので、アプリが実行前に中身を確かめられるのもこの方式の利点です。

画面から別のツールを呼ぶときに、ユーザーの承認を求めることもできます。

MCP の公式ブログによると、MCP Apps は 2025年11月に提案され、2026年1月に正式版になった最初の公式拡張です。

2026年3月の時点で、ChatGPT・Claude・VS Code・Goose などが対応しています。

MCP Apps: Extending servers with interactive user interfaces(MCP Blog)

MCP Apps: Extending servers with interactive user interfaces

Understanding MCP Extensions(MCP Blog)

Understanding MCP Extensions

人の評価では文章より好まれた

生成UIが本当に役に立つのかは、Google Research の論文が人の評価で確かめています。

LMArena から無作為に選んだ 100 個の質問について、答え方を 2 つずつ並べてどちらが良いかを選んでもらい、それぞれの結果を 2 人の評価者に見せました。

比べたのは、人の専門家がその質問のために作った Web サイト、Google 検索の 1 位の結果、マークダウン無しの文章、ふつうのマークダウンの出力、生成UIの 5 つです。

一番好まれたのは専門家が作ったサイトで、生成UIはそれに続き、ほかの答え方とは大きな差がつきました。

生成UIの Elo スコアは 1736.2 で、専門家のサイトには及ばないものの、少なくとも半数のケースでは同等と評価されました。

ただし、この評価は生成にかかる時間を考えに入れていません。

論文は、生成UIの出来が土台のモデルの性能に強く左右され、新しい Gemini ほど評価が上がり、不具合も大きく減ったとも報告しています。

安定した生成UIは、新しいモデルで現れてきた能力という位置づけです。

使う側と作る側の落とし穴

生成UIには、まだはっきりした弱点がいくつかあります。

1 つ目は速さで、Google は自分たちの実装について、結果が出るまでに 1 分以上かかることがあると書いています。

OpenAI の実装は、答えの完成を待たずに画面を出し始めるコンパイラで、この待ち時間を縮める作りです。

2 つ目は正確さで、Google のブログは出力にときどき不正確なところが混じることを認めています。

画面がきれいだと内容まで正しく見えやすいので、数字や手順は文章の答えと同じように確かめる必要があります。

3 つ目は安全面です。

AI や外部のサーバーから届いたコードを画面として動かすと、信頼できない相手のコードを手元で実行することになります。

A2UI はこれを「任意のコードを実行する危うさ」と呼んでコードを送らない形を選び、MCP Apps は iframe の隔離とユーザーの承認で守りを重ねています。

4 つ目は画面を出せない相手への備えです。

MCP Apps の提案は、画面に対応したツールでも、画面を表示できないアプリのために文章だけの答えを返すよう勧めています。

画面に頼らない答えも用意しておけば、どの環境でも最低限の内容は届きます。

最後に

生成UIは、AI が答えの中身に加えて、答えを見せる画面まで決める考え方です。

部品を呼ぶ、部品を組み立てる、画面を丸ごと書く、の順に AI の自由が増え、その分だけ速さと安全の手当てが重くなります。

ChatGPT の Intelligent UI は真ん中の型、Gemini の dynamic view は 3 つ目の型、MCP Apps はツールの側から画面を届ける仕組みと見ると、ニュースで出てくる名前を整理しやすくなります。

どの型でも、画面の見栄えと答えの正しさは別に確かめることを覚えておくと、新しい画面つきの答えにも落ち着いて向き合えます。

以上です。