Insights·2026-06-10

生成UIとMCPアプリ — エージェント時代のインターフェースはどこへ向かうのか

エージェントUIは、静的(事前構築コンポーネントにデータを流し込む)、宣言的(エージェントがJSON記述を書き、レンダリングエンジンがデザインシステムにマッピング)、生成的(モデルがランタイムでHTML・CSSを即席生成)の3段階で進化しています。現在の均衡点は宣言的方式であり、生成的へ進む鍵はモデルの能力ではなく信頼 — すなわちサンドボックスという安全な流通構造です。MCPアプリがその配布チャネルとして注目されています。

エージェントUIの3段階

AIが人よりうまくフロントエンドコードを書く時代に、なぜUIはまだ静的なままなのか。AI EngineerカンファレンスでPostmanのRuben Casasが投げかけた問いです。彼はエージェントUIの進化を3段階に整理します。開発者が事前に作ったコンポーネントにエージェントがデータだけを流し込む静的方式、エージェントがJSON記述を書けばレンダリングエンジンがデザインシステムにマッピングする宣言的方式、そしてモデルがランタイムでHTMLとCSSを即席で書き出す生成的コンポーネントです。

なぜ現在の均衡点は宣言的方式なのか

宣言的方式はデザインシステムの一貫性を守りながらパーソナライズが可能で、コストも安い。生成的へ進めないのは能力の問題ではなく信頼の問題です。LLMが即席で書いたコードを検証なしにユーザー画面に表示するわけにはいかないため、サンドボックスという安全な流通構造が先に立つ必要があります。

MCPアプリが注目される理由

MCPアプリは認証、ツール呼び出し、二重iframeサンドボックスが標準装備された構造のため、生成UIの配布チャネルの役割を果たせます。Anthropicが自社の可視化機能を独自レンダリングではなくMCPアプリで実装したことが戦略的シグナルだという解釈もあります。

テレビの比喩 — チャットボット後付けの限界

テレビが初めて登場したとき、人々はラジオ番組にカメラを向けただけでした。ホームページごとにチャットボット窓を付けている今のSaaSは、ちょうどその段階です。次の段階は、人とエージェントが同じキャンバスを囲んで一緒に編集する協働型UIです。

企業のAXを設計するときも同じ問いが有効です。チャットボットを付けるのではなく、エージェントと人が一緒に働くインターフェースをどこに置くか。SH ConsultingがAX設計でインターフェース層を独立して扱う理由です。