chot Inc.（ちょっと株式会社）

Vercel MCPがデプロイをインタラクティブカードで表示：ChatGPT上でビルドログまで追える

開発

2026年11月2日、Vercelは「Vercel MCPがデプロイメントをインタラクティブなカードとして表示する」とchangelogで発表しました。ChatGPTなどMCP Appsに対応したチャットクライアント上で、デプロイのライブステータス、ビルドログ、ソースとコミット情報がカードとして描画され、URLが用意できた時点でVisitボタンが出ます。結論として、Vercelダッシュボードを開かずにチャット内でデプロイの一次切り分けができるようになった、という変更です。MCP Apps非対応のクライアントでは従来どおりテキストが返るため、既存の連携が壊れる心配は基本的にありません。

カードで何ができるようになったのか

Vercelの発表によると、カードが表示するのはデプロイのライブステータス、ビルドログ、ソースとコミットの詳細です。デプロイURLが準備できるとVisitボタンが付き、そのままプレビューを開けます。ログはチャットに送ってモデルと一緒にデバッグできるほか、フルスクリーン表示でカードの下に全文を読むこともできます。1つのリポジトリが複数プロジェクトに紐づいている場合は、カード内のプロジェクト一覧で切り替えられます。モノレポ構成でプロジェクトを取り違えやすいチームには、この切り替えが実務上効いてきます。

この挙動を支えているのが open_deployments ツールです。プロジェクト、リポジトリ、コミットのいずれかを起点にデプロイを検索でき、環境（本番・プレビューなど）でのフィルタリングに対応します。「このコミットのビルドはどうなったか」をコミットハッシュから直接引ける点は、PRレビュー中の確認やリリース直後の状況把握と相性が良い設計です。

MCP Appsとは何か、なぜ今カードが出せるのか

MCP Appsは、MCP（AIがツールを呼び出すためのオープンな標準規格）の拡張仕様です。SEP-1865として2025年11月に提案され、2026年1月26日にMCP初の公式拡張として公開されました。その後、2026-07-28版の仕様リリース候補では拡張フレームワークの一部として取り込まれています。サーバー側が ui:// スキームのHTMLリソースをツールに紐づけ、ホスト側がそれをサンドボックス化したiframeで描画する仕組みで、UIからの操作も通常のJSON-RPCを経由するため、直接のツール呼び出しと同じ監査・同意の経路を通ります。

重要なのは、これがオプションの拡張であり、クライアントとサーバーが能力交渉（capability negotiation）で合意したときだけ有効になる点です。Vercelのデプロイカードは同社MCPにとって初のMCP Appであり、対応していないクライアントにはデプロイ状態・プレビューURL・コミットがテキストで返ります。つまりフロントエンド開発でおなじみのプログレッシブエンハンスメントと同じ構造で、CLIベースのエージェントや社内ツールから叩いている場合でも機能は失われません。

使い始めるまでの手順

Vercel MCPはOAuth付きのリモートMCPサーバーで、エンドポイントは https://mcp.vercel.com です。全プランで利用できます。複数のクライアントにまとめて設定するなら、npx -y add-mcp https://mcp.vercel.com -g を実行する方法がドキュメントで案内されています。

ChatGPTから使う場合は、クライアント側で接続を明示的に追加する必要があります。Vercelのドキュメントでは、ChatGPTのプラグイン設定からカスタムMCPサーバーを追加し、名前を「Vercel」、サーバーURLに https://mcp.vercel.com を指定、認証方式にOAuthを選ぶ流れが示されています。追加後は会話中に @ で呼び出します。changelogでは同じ接続をConnectorsの設定として説明しており、クライアント側のUI名称は変わり得るので、最新の表記は公式ドキュメント側で確認するのが確実です。Claude Code、Cursor、VS Code（Copilot）、Codex CLIなどもサポート対象クライアントとして挙げられていますが、カードとして描画されるかはそのクライアントがMCP Appsに対応しているかで決まります。

チームで使う前に決めておきたいこと

Vercelはセキュリティ上の注意として、MCPへの接続はそのAIに自分のVercelユーザーアカウントと同等のアクセス権を与えることになる、と明記しています。あわせて、公式エンドポイントであることの確認、プロンプトインジェクションの理解、ワークフローでの人間による確認（human confirmation）の有効化を推奨しています。

デプロイカードは「ログをチャットに送る」操作を伴うため、ここは運用ルールを決めてから配るのが無難です。ビルドログには内部パッケージ名やファイルパス、設定によっては出力の断片が含まれ得ます。Vercel自身も、接続した外部ツールがVercel外のシステムにデータを共有し得る点に注意を促しています。したがって、個人アカウントではなく権限を絞ったチームメンバーで接続する、本番環境のログを扱う会話はどのクライアントで行ってよいかを決める、といった線引きを先に用意しておくと導入がスムーズです。逆に、プレビュー環境の失敗切り分けに限定するなら、導入コストに対する効果は見えやすい部類の変更といえます。

自社プロダクトで同じUIを出したい場合

「チャットの中にカードを出す」体験は、Vercel MCP固有の機能ではなくMCP Appsとして標準化された仕組みなので、自社のMCPサーバーやAIアプリでも実装できます。ホスト側をAI SDKで作る手順はVercelのナレッジベースにガイドがあり、@ai-sdk/mcp の mcpAppClientCapabilities で対応を宣言し、splitMCPAppTools でモデルに見せるツールとアプリ専用ツールを分離し、readMCPAppResource で ui:// リソースを読み、Reactでは実験的な experimental_MCPAppRenderer で描画する、という流れが示されています。

同ガイドのベストプラクティスで押さえておきたいのは次の3点です。

  • MCP AppのHTMLは信頼できないものとして扱い、できれば別オリジンのサンドボックス経由でiframeに描画する
  • アプリ専用ツールをモデルに渡さず、iframeからのリクエストはサーバー側で毎回検証してからツールを呼ぶ
  • 各ツールの content と structuredContent だけで意味が通るようにし、テキストのみのホストでも成立させる

3点目は、まさにVercelのデプロイカードが実践しているフォールバック設計です。UIを足すときも、テキスト応答を一次情報として先に固めるほうが、対応クライアントの差を吸収しやすくなります。

まとめと次の一手

まずは普段使っているクライアントに https://mcp.vercel.com を接続し、直近のコミットについてデプロイ状況を尋ねてカードが出るか確かめるのが最短です。そのうえで、ログをチャットに送る運用の可否をチーム内で決めてください。自社サービスのMCPサーバーにも同じようなインタラクティブUIを載せたい、あるいはAIアプリのホスト側にMCP Appsの描画を組み込みたいという段階であれば、設計や実装のご相談をお問い合わせよりお寄せください。

出典

この記事をシェア

最新の記事

開発

Vercel CI が Vercel プロジェクトの連携不要に — 何が変わり、どう試すか

AI最新情報

robots.txtでAI学習の可否を一括指定する共通シグナル「__usage_ai-training」とは

サイト制作

Webアクセシビリティはどう広がってきたか — 意味づけ・操作・支援技術・評価の4つの変化

コラム一覧