コンポーネントを超え MCP アプリ向け生成 UI の設計

コンポーネントを超えた UI の未来：AI と人間が共創する「生成型インターフェース」の到来

LLM が人間のフロントエンドエンジニアよりも優れたコードを瞬時に生成できるようになった今、従来の静的なコンポーネントや宣言的 UI はもはや限界を迎えています。Postman のシニアエンジニアであるルベン・カサス氏は、AI が一方的に出力するだけでなく、人間と AI が共有キャンバス上で対話しながら UI を構築していく「共創型体験」が次世代の標準になると説きます。

貧乏人のコーディングから「JARVIS」への転換点

2022 年 11 月、ChatGPT の登場で私たちは「コンポーネント作成」を AI に任せる時代に入りました。しかし、当時はまだコードブロックをコピー＆ペーストし、修正と試行錯誤を繰り返す「貧乏人のコーディング」が主流でした。

その後、GPT-5.2 や Opus 4.5 のような高性能モデルの登場により状況は劇的に変化しました。これらのモデルは単にコードを書くだけでなく、アクセシビリティやアニメーションまで考慮した、動作する UI を一瞬で生成できるようになりました。

「私より優れたフロントエンドコードを生成できる時代になった。しかし、なぜ私たちはまだ古い静的な UI パラダイムに縛られているのか？」

カサス氏はこの現状に対し、浮遊ウィンドウや直感的な「JARVIS の瞬間」がまだ実現していないのは、技術の限界ではなく、私たちが新しいコンピューターのインターフェースを想像しきれていないからだと指摘します。これは 1930 年代にテレビが登場した際、最初の番組が単なるカメラ付きラジオだったことと同じです。

UI 生成のパラダイム進化：静的・宣言的・生成型

現在の UI 生成は、以下の 3 つの段階を経て進化しています。

1. 静的コンポーネント方式（現在主流）

現在の多くの AI エージェントはこの方式を採用しています。AI はオーケストレーターとして機能し、ツール呼び出しの結果を「開発者が事前に定義した静的なコンポーネント」に渡すだけです。

• 仕組み: エージェントがデータを生成 → 事前定義された React コンポーネントにマッピング → クライアントでレンダリング
• 例: AGUI プロトコルや Goose の Auto Visualizer など。データ可視化のコンポーネントは AI が作成したものではなく、チームが用意したテンプレートです。
• 課題: 柔軟性に欠け、AI の能力を最大限に引き出せていません。

2. 宣言的 UI（JSON/YAML 制御）

次に進化したのが「宣言的 UI」です。コンポーネント自体は静的なままですが、その構成を JSON や YAML で記述することで動的・パーソナライズ化を実現します。

• 仕組み: AI が JSON/YAML を生成 → テンプレートエンジンが解釈して UI に変換
• 例: Vercel の「JSON Render」や Netflix のホーム画面。ユーザーごとにカスタマイズされた UI を提供できます。
• 特徴: デザインシステムの整合性を保ちつつ、予測可能性とコスト効率のバランスが取れています。

3. 生成型 UI（次世代）

カサス氏が最も注目しているのが、LLM が HTML/CSS/JavaScript コードをオンデマンドで直接生成する「生成型 UI」です。

• 仕組み: AI がレイアウトレンダリングエンジンに頼らず、その場でコードを生成してクライアントへ配信
• 実験例: 天気情報を取得し、それを元にジョークと独自の UI を同時に生成するエージェント。コンポーネントの制約を受けず、創造的なインターフェースが瞬時に現れます。
• 最大の課題: サードパーティや AI が生成したコードをそのまま実行するのはセキュリティリスクが高すぎます。

MCP アプリが「生成型 UI」の標準配送手段となる理由

生成されたコードを安全にユーザーに届けるためには、強力なサンドボックス化と配信インフラが必要です。ここで注目すべきなのがMCP（Model Context Protocol）アプリです。

「MCP アプリは、生成された UI コードを安全に実行・配信するための標準的なインフラとして機能する。」

MCP アプリが優れている点は以下の通りです：

• セキュリティ: デフォルトでダブル iFrame によりサンドボックス化されており、悪意のあるコードや誤った動作からユーザーを守ります。
• 認証と連携: ユーザーの認証情報管理や、エージェントとのツール呼び出しを標準的にサポートしています。
• 即戦力: Anthropic が自社のビジュアライザー機能に MCP アプリを採用したように、開発者は追加の実装コストをかけずにこれらの機能を活用できます。

これにより、AI が生成した UI を「スーパーアプリ（ChatGPT や Claude 内）」や「チャットインターフェース」を超えた形で、安全かつ動的に配信する時代が到来します。

チャットを超えた未来：人間と AI の共創型体験

現在の「すべてのアプリにチャット機能を追加する」という動きは過渡期に過ぎません。真の未来は、AI が一方的に UI を出力するのではなく、人間と AI が共有キャンバス上で対話しながら UI を構築していく共創型体験です。

例えば「Excalidraw MCP アプリ」のようなツールでは、人間と AI が同じ空間で作業できます。ユーザーは AI に指示を出すだけでなく、直接キャンバス上の要素をドラッグ＆ドロップで修正し、AI はその変更に応じてリアルタイムで UI を調整します。

「コンポーネントを超えて、生成 UI の未来はより協働的な体験となるでしょう。」

この共創型インターフェースこそが、新しいコンピューターのための成熟した UI 言語です。私たちはまだ初期段階にいますが、AI と人間の役割分担が再定義され、開発者のワークフローやエンドユーザーの体験設計が根本から書き換えられる時が近づいています。

まとめ

LLM の進化により、UI コード生成はもはや「人間による修正」を前提とした作業から、「AI が自律的に最適解を提示する」段階へと移行しました。MCP アプリという安全なインフラの登場と相まって、静的なコンポーネントやチャットベースの UI は過去のものとなり、人間と AI が共に創造する共創型インターフェースが次世代の標準になると考えられます。