OpenGenerativeUIとはエージェントがUIを自動生成するOSS

AIチャットを超え、エージェントがUIそのものを生成する時代が来た。

CopilotKitが「OpenGenerativeUI」をオープンソースで公開した。LangGraphエージェントがHTMLやSVGをその場で生成し、サンドボックス化されたiframe内にリアルタイムで描画する仕組みだ。

この記事でわかること：

OpenGenerativeUIが解決する課題と仕組み
useComponentフックによるiframe描画の流れ
生成できるビジュアルの種類と技術スタック
3コマンドで動かすセットアップ手順
Generative UIの3パターンにおける位置づけ

チャットだけでは足りない理由

AIエージェントは「考えること」が得意になった。LangGraphやAutoGenを使えば、複数ステップの計画を立て、ツールを呼び、結果を判断できる。問題は出力だ。テキストのみの回答では、アルゴリズムの動作は理解しにくい。グラフや図解を見せたいとき、従来は開発者がコンポーネントを手書きするしかなかった。エージェントが「バブルソートのアニメーションを見せて」と指示されても、テキスト説明しか返せないのが現状だった。

OpenGenerativeUIはこの制約を外す。エージェントがHTML・SVG・JavaScriptを直接生成し、フロントエンドがそれを受け取ってiframe内で動かす。

https://github.com/CopilotKit/OpenGenerativeUI

どう動くのか

仕組みは4ステップで完結する。

ユーザーが「バブルソートを可視化して」と入力する
LangGraphエージェントがHTML/JavaScriptを生成し、widgetRendererというツール呼び出しとして返す
フロントエンドのuseComponentフックがそのツール呼び出しを受け取る
サンドボックス化されたiframeにHTMLを注入する。ResizeObserverが高さを自動調整するため、コンテンツのサイズに関わらず表示が崩れない

エージェントは「何を描くか」を決め、フロントエンドは「どこに表示するか」を管理する。UIの実装責任がエージェント側に移る構造だ。

生成できるビジュアルの種類

GitHub READMEが公開している判断マトリクスによると、生成可能なUIは幅広い。

アルゴリズムの動作（二分探索、BFS/DFS、ソートなど）はSVGとHTML Canvasで描画する。3DシーンはThree.js、ネットワークグラフはD3.js、各種チャートはChart.jsを使う。フォーム、数学的シミュレーション、音楽シンセサイザーにも対応している。

一方、「コードの解説」や「感情的なサポート」といったテキストで十分な質問には通常のチャット応答を返す。状況に応じて視覚化の要否を判断する設計で、すべての出力をUIに変換するわけではない。

アーキテクチャと技術スタック

Turborepoのモノレポ構成で、フロントエンドとエージェントの2つのアプリが独立して動く。

アプリ	技術構成
フロントエンド（`apps/app`）	Next.js 16、React 19、Tailwind CSS 4、CopilotKit v2
エージェント（`apps/agent`）	LangGraph（Python）、GPT-5.4

CopilotKitのuseComponentフックが、エージェントの出力HTMLを受け取って描画する中心的な役割を担う。フックをwidgetRendererという名前で登録し、エージェント側からはツール呼び出しとして参照する。

セットアップ手順

リポジトリをクローン後、3コマンドで起動できる。

make setup   # 依存パッケージのインストールと .env テンプレート生成
# apps/agent/.env に OpenAI の API キーを記入
make dev     # フロントエンド・エージェント・MCP サーバーを同時起動

起動後は http://localhost:3000 でUIが、http://localhost:8123 でエージェントが動作する。pnpm dev でも同じ操作が可能だ。

Generative UIの3パターンにおける位置づけ

CopilotKitはGenerative UIを3段階のパターンで整理している。OpenGenerativeUIは最も自由度の高い「Open-ended（オープンエンド型）」に分類される。

「Static（静的型）」はフロントエンドが用意したコンポーネントをエージェントが選ぶだけで、UIの自由度は低い。「Declarative（宣言型）」はA2UIやOpen-JSON-UIといったJSON仕様をエージェントが返し、フロントエンドがそれをレンダリングする。OpenGenerativeUIが採用するOpen-ended型は、エージェントが完全なHTML/SVGを生成してiframeに投影するため、最も表現の幅が広い。

その分、スタイルの一貫性維持やセキュリティ対策はiframeのsandbox属性の設定に依存する。どのようなHTMLでも描画できる反面、信頼できないエージェント出力をそのまま流し込む運用では属性の適切な制限が必要になる。

ライセンスと利用条件

MITライセンスで公開されており、商用利用を含めて無償で使える。2026年5月時点でGitHubスターは406、フォーク数は39だ。

まとめ

OpenGenerativeUIは、チャット回答を超えたAIインターフェースを実装するための出発点になる。エージェントが判断し、UIがリアルタイムで応じる構造は、従来の静的なフロントエンド設計を根本から変える可能性がある。LangGraphとCopilotKitを使っている開発者であれば、make setup と make dev の2コマンドですぐに試せる。