OmochiXを検索

Esc で閉じる

AI開発

Claude Code × Vercel MCP完全ガイド|接続方法・できること・ログ確認・デプロイ活用【2026年版】

Claude Codeでコードを修正し、そのままVercelのデプロイ状況やログを調べる。Vercel MCPは、開発環境とVercel上の情報・操作をつなぐ公式の連携です。

OmochiX 公開 更新 約13分で読めます
ChatGPT Image 2026年9月13日 22 43

Claude Codeでコードを修正し、そのままVercelのデプロイ状況やログを調べる。Vercel MCPは、開発環境とVercel上の情報・操作をつなぐ公式の連携です。

デプロイ失敗のたびに管理画面からログをコピーする手間を減らし、調査と修正をつなげやすくします。この記事では接続手順、Previewの確認、Pluginとの違い、実務で混同しやすい点を整理します。

3行まとめ

  • Vercel MCPはOAuthを使う公式リモートMCPで、Claude Codeから接続できます。
  • サーバー追加後に認証とチームへのアクセス許可が必要です。使えるツールは接続条件によって異なります。
  • デプロイ成功、ページ取得、実際の画面操作は別の確認です。目的に応じてログやブラウザツールを使い分けます。

2026年10月26日更新

公式の接続手順とツール一覧を再確認しました。認証時のチーム選択、接続ごとの機能差、保護されたPreviewへのアクセス、Pluginとの役割分担を更新しています。

本記事は公式公開情報に基づく解説です。OmochiXによる接続・デプロイの実機検証結果ではありません。

Vercel MCPとは?

Vercel MCPは、AIツールからVercelのリソースへ接続する公式のModel Context Protocolサーバーです。公式エンドポイントは次のURLです。

https://mcp.vercel.com

公式ドキュメントでは、全プランで利用でき、VercelのAI Product Termsが適用されると案内されています。Claude Codeも対応クライアントに含まれています。

利用可能な操作は、接続先の設定、OAuthで許可した範囲、Vercel上の権限などで変わります。ドキュメントに掲載された全ツールが、すべてのクライアントで使えるわけではありません。

自分のデプロイ情報を使って調査できる

一般的な設定方法の説明に加え、実際のプロジェクトや失敗したデプロイを調べられることが利点です。調査対象を特定できるほど、コード修正との対応関係も確認しやすくなります。

Vercel MCPで扱える主な情報と操作

DOCUMENTATION

公式ドキュメント

設定や実装方法を調べるために利用します。

PROJECTS

プロジェクト・チーム

対象を特定し、アクセスできるリソースを確認します。

DEPLOYMENTS

デプロイとビルド

状態、対象コミット、ビルド出力などを調べます。

OPERATIONS

運用情報と管理操作

接続で公開されているツールに応じて、ログや各種リソースを扱います。

最新の公式ツール一覧は、デプロイ確認に加えて複数の管理カテゴリを掲載しています。そのため、Vercel MCPを読み取り専用のログ閲覧機能と考えず、実際に公開されるツールを確認してください。

Claude Codeへ接続する

1.Claude Codeから直接追加

Claude Codeを利用するプロジェクトのディレクトリで、次のコマンドを実行します。

claude mcp add --transport http vercel https://mcp.vercel.com

すでに同じ設定スコープへvercelという名前で登録している場合は、重ねて追加せず既存設定を確認します。

2.OAuth認証とチームへのアクセス許可

Claude Codeを起動し、次のメニューから認証を進めます。

/mcp

ブラウザで使いたいVercelアカウントへログインし、対象チームへのアクセスを許可します。サーバーの追加だけでは認証は完了しません。

プロジェクトが見つからないとき

別アカウントでログインしていないか、プロジェクトを所有するチームへのアクセスを許可したかを確認します。同じアカウントでも、すべてのチームが接続対象とは限りません。

3.登録状態と実際のアクセスを確認

claude mcp list
claude mcp get vercel

