パターンを読み込んでいます…
生成的UI（エージェントが描画するインターフェイス）(GenUI)
エージェントが実行時にインターフェイスそのものを生成・選択・制御し、単なるテキストではなく、リッチでインタラクティブなコンポーネント（フォーム、グラフ、ダッシュボード、地図、複数ステップのウィジェット）を返します。そしてコンテンツの種類とユーザーの意図に基づいて、結果を「どのように」提示するかを判断します。モデルのツール呼び出しがUIを出力し、ホストがそれをサンドボックス化されたフレーム内で描画します。たとえば、MCP Appsが`ui://`リソースを通じてバンドルされたHTMLを提供したり、Google A2UIやOpen-JSON-UIのようなポータブルな仕様をクライアントがネイティブに描画したりします。MCP AppsがClaude、ChatGPT、VS Code、Gooseに展開され、A2UIやCopilotKit/assistant-uiの生成的UIと並んで提供されたことで、2026年に実験段階から本番運用へと移行しました。`ag-ui-protocol`とは区別されます。あちらはエージェントのイベントを構築済みのフロントエンドへストリーミングするものであり、また`adaptive-interface-patterns`は既存のインターフェイスをパーソナライズするものです。一方こちらでは、エージェントがインターフェイスそのものを具現化し、応答時にコンポーネントを選択して組み立てます。
30秒でわかる概要
- 概要
- エージェントがフォーム、チャート、テーブル、地図といった対話型の UI コンポーネントをツール出力として生成して返し、ホストがサンドボックス化されたフレーム内で描画します。
- 使いどころ
- 結果を視覚的に見せた方がよい場合、ユーザーがデータを操作する必要がある場合、あるいは最適な表示形式が意図やコンテンツの種類によって変わる場合。
- 注意点
- 描画の失敗、ネットワーク遅延、ブラウザ互換性の問題がエージェントのエラーに重なります。本番投入の前に UI 生成の経路を徹底的にテストしてください。
このパターンについてAIエキスパートに質問
質問が入力済みの状態でアシスタントが開きます。送信前に内容を確認できます。
生成的UI（エージェントが描画するインターフェイス）: 概要
エージェントが実行時にインターフェイスそのものを生成・選択・制御し、単なるテキストではなく、リッチでインタラクティブなコンポーネント（フォーム、グラフ、ダッシュボード、地図、複数ステップのウィジェット）を返します。そしてコンテンツの種類とユーザーの意図に基づいて、結果を「どのように」提示するかを判断します。モデルのツール呼び出しがUIを出力し、ホストがそれをサンドボックス化されたフレーム内で描画します。たとえば、MCP Appsが`ui://`リソースを通じてバンドルされたHTMLを提供したり、Google A2UIやOpen-JSON-UIのようなポータブルな仕様をクライアントがネイティブに描画したりします。MCP AppsがClaude、ChatGPT、VS Code、Gooseに展開され、A2UIやCopilotKit/assistant-uiの生成的UIと並んで提供されたことで、2026年に実験段階から本番運用へと移行しました。`ag-ui-protocol`とは区別されます。あちらはエージェントのイベントを構築済みのフロントエンドへストリーミングするものであり、また`adaptive-interface-patterns`は既存のインターフェイスをパーソナライズするものです。一方こちらでは、エージェントがインターフェイスそのものを具現化し、応答時にコンポーネントを選択して組み立てます。
- Agent picks the presentation: a chart for a trend, a form for an action, a table for a comparison
- Tool calls return UI components, not just text, which the host renders inline
- Sandboxed rendering: MCP Apps serve bundled HTML via `ui://` resources in an isolated iframe
- Portable UI specs (Google A2UI, Open-JSON-UI) painted natively by the client, host-agnostic
- Bidirectional: rendered widgets post user actions back into the agent loop as tool results
- Content-and-intent routing decides layout, density, and modality per response
エージェントUXフィールドガイドを受け取る
21のエージェントUXパターンを1冊に凝縮：それぞれが何か、いつ使うか、本番で何が問題になるか。確認メールと一緒にリンクが届き、週刊The Agent Architectも購読できます。
週1回のメール、ワンクリックで購読解除できます。アドレスはブリーフィングの送信のみに使用します。
参考文献
このパターンの根拠となる論文、仕様、リポジトリです。
このカタログを作ったエンジニアが担当
エージェント構成をレビューします
このページが扱うのは1つのパターンです。実際のシステムは数十を組み合わせて動き、障害の多くはその繋ぎ目で起きます。カタログの288パターンに照らして設計全体をレビューします。アーキテクチャ、信頼性、評価、コストまで、指摘ごとに対応するパターンを示します。
€750（通常€1,500）・1週間・文書レポートとウォークスルーコール・9月30日まで