目次
「Claude Code に修正させた → でもデプロイは手動で git push して、ブラウザで Vercel ダッシュボード開いて……」——2025年まではこれが普通だった。2026年5月時点では、Vercel が公式に Agent Skills（MCP経由）と Claude Code Plugin を提供し、Cursor からも `.cursor/mcp.json` 1ファイルで 「コード修正→ビルド→デプロイ→プレビューURL確認→env更新→ロールバック」を全部AIエージェント内で完結させられる。「ブラウザに切り替える」操作が不要になった。
結論から書く：2026年の現実解は3つのアプローチを使い分けること。① 最小構成（git push→自動デプロイ、60〜90秒）は個人開発で十分。② MCP直結（Vercel Agent Skills）はCursor / Claude Code から直接 `vercel deploy` を叩けて、複数環境を頻繁に切り替える開発者向け。③ GitHub Actions + Claude Code Actionは PR コメントで `@claude` メンション → 自動修正＋プレビューデプロイのチーム運用向け。「どれが最強」ではなく「あなたの開発スタイル」で決まる。
個人視点を先に書く：「個人で1〜3プロジェクト」なら①、「複数環境を毎日触る」なら②、「PRレビュー文化のチーム」なら③。最大の落とし穴は env変数の漏洩と 「AIが勝手にデプロイ→コスト爆発」。これを spending limit + preview deploy 制限 + Cloudflare proxy 前段で防ぐのが2026年の標準ガード。AI推奨Vercel、Cursor解説、AIにインフラ任せていい？ も併せて読むと立体的に判断できる。本記事では3アプローチの実装、プレビュー戦略、落とし穴4つまでを2026年5月の事実ベースで実コード付き解説する。
3つのワークフロー——個人 / 中堅 / チーム
— ブラウザに切り替える時代は2025年で終わった
2026年5月: Vercel Agent Skills（MCP）と Claude Code GitHub Actions v1.0で 「コード→デプロイ」が完全エージェント化。
人間の介入は 承認 + 監視だけに収束しつつある。
1. なぜAIエージェント+Vercelデプロイが2026年の標準なのか
2025年までは 「AIにコード書かせる」と「デプロイする」が分断されていた。Cursor / Claude Code でコードを修正 → ターミナル戻って `git add . && git commit -m "fix" && git push` → ブラウザで Vercel ダッシュボードを確認 → プレビューURL コピー → Slack に貼る——この コンテキストスイッチが1日数十回発生して開発体験を腐らせていた。
2026年に2つの大きな変化が起きた。① Vercel が Agent Skills（Model Context Protocol = MCP）をリリース——AIエージェントが Vercel API を 「直接ツールとして呼べる」仕組み。② Anthropic が Claude Code GitHub Actions v1.0 をリリース——PR コメントに `@claude fix this bug` と書くだけで AI がコード修正 + プレビューデプロイ + コメント返信を自動実行。Vercel公式が `vercel/vercel-deploy-claude-code-plugin` を出したのもこの流れ。
結果、2026年5月時点の標準フローは 「Cursor で『この機能追加して、デプロイして、preview URL 教えて』 → 30秒後に preview URL がチャットに返ってくる」。MCPとは、Claude Agent SDK でも書いた通り、MCP が 「AIエージェントを業務システムに繋ぐUSB-C」として機能し始めた象徴的な事例だ。
2. 3つのアプローチを5分で見渡す
3アプローチの違いを 「設定の重さ × 自動化の深さ」で整理する。
| アプローチ | セットアップ | 自動化レベル | 向く規模 | 主な使い方 |
|---|---|---|---|---|
| 1. git push型 | 5分（GitHub連携1回） | ★★☆☆☆ | 個人〜2〜3人 | AIに修正→自分でgit push |
| 2. MCP直結型 | 10分（mcp.json + Token） | ★★★★☆ | 個人〜中堅5人 | AIが直接 vercel deploy 実行 |
| 3. Actions型 | 30分（workflow + Secrets） | ★★★★★ | 3人以上のチーム | PRコメントで @claude → 全自動 |
選び方の目安：「Vercelダッシュボードを月10回以上開いてる」なら②に進む価値あり。「PRレビューが日常」なら③が圧倒的に楽。「個人ブログ程度」なら①で十分、無理に高度化するとメンテコストが上回る。
3. アプローチ1：最小構成（git push自動デプロイ）
最も普及している基本構成。Vercel と GitHub を連携しておけば、`git push` した瞬間に 60〜90秒で本番反映。AIは 「コード書く」「コミットメッセージ書く」「git push する」だけ。
# セットアップ（1回だけ）
1. Vercelダッシュボード → Add New Project
2. GitHubリポジトリを選択 → Import
3. Framework Preset: Next.js（自動検出）
4. Environment Variables: 必要に応じて追加
5. Deploy → 完了
# 日常フロー（Cursor/Claude Code 内で）
> このボタンを赤色に変えて。完了したら git push で本番反映して。
# AIが実行するコマンド
git add app/components/Button.tsx
git commit -m "feat: change primary button to red"
git push origin main
# Vercel が自動でデプロイ → 90秒後に本番反映
この構成の 真の価値は 「ブランチごとにプレビューURLが自動生成」。`feature/red-button` ブランチに push すれば `https://your-app-git-feature-red-button-yourname.vercel.app` が自動で立つ。AIに「feature/redesign ブランチ作ってデザイン更新、preview URL Slack に貼っておいて」と言えば全部やる。
注意：Hobby プランは商用NG。AI推奨Vercel §5の料金罠を必ず確認。AIが勝手に preview を量産すると build minutes が一気に消費される。
4. アプローチ2：MCP直結（Cursor + Vercel Agent Skills）
2026年の 本命アプローチ。Vercel が公式提供する Agent Skills（MCP server）を Cursor や Claude Code に繋ぐと、AIエージェントが直接 Vercel API を叩けるようになる。「ブラウザに行く」工程が完全消滅。
# セットアップ（10分）
1. Vercel Token取得: vercel.com/account/tokens
2. Cursor で .cursor/mcp.json を作成
{
"mcpServers": {
"vercel": {
"url": "https://mcp.vercel.com/<team-slug>",
"headers": {
"Authorization": "Bearer <VERCEL_TOKEN>"
}
}
}
}
3. Cursor を再起動 → MCP server接続確認
これだけで Cursor から スラッシュコマンドが使えるようになる：
# 実用スラッシュコマンド例
/deploy # 現在のブランチを preview デプロイ
/deploy --prod # 本番デプロイ
/status # 直近デプロイのステータス確認
/logs # ビルドログ取得
/env list # 環境変数一覧
/env add KEY VALUE # 環境変数追加（preview/production選択可）
/rollback # 直前のデプロイにロールバック
真価は 「対話の中で完結」。例えば「このAPI追加して、preview にデプロイして、エラー出たらログ見て修正して」と言えば、AIは順番に コード修正 → /deploy → /logs でログ確認 → エラー検出 → コード修正 → /deploy 再実行を 無人で実行する。AIにインフラ任せていい？ の信号機型判定で 「黄色」領域：人間は 「最終承認」と「コスト監視」に集中する。
Claude Code 派には Vercel公式の `vercel-deploy-claude-code-plugin`もある。インストールして同等機能が手に入る。
5. アプローチ3：GitHub Actions（PR経由フル自動）
チーム運用の 頂点アプローチ。Claude Code GitHub Actions v1.0 を入れると、PRコメントで `@claude` メンションするだけで AI が コード修正 + テスト実行 + preview デプロイ + PR コメント返信を自動実行する。
# セットアップ（30分）
1. Claude Code 内で /install-github-app 実行
2. リポジトリにインストール → Secrets自動設定
3. .github/workflows/claude.yml が自動生成
name: Claude Code
on:
issue_comment: { types: [created] }
pull_request_review_comment: { types: [created] }
jobs:
claude:
if: contains(github.event.comment.body, '@claude')
runs-on: ubuntu-latest
steps:
- uses: anthropics/claude-code-action@v1
with:
anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
# 4. .github/workflows/vercel.yml で preview デプロイ追加
name: Vercel Preview
on: pull_request
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm i -g vercel
- run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
- run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
- run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
これで運用は劇的に変わる。PR例：
# 開発者がPRを作る → 自動でpreviewデプロイされる
[Bot] Vercel Preview: https://your-app-pr-42.vercel.app
# レビュアーがPRコメント
@claude このボタンの hover 時にも変色するようにして
# 5分後にClaude が自動でコミット追加
[Bot Claude] commit pushed: 'feat: add hover state to button'
[Bot] Vercel Preview updated: https://your-app-pr-42.vercel.app
# レビュアー確認 → approve → merge → 本番自動デプロイ
この構成の 本当の威力は 「PRが終わるまで人間がコード触らない」シナリオが現実になること。ベテランvs若手、ホワイトカラー消滅論 で書いた通り、「AIがジュニア仕事を吸収」の最も具体的な実装がここにある。チームがレビューに集中、実装は AI が代行する分業構造になる。
6. プレビュー環境戦略——ブランチ→URL→A/B
3アプローチ共通で重要なのが 「プレビュー環境を戦略的に使い倒す」こと。Vercel は 非productionブランチ全部にユニークURLを自動発行するため、「同じコード変更を3パターン試して比較」が無料に近いコストで可能だ。
プレビュー環境の3つの活用パターン
env vars は development / preview / production で完全分離——staging用 secret が本番に漏れることはない。
コスト管理：auto-deploy 無効化すれば AI が暴走しても build minutes は爆発しない。
7. 落とし穴4つ——env漏洩・コスト爆発・競合・rollback
AIエージェントに自動デプロイを任せると 必ず4つの落とし穴に遭遇する。事前に対策を仕込んでおけば事故8割回避。
AIエージェント運用の4つの落とし穴
対策：.gitignore に必ず .env*、Secret Scanner（GitHub Push Protection）有効化、AIへ「git add . は使うな」指示。
対策：Vercel Spending Limit設定、preview auto-deploy無効化、AIへ「最後にまとめてpush」指示。
対策：1PR=1Issue=1AIエージェントの分業ルール、ブランチ命名規則、CODEOWNERSで自動承認制限。
対策：Vercel Instant Rollback機能、Sentry等のエラーモニタ、本番デプロイは必ず人間承認ゲート。
ガード3点セット：Spending Limit + Cloudflare proxy 前段 + Sentry エラー監視。
これで「AIが暴走しても致命傷にならない」状態が作れる。
追加注意：「AIに本番デプロイを完全自動化」は推奨しない。アプローチ②③でも、本番デプロイだけは人間の最終承認を挟むのが2026年5月の現実解。AIに渡す情報の注意点 でも触れたが、AI は 「悪意のないミス」でも本番を壊す可能性がある。preview / staging までは無人化、本番は人間承認の 2段階ゲートを必ず設ける。
まとめ
「Claude Code / Cursor から Vercel へのデプロイ」は2026年5月時点で 「ブラウザに切り替える時代」が完全に終わった。Vercel Agent Skills（MCP）と Claude Code GitHub Actions v1.0 で 「コード→ビルド→デプロイ→preview URL→env管理→ロールバック」が全部AIエージェント内で完結する。
選び方は 「あなたの開発スタイル」で決まる：① 個人開発 → git push型（5分セットアップ・60〜90秒デプロイ）、② Vercelダッシュボード月10回以上開く中堅 → MCP直結型（Cursor + .cursor/mcp.json）、③ PRレビュー文化のチーム → GitHub Actions型（@claude メンションで自動修正＋preview デプロイ）。プレビュー環境は A/B比較・ステージング・クライアント共有の3パターンで活用、4つの落とし穴（env漏洩・コスト爆発・PR競合・rollback漏れ）には Spending Limit + Cloudflare proxy + Sentry + 本番人間承認のガードを必ず仕込む。
関連記事として、AI推奨Vercel、Vercel AI SDK、v0 vs Bolt vs Lovable、Cursor解説、AIにインフラ任せていい？ も併読してほしい。
FAQ
Q. Vercel以外のホスティング（Cloudflare Pages・Netlify）でも同じことできますか？
A. 類似のことは可能だがエコシステムは弱い。Cloudflare/Netlifyにも公式CLI・GitHub連携はあるが、Vercel Agent Skills（MCP）に相当する公式エージェント統合は2026年5月時点で未提供。AI連携ではVercelが半年〜1年先行。AI推奨Vercel で書いた選択基準を参照。
Q. Claude Code と Cursor、どちらが Vercel デプロイに向いていますか？
A. どちらもMCP対応で機能はほぼ同等。Claude Code は ターミナル中心・GitHub Actions統合が公式、Cursor は IDE中心・スラッシュコマンドUI が直感的。VS Code 派なら Cursor、ターミナル派なら Claude Code が自然。両方使う人も多い。
Q. AI に本番デプロイを完全自動化させていいですか？
A. 推奨しない。preview / staging までは無人化OK、本番は必ず人間の最終承認を挟む。理由は「AIが悪意なくとも本番を壊す」可能性と、「事故時の責任が曖昧化」するため。GitHub Branch Protection で main ブランチへの直接push禁止＋ApprovalルールでPR必須にする。
Q. .cursor/mcp.json の Token は git に含めていい？
A. 絶対NG。.cursor/ 全体を .gitignore に追加するか、.cursor/mcp.json を 環境変数経由で読む形にする。Vercel Token が漏れると 第三者があなたのプロジェクトに自由にデプロイ可能になる致命的事故。
Q. GitHub Actions の Claude API 料金が心配です。
A. 1 PR あたり数セント〜数十セント（コード規模次第）。月数百円〜数千円に収まることが多いが、「AIが無限ループ」事故対策に Anthropic API の月次 spending limit 必須。Claude Code Action v1.0 では step count制限もデフォルトで効く。