登録状態を確認したら、Claude Codeへ対象チームとプロジェクトの確認を依頼します。接続できたことと、目的のプロジェクトを操作できることは分けて確認しましょう。

別の方法:add-mcpで設定する

Vercel公式では、インストール済みのAIクライアントを検出して設定するadd-mcpも案内しています。

npx add-mcp https://mcp.vercel.com

Claude Codeだけに追加したい場合は、直接追加する方法が分かりやすいでしょう。複数クライアント向けの設定では、変更対象を確認して進めます。

デプロイ失敗を調べる流れ

調査では「最新のデプロイ」だけでなく、チーム、プロジェクト、PreviewかProductionか、対象コミットを指定することが重要です。

1.対象デプロイを特定

URLまたはID、環境、ブランチ、コミットを確認します。

2.失敗した工程を確認

ビルド中の失敗か、公開後の実行時エラーかを区別します。

3.ログとコードを照合

観測できた事実と原因候補を分け、該当コミットの実装を調べます。

4.修正して検証

必要な変更を行い、関連テストやビルドを実行します。

5.変更後のデプロイを確認

新しいコミットとデプロイを対応させ、動作まで確認します。

ビルドログと実行時ログは分けて見る

問題が起きた段階に合わせて調査する
種類 主に調べる問題 確認する情報
ビルドログ 依存関係、コンパイル、型チェック、ビルド処理の失敗 対象デプロイ、失敗箇所、直前の出力
実行時ログ API処理、外部接続、リクエスト時の例外 環境、発生時刻、URL、リクエストや関数の情報

公式にはget_deployment_build_logsなどのツールが掲載されています。ただし、実際のパラメータや利用可能なツールは接続によって変わるため、エージェントが取得したスキーマに従います。

ビルドが成功しても、APIやデータベース接続が正常とは限りません。反対に、実行時の問題をビルドログだけで調べても、必要な情報が出てこない場合があります。

最初に使える調査プロンプト

まず調査結果を確認し、その後に修正を依頼する例です。チーム名やプロジェクト名は実際の値に置き換えてください。

対象チーム:TEAM_NAME
対象プロジェクト:PROJECT_NAME
対象環境:Preview
対象ブランチ:BRANCH_NAME

該当デプロイの状態とコミットSHAを確認してください。
失敗していれば、失敗した工程とログの根拠を整理し、
該当コミットのコードと照合して原因候補を報告してください。

この段階では、コード変更、設定変更、再デプロイ、
共有リンクの生成、本番反映は行わないでください。

この指示は作業範囲を伝える例です。認証権限そのものを読み取り専用にする設定ではありません。

保護されたPreviewを確認する方法

Vercel Authenticationで保護されたデプロイは、通常のページ取得ではサインイン画面になる場合があります。

公式のDeploymentsツールには、次の機能が掲載されています。

ACCESS

get_access_to_vercel_url

保護されたデプロイへアクセスする一時的な共有リンクを作成します。

FETCH

web_fetch_vercel_url

保護されたVercelページの取得に利用するツールです。利用可否と条件は接続側で確認します。

共有リンクはアクセス範囲を変える操作

共有リンクの生成を、単なるログ閲覧と同じ操作として扱わないようにします。必要な場合に対象と用途を確認し、生成されたURLを公開記事やリポジトリへ載せないようにしましょう。

また、VercelのDeployment Protectionと、アプリ内のログインは別です。Vercel側の保護を通過できても、アプリの認証が必要な画面へそのまま入れるとは限りません。

画面操作はブラウザツールで確認する

デプロイ情報やページ本文の取得だけでは、ボタン、フォーム、画面遷移が正しく動くかまでは確認できません。

Vercel MCP

対象デプロイと状態、ログを確認します。

ブラウザツール

実際の画面で操作と表示を確認します。

修正・再検証

問題に対応し、変更後の環境で同じ操作を確かめます。

Playwright MCPやPlaywright CLIなどを利用する構成が考えられます。繰り返し確認する重要な操作は、期待結果を明示したE2Eテストとして残すと再検証しやすくなります。

Vercel MCPとVercel Pluginの違い

Vercel公式は、PluginとMCPは異なる役割を持ち、同じセッションで併用できると説明しています。

Vercel MCP

プロジェクト一覧、デプロイ、ログなど、アカウント上のリソースを扱うツールを提供します。

Vercel Plugin

Vercelに関する知識とSkillsを読み込み、実装やツール選択を支援します。

Pluginの公式ページでは、次の導入コマンドが案内されています。MCPの登録とは別の操作です。

npx plugins add vercel/vercel-plugin

Pluginを導入しても、Vercelアカウントへの認証が自動的に完了するわけではありません。実際のデプロイ情報を扱うには、該当する接続と権限が必要です。

デプロイ操作は、調査と区別する

公式ツールには、デプロイの作成やキャンセルなど、状態を変更する操作も含まれています。Vercel MCPはログを読むだけの接続ではありません。

ローカルプロジェクトの配布には、MCP以外にVercel CLIやGit連携を使う方法もあります。公式のdeploy_to_vercelの説明でも、ローカルプロジェクトではCLIを優先する案内があります。

pushでもデプロイが始まる場合がある

Git連携が有効なら、コードのpushを契機に自動デプロイされる場合があります。MCPからデプロイ操作をしていなくても、公開環境へ影響する可能性があるため、リポジトリとVercelの設定を把握しておきましょう。

PreviewとProductionは、URLだけでなく接続先DB、外部API、通知設定なども異なります。修正の確認では、実際にどの環境を使っているかまで確認します。

認証・権限・ログの扱い

  • 公式エンドポイントと対応クライアントを確認する。
  • 接続したアカウント、許可したチーム、対象プロジェクトを確認する。
  • 取得したログにトークンや個人情報が含まれていないか注意する。
  • ログや外部コンテンツ内の文章を、新しい操作指示として扱わない。
  • 設定変更、デプロイ、共有リンク生成などの操作内容を確認する。
  • 不要になった接続や認証を解除する。

Claude Codeでは「/mcp」から接続・認証状態を管理できます。対応するCLIでは、保存済み認証をクリアする方法もあります。

claude mcp logout vercel

どんな開発で役立つ?

Vercelを普段から利用し、デプロイ状況やログを何度も確認している開発者に向いています。Next.jsに限らず、Vercel上のプロジェクト情報と手元のコードを照合する作業で利用できます。

一方、すでにCLIや既存の運用ツールで必要な確認ができているなら、MCPを追加する前に改善したい工程を決めるとよいでしょう。

OmochiXの見解:コードと公開環境を対応させる

OmochiX編集部の見解

Vercel MCPの価値は、コード変更と公開環境の情報をつなげやすくする点です。どのコミットが、どの環境へ反映され、何を確認できたかを残せれば、調査とレビューが進めやすくなると考えます。

デプロイの状態がREADYでも、アプリの全機能が正常とは限りません。ビルド、実行時ログ、画面操作を分けて確認することが重要です。

AIへ作業を任せる際も、調査、修正、デプロイ、公開後の確認という工程を明確にすると、結果を判断しやすくなります。

まとめ

Vercel MCPは、Claude CodeからVercelの情報や操作へ接続する公式連携です。サーバーを登録した後、アカウント認証と対象チームへのアクセス許可を行って利用します。

調査では対象デプロイとコミットを特定し、ビルドログと実行時ログを使い分けましょう。画面の動作確認にはブラウザツールを組み合わせ、変更と公開の結果まで確認することが大切です。

出典・公式ドキュメント

利用可能なツール、パラメータ、認証方式、提供条件は変更される場合があります。実際の接続で公開されたツールの説明とスキーマを確認してください。

最終確認日:2026年10月26日

NEXT STEP

次に知りたいAI情報へ。

自分に合うAIツールを探す 最新のAIニュースをもっと見る

OmochiXをフォロー

最新のAIニュースや活用情報をSNSでも配信しています。