AIとの会話の中に、クリックできるダッシュボードやフォームが表示されたら？MCP Appsはそれを実現する公式MCP拡張機能で、Azure Functions + TypeScriptを使えば手軽にホストできます。
この記事でわかること：
- MCP Appsとは何か、どんな問題を解決するか
- Azure Functionsを使ったMCPサーバーの構築方法
- 対応クライアント（Claude、ChatGPT、VS Codeなど）
- セキュリティの仕組み
MCPサーバーの「テキスト限界」を突破するMCP Apps
MCP（Model Context Protocol）は、AIモデルに外部のデータやツールを接続するオープン規格です。データベースに接続したり、APIを呼び出したりする「ツール」を定義でき、Claude・ChatGPT・VS Code Copilotといった主要クライアントが対応しています。
ただし、従来のMCPサーバーが返せる結果はテキストと構造化データだけでした。数百行のデータをモデルに要約させることはできますが、読者が「先週分だけに絞りたい」「売上が高い順に並べたい」といった操作をしたいとき、その度にプロンプトを打ち直す必要がありました。
MCP Appsは、ツールの結果としてインタラクティブなHTMLのUIを返せるようにする公式拡張機能です。2026年1月26日にModel Context Protocolの最初の公式拡張として正式リリースされました。
MCP AppsはどんなUIが可能かというと、たとえば以下のような用途があります。
- 営業分析ツールが返すフィルタリングできるインタラクティブダッシュボード
- デプロイツールが表示する、選択肢に応じて動的に変化するフォーム
- 契約書分析ツールが表示するPDFインライン表示＋承認・フラグ操作
- サーバー監視ツールによるリアルタイムで更新されるヘルスモニター
仕組み：ツールとUIリソースの組み合わせ
MCP Appsは2つのMCPプリミティブを組み合わせています。
ひとつ目は「UIメタデータを持つツール」です。通常のMCPツール定義に _meta.ui.resourceUri フィールドを追加することで、UIリソースへの参照を宣言します。
{
name: "visualize_data",
description: "データをインタラクティブなグラフで表示",
inputSchema: { /* ... */ },
_meta: {
ui: {
resourceUri: "ui://charts/interactive"
}
}
}
ふたつ目は「UIリソース」です。ui:// スキームで提供されるHTML/JavaScriptのバンドルで、MCPホストがサンドボックス化されたiframe内でレンダリングします。UI側から postMessage 経由でホストと双方向通信が可能で、サーバーサイドのツールを呼び出したり、AIモデルのコンテキストを更新したりできます。
Azure FunctionsでMCP Appsをホストする
MCP AppsのサーバーをゼロからTypeScriptで書こうとすると、MCPプロトコルの実装知識が必要です。Azure Functionsはその部分を抽象化してくれるため、ビジネスロジックに集中できます。
Azure Functionsでは app.mcpTool() でMCPツールを、app.mcpResource() でUIリソースを定義します。Microsoftが公開しているサンプル（天気アプリ）では次のような構成になっています。
// MCPツール：天気データを取得する
app.mcpTool("getWeather", {
toolName: "GetWeather",
description: "指定した都市の現在の天気を返す",
toolProperties: {
location: arg.string().describe("天気を調べる都市名")
},
handler: getWeather,
});
// MCPリソース：天気ウィジェットのHTMLを返す
app.mcpResource("getWeatherWidget", {
uri: "ui://weather/index.html",
resourceName: "Weather Widget",
description: "MCPアプリ用のインタラクティブ天気表示",
mimeType: "text/html;profile=mcp-app",
handler: getWeatherWidget,
});
ユーザーがAIクライアントで天気を聞くと、AIがMCPツールを呼び出し、サーバーが天気データと合わせてUIリソースを返します。クライアントはHTMLウィジェットをレンダリングし、ユーザーはその上で直接インタラクションできます。
クイックスタートの手順
Microsoftが公開しているサンプルリポジトリ（Azure-Samples/remote-mcp-functions-typescript）を使えば、数コマンドで動作を確認できます。
ローカル実行：
git clone https://github.com/Azure-Samples/remote-mcp-functions-typescript
npm install
npm run build
func start
Azureへのデプロイ：
azd provision
azd deploy
デプロイ後のMCPエンドポイントは https://<functionapp>.azurewebsites.net/runtime/webhooks/mcp になります。Azure Functions keysによるHTTPS認証が組み込まれており、OAuth対応のエンタープライズ向けMCP認証も利用できます。オートスケールも自動で対応します。
対応しているAIクライアント
MCP Appsは現在、以下のクライアントで動作します。
- Claude（Web・デスクトップ両対応）
- ChatGPT
- Visual Studio Code（Insiders版）
- Goose（Block社製のオープンソースAIエージェント）
MCP Appsのメリットのひとつは、クライアントごとに実装を変える必要がない点です。1つのMCPサーバーを作るだけで、上記のすべてのクライアントで同じインタラクティブUIが表示されます。
AnthropicのMCP共同開発者であるDavid Soria Parraは「MCP Appsが切り開く可能性にとても興奮している。コミュニティが何を作るか待ちきれない」とコメントしています。JetBrainsもIntelliJなどのIDEへの対応を検討中です。
セキュリティの考え方
自分で書いていないコードをAIクライアント内で実行することになるため、セキュリティは重要な課題です。MCP Appsは複数の層で対処しています。
UIコンテンツはすべてサンドボックス化されたiframe内で実行され、制限された権限のみが付与されます。ホストはHTMLコンテンツを事前に確認してからレンダリングできます。UIとホスト間のやり取りはすべてJSON-RPCを経由するためログとして残せます。UIが開始するツール呼び出しにはユーザーの明示的な承認を求めることも設定できます。
ただし、信頼できないMCPサーバーへの接続そのものは依然として注意が必要です。接続するサーバーを十分に確認してから使いましょう。
SDKと参考リソース
MCP Appsを構築するには公式SDK @modelcontextprotocol/ext-apps を使います。ext-appsリポジトリには3D可視化（threejs-server）、インタラクティブマップ（map-server）、PDFビューワー（pdf-server）、リアルタイムダッシュボード（system-monitor-server）などのサンプルがあり、作りたいアプリに近いものをベースにして始めることができます。
Azure以外でホストしたい場合は、Azure App Serviceやその他のサーバー環境でも動作します（参考）。Java・Python・.NETのサンプルリポジトリも公開されています。
まとめ
MCP Appsは、AIとのやり取りを「テキストの往復」から「UIベースのアプリ体験」へと変えるMCPの公式拡張機能です。Azure Functionsを使えば、MCPプロトコルの実装知識がなくてもTypeScriptで数コマンドデプロイできます。
Claude・ChatGPT・VS Codeといった主要クライアントがすでに対応しており、一度作れば全クライアントで動くUIを届けられます。