Progressive Enhancement思想で学ぶMCP Apps開発：非対応ホストでも安全に動作するフォールバック設計と実装

人工知能とインターフェースにおける「表現力の限界」という課題

自律的にタスクを完遂する「AIエージェント」への進化が進む中で、従来のAIチャットにおける最大のボトルネックは「テキストや画像を返すだけ」というインターフェースの制限でした。ユーザーはAIの提案したデータを別のブラウザで確認したり、手動で転記したりする手間を強いられてきました。

この課題を克服するため、2026年1月26日、Model Context Protocolの初の公式拡張仕様として「MCP Apps（SEP-1865）」が発表されました。これは、チャット領域内にHTML/JavaScriptベースのインタラクティブなUIを直接埋め込める画期的な仕組みです。

しかし、現実の開発において避けて通れないのが「ホスト側の対応状況」のばらつきです。「Claude」や「VS Code」といった最新クライアントが次々と対応を進める一方で、未対応のホストやシンプルなCLI環境も数多く存在します。このような環境でリッチなUIにのみ依存したツールを実行した場合、UIが表示されずにエラーとなるか、ユーザーが全く操作できなくなるという深刻なトレードオフが発生します。

解決策：「Progressive Enhancement」と安全なセキュリティモデル

この機能格差を解決する設計思想が、Web技術の古典的な原則でもある「Progressive Enhancement（段階的な機能拡張）」です。MCP Appsの設計では、UI表示に非対応のクライアントが動作した際の代替案として、通常の「テキストベースの応答」をフォールバックとして返す設計が強く推奨されています。

これにより、対応ホストではリッチなビジュアル操作を提供し、非対応ホストでもツール自体の動作を維持して最低限の対話を成立させる、極めて堅牢な連携が可能になります。

また、この仕組みは安全性の確保（セキュリティモデル）とも深く結びついています。MCP AppsのUI（View）は「sandboxed iframe」内で実行されるため、ホスト側のDOMやCookie、ローカルストレージへの直接アクセスは完全に遮断されます。ViewとMCPサーバー間の直接通信も禁止されており、ホストが通信をすべて仲介する形で「postMessage（JSON-RPC 2.0）」を介してデータをやり取りします。さらに「CSPメタデータ」によりドメイン制限を課すことで、不正なデータ流出を防いでいます。

具体的な実装ステップ：フォールバック設計を持つカウンターツール

では、対応ホストと非対応ホストの双方で安全に動作するカウンターツールを構築するための具体的な実装コード例を見てみましょう。プロジェクトを構築する際は、CLIコマンド npx create-mcp-app を実行することで、ReactやVue、Vanilla JSなどを選択して最小構成のプロジェクトを即座に生成できます。

以下は、サーバー側の実装において、非対応環境向けのテキストフォールバックと、対応環境向けの _meta.ui.resourceUri を同時に返却するJavaScript/TypeScriptの設計例です。

import { McpServer } from "@modelcontextprotocol/sdk";

// サーバー初期化とツール定義（イメージコード）
const server = new McpServer();

server.tool(
  "increment_counter",
  "カウンターの値を1増やします。",
  {},
  async (params) => {
    // データベース等で値を増やす擬似処理
    const newValue = 42; 

    return {
      // 1. 非対応ホスト用のフォールバック：通常のテキストメッセージ
      content: [
        {
          type: "text",
          text: `カウンターを更新しました。現在の値は ${newValue} です。`
        }
      ],
      // 2. 対応ホスト用のエンハンスメント：UI（View）のメタデータを指定
      _meta: {
        ui: {
          resourceUri: "https://your-domain.com/views/counter.html"
        }
      }
    };
  }
);

動作の裏側にある設計判断（Why）

• 対応ホスト（Claudeなど）での動作: メタデータの _meta.ui.resourceUri を検知し、指定されたURLのHTMLをサンドボックス化された iframe 内に読み込みます。ユーザーはその場でボタンを連打できるリッチなUIで操作します。
• 非対応ホストでの動作: メタデータ領域を無視し、content 配列に格納されたテキスト（フォールバック）のみを抽出してテキスト応答を生成します。システムエラーを回避し、サービスを継続させます。

結論：エコシステムとしてのMCP Apps

MCP Appsは、単なるビジュアルの追加ではなく、AIを起点とした「エコシステム」の基盤を構築するための仕様です。リテール・ECでのサイズ入力フォームや店舗検索マップ、あるいは業務ツールでの営業ダッシュボード構築など、その応用範囲は多岐にわたります。

2026年3月26日には、AnthropicからClaudeモバイルアプリへの業務ツール統合が発表され、スマートフォン上からFigmaやCanva、Amplitudeなどをシームレスに操作できるようになりました。さらに、カレンダーや電話などのスマホ機能に深くアクセスする「Orbit」という次世代構想も進行しています。

どのようなホスト環境でも安全に、そして段階的に機能を提供するProgressive Enhancementの思想を取り入れることで、変化の激しいAIエージェント領域において、将来にわたって保守性の高いアプリケーションを設計することができます。