生成ユーザー インターフェース(GenUI)は、静的な事前レンダリングされたテンプレートから、リアルタイムで構築される動的なインターフェースへと、デジタル デザインを移行しています。デベロッパーが考えられるすべての状態をハードコーディングする代わりに、大規模言語モデル(LLM)が UI をオーケストレートし、特定のユーザー インテントとセッションのコンテキストに基づいてレイアウト、コンポーネント、データの可視化を調整します。
実際には、UI は柔軟なオーケストレーション レイヤとして機能します。ダッシュボードを即座に再構成したり、静的なインターフェースでは予測できない特定の要求を処理する機能的なミニアプリを生成したりできます。
LLM をアプリケーションに早期に統合したケースでは、「テキストの壁問題」に悩まされることがよくありました。モデルは複雑なタスクを推論、計画、実行できましたが、通常は出力を長い段落や標準のマークダウンに折りたたんでいました。生成 UI は、高性能な LLM の自然言語インターフェースを完全で機能的かつインタラクティブなユーザー エクスペリエンスにすることで、この問題を解決します。
生成 UI は単一のテクノロジーではなく、さまざまな実装戦略です。適切なものを選択するには、ブランド保護とセキュリティに関する要件を考慮する必要があります。
アプローチ | 仕組み | 考慮事項 |
静的 GenUI | エージェントは、手作業で構築されたコンポーネントの固定ライブラリから選択します。 | 高コントロール: ブランドの整合性とセキュリティが保証されますが、ビジュアルの柔軟性は限られます。 |
宣言型 GenUI | エージェントは、UI 要素(カード、リスト、ウィジェット)を表す構造化されたスキーマ(JSON など)を返します。 | バランス型: エージェントに表現力を与えながら、スケーリングを適切に行い、一貫性を維持します。 |
自由形式の GenUI | エージェントは、フロントエンドでレンダリングされる元コード(HTML/CSS)を生成します。 | 最大限の柔軟性: 無限の創造性を実現できますが、セキュリティ(XSS)とスタイリングに関する重大なリスクが生じます。 |
アプローチ
仕組み
考慮事項
静的 GenUI
エージェントは、手作業で構築されたコンポーネントの固定ライブラリから選択します。
高コントロール: ブランドの整合性とセキュリティが保証されますが、ビジュアルの柔軟性は限られます。
宣言型 GenUI
エージェントは、UI 要素(カード、リスト、ウィジェット)を表す構造化されたスキーマ(JSON など)を返します。
バランス型: エージェントに表現力を与えながら、スケーリングを適切に行い、一貫性を維持します。
自由形式の GenUI
エージェントは、フロントエンドでレンダリングされる元コード(HTML/CSS)を生成します。
最大限の柔軟性: 無限の創造性を実現できますが、セキュリティ(XSS)とスタイリングに関する重大なリスクが生じます。
エージェントを活用したインターフェースを構築するためのエコシステムは急速に進化しており、UI のトランスポートとレンダリングを処理するためのいくつかの異なるフレームワークが登場しています。
A2UI は、信頼境界を越えた LLM 生成 UI の利用を容易にするために Google が設計したオープンソースの UI ツールキットです。高度に安全な宣言型 JSON Lines(JSONL)ストリームを使用して、任意のエージェントから任意のクライアント アプリケーションに UI 構造とデータモデルを送信します。A2UI は実行可能コードではなく宣言型データを送信するため、本質的に安全でフレームワークに依存しません。同じエージェント出力をウェブ、Flutter、Android、iOS でネイティブにレンダリングできます。エージェントは、既存のあらゆるデザイン システムの UI を「話す」ことができます。
AG-UI は、エージェント フロントエンドとエージェント バックエンドの間に位置する汎用的な双方向接続プロトコルです。CopilotKit によって開発されたこのツールは、複雑な状態の同期を処理し、さまざまな生成 UI 仕様をシームレスにサポートします。エージェントの出力をリッチでインタラクティブなフロントエンド コンポーネントに変換するブリッジとして機能します。
MCP アプリは、Model Context Protocol の UI 拡張機能で、ユーザー インターフェースをエージェントのツールが返すことができるインタラクティブな「リソース」として扱います。MCP サーバーは、サンドボックス化された iframe 内でレンダリングされた HTML として、UI コンポーネントを構築して返すことができます。これにより、サードパーティ サービスは、準拠するエージェント内で独自の視覚的アイデンティティを維持できます。
GenUI をプロトタイプから本番環境に移行するには、次の 4 つの重要な考慮事項に対処する必要があります。
プロンプト インジェクションによってモデルが悪意のあるコードをレンダリングする UI インジェクションを防ぐには、最小権限の UI モデルの採用を検討してください。A2UI などのプロトコルは、コードではなくデータを送信します。そのためクライアントは、事前に承認および監査されたコンポーネントのみをレンダリングする必要があります。
従来のビジュアル回帰テストは、GenUI の非決定論的なインターフェースでは失敗しやすくなります。正確な配置に関係なく、インテントと機能コンポーネント(特定のボタンなど)が存在し、インタラクティブであることを検証する確率的アサーションへと、テストを移行する必要があります。
推論ステップが追加されたことで、Time to Interactive(TTI)に影響が出ます。応答性を維持するには、ストリーミング UI の更新を実装することを検討してください。たとえば、JSONL を使用してすぐにレンダリングを開始する、ベクトルベースのキャッシュを使用して、以前に生成された UI 構造を類似のクエリに提供する(セマンティック キャッシュ)などの方法があります。
動的 UI は WCAG への準拠を維持する必要があります。スキーマ主導の A11y を使用するように、基盤となる JSON スキーマにアクセシビリティ要件を組み込みます。こうすることで、レンダリング エンジンは、リクエストされたコンポーネント タイプに基づいて、必要な ARIA ラベルとロールを自動的に挿入できます。
要素 | 従来の UI | 生成 UI |
開発スピード | 手動スプリント サイクル | オンデマンド生成 |
UX の一貫性 | 高(厳格なデザイン システム) | 可変(コンテキストに応じた適応) |
セキュリティ リスク | 低(静的コード監査) | 高(厳格なサンドボックス化が必要) |
主なユースケース | コア ワークフローと設定 | データの検出と複雑なクエリ |
要素
従来の UI
生成 UI
開発スピード
手動スプリント サイクル
オンデマンド生成
UX の一貫性
高(厳格なデザイン システム)
可変(コンテキストに応じた適応)
セキュリティ リスク
低(静的コード監査)
高(厳格なサンドボックス化が必要)
主なユースケース
コア ワークフローと設定
データの検出と複雑なクエリ
Google Cloud は、生成 UI を提供できる AI エージェントを構築、管理、スケールするための包括的なツールポートフォリオを提供します。


