Table des matières
- 1. Pourquoi « Agent IA + déploiement Vercel » est le standard 2026
- 2. Trois approches en 5 minutes
- 3. Approche 1 : Minimale (git push auto-deploy)
- 4. Approche 2 : MCP-Direct (Cursor + Vercel Agent Skills)
- 5. Approche 3 : GitHub Actions (piloté par PR)
- 6. Stratégie de preview — Branche → URL → A/B
- 7. Quatre pièges — fuites .env, coût, conflits, rollback
- Synthèse
- FAQ
« Claude Code a édité le fichier — maintenant je passe au terminal, git push, je passe au navigateur, j'ouvre le tableau de bord Vercel… » C'était la norme jusqu'en 2025. En mai 2026, Vercel publie des Agent Skills officiels (via MCP) et un plugin Claude Code, et Cursor se connecte avec un seul fichier .cursor/mcp.json. « Éditer le code → builder → déployer → vérifier l'URL de preview → mettre à jour les variables d'environnement → rollback » se fait entièrement dans l'agent IA. La taxe du « passage au navigateur » a disparu.
D'emblée : la réalité 2026, c'est de combiner trois approches. ① Minimale (git push → auto-deploy en 60 à 90 secondes) suffit pour le développeur solo. ② MCP-Direct (Vercel Agent Skills) permet à Cursor / Claude Code d'appeler vercel deploy directement — idéal pour les développeurs qui jonglent entre environnements au quotidien. ③ GitHub Actions + Claude Code Action donne aux équipes « commenter @claude sur une PR → l'IA corrige et redéploie automatiquement la preview » — parfait pour les cultures de revue exigeantes. Il n'y a pas de « meilleure » — il y a une « meilleure pour votre workflow ».
Mon avis personnel d'emblée : solo avec 1 à 3 projets → ①, multi-environnement quotidien → ②, équipe orientée revue → ③. Les plus gros pièges : fuites .env et « l'IA auto-déploie → explosion des coûts ». On se défend avec spending limit + previews restreintes + proxy Cloudflare devant — c'est le jeu de gardes-fous standard 2026. À lire en parallèle : L'IA recommande Vercel, Cursor expliqué et L'IA peut-elle gérer l'infrastructure ? pour le contexte complet. Cet article parcourt les trois implémentations, la stratégie de preview et les quatre pièges — tout avec du code qui fonctionne, ancré dans mai 2026.
Trois workflows — solo / intermédiaire / équipe
— Le « passage au navigateur » était la taxe 2025. Elle a disparu.
Mai 2026 : Vercel Agent Skills (MCP) + Claude Code GitHub Actions v1.0 — « code → deploy » est entièrement piloté par l'agent.
Le temps humain se réduit à l'approbation et la supervision.
1. Pourquoi « Agent IA + déploiement Vercel » est le standard 2026
Jusqu'en 2025, « faire écrire du code par l'IA » et « déployer » étaient deux mondes séparés. Éditer dans Cursor / Claude Code → passer au terminal, git add . && git commit -m "fix" && git push → passer au navigateur, vérifier le tableau de bord Vercel → copier l'URL de preview → la coller dans Slack. Ce changement de contexte arrivait des dizaines de fois par jour, empoisonnant lentement l'expérience développeur.
Deux gros changements en 2026. ① Vercel a publié les Agent Skills (Model Context Protocol = MCP) — le mécanisme qui permet aux agents IA d'appeler les API Vercel « comme des outils, directement ». ② Anthropic a publié Claude Code GitHub Actions v1.0 — écrivez @claude fix this bug dans un commentaire de PR et l'IA exécute la correction, le déploiement de preview et la réponse en commentaire automatiquement. Le fait que Vercel lui-même ait publié vercel/vercel-deploy-claude-code-plugin participe du même élan.
Le flux standard de mai 2026 est désormais : « Dans Cursor, dire 'ajoute cette fonctionnalité, déploie-la, donne-moi l'URL de preview' → 30 secondes plus tard l'URL de preview est dans le chat. » Comme couvert dans Qu'est-ce que MCP et Claude Agent SDK, MCP est devenu « l'USB-C qui connecte les agents IA à vos systèmes métier » — et cette intégration Vercel en est l'exemple concret le plus évident.
2. Trois approches en 5 minutes
Comparez les trois selon « poids du setup × profondeur d'automatisation ».
| Approche | Setup | Automatisation | Taille idéale | Comment c'est utilisé |
|---|---|---|---|---|
| 1. git push | 5 min (un lien GitHub) | ★★☆☆☆ | Solo / 2 à 3 personnes | L'IA édite → vous git push |
| 2. MCP-Direct | 10 min (mcp.json + token) | ★★★★☆ | Solo / intermédiaire / 5 | L'IA appelle vercel deploy directement |
| 3. Actions | 30 min (workflow + secrets) | ★★★★★ | Équipe de 3+ | Commentaire PR @claude → entièrement automatisé |
Guide de choix : « Vous ouvrez le tableau de bord Vercel plus de 10 fois par mois ? » ② vaut le setup. « La revue de PR est quotidienne ? » ③ est nettement plus léger. « Échelle blog perso ? » ① suffit — la sur-ingénierie coûtera plus en maintenance qu'elle n'économise.
3. Approche 1 : Minimale (git push auto-deploy)
La base la plus largement utilisée. Connectez Vercel et GitHub une fois, et chaque git push déclenche un déploiement en ligne en 60 à 90 secondes. L'IA se contente « d'écrire le code, d'écrire le message de commit, de lancer git push ».
# One-time setup
1. Vercel dashboard → Add New Project
2. Pick the GitHub repo → Import
3. Framework Preset: Next.js (auto-detected)
4. Environment Variables: add as needed
5. Deploy → done
# Daily flow (inside Cursor/Claude Code)
> Make this button red. When done, git push to deploy.
# What the AI runs
git add app/components/Button.tsx
git commit -m "feat: change primary button to red"
git push origin main
# Vercel auto-deploys → live in 90 seconds
La vraie valeur de ce setup : « chaque branche reçoit une URL de preview auto-générée ». Poussez feature/red-button et Vercel monte https://your-app-git-feature-red-button-yourname.vercel.app automatiquement. Dites à l'IA « crée la branche feature/redesign, mets à jour le design, colle l'URL de preview dans Slack » — et toute la boucle se fait sans les mains.
Attention : le plan Hobby interdit l'usage commercial. Relisez les pièges tarifaires dans L'IA recommande Vercel §5. Si l'IA se met à générer des previews en masse, les minutes de build brûlent vite.
4. Approche 2 : MCP-Direct (Cursor + Vercel Agent Skills)
L'approche phare 2026. Les Agent Skills (serveur MCP) officiels de Vercel se connectent directement à Cursor ou Claude Code, permettant à l'agent IA d'appeler les API Vercel directement. L'étape « passage au navigateur » disparaît entièrement.
# Setup (10 min)
1. Get a Vercel token: vercel.com/account/tokens
2. In Cursor, create .cursor/mcp.json:
{
"mcpServers": {
"vercel": {
"url": "https://mcp.vercel.com/<team-slug>",
"headers": {
"Authorization": "Bearer <VERCEL_TOKEN>"
}
}
}
}
3. Restart Cursor → confirm MCP server connection
C'est tout ce qu'il faut pour utiliser ces commandes slash depuis Cursor :
# Practical slash commands
/deploy # preview-deploy the current branch
/deploy --prod # production deploy
/status # latest deployment status
/logs # fetch build logs
/env list # list environment variables
/env add KEY VALUE # add env var (preview/production scoped)
/rollback # roll back to the previous deployment
Le vrai gain : « tout se passe dans la conversation ». Dites « ajoute cette API, déploie en preview, s'il y a une erreur lis les logs et corrige » et l'IA exécute édition du code → /deploy → /logs → repère l'erreur → corrige → /deploy à nouveau — de manière autonome. Dans le cadre du feu tricolore de L'IA peut-elle gérer l'infrastructure ?, on est en territoire « jaune » : l'humain se concentre sur « l'approbation finale et la supervision des coûts ».
Les utilisateurs de Claude Code disposent du vercel-deploy-claude-code-plugin officiel de Vercel. Installez-le pour les mêmes capacités.
5. Approche 3 : GitHub Actions (piloté par PR)
L'approche équipe par excellence. Avec Claude Code GitHub Actions v1.0, il suffit de mentionner @claude dans un commentaire de PR et l'IA exécute les éditions de code + les tests + le déploiement de preview + la réponse en commentaire de PR automatiquement.
# Setup (30 min)
1. In Claude Code, run /install-github-app
2. Install on the repo → secrets auto-configured
3. .github/workflows/claude.yml is auto-generated
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. Add preview deploy via .github/workflows/vercel.yml
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 }}
Ça réécrit les opérations. Exemple de flux PR :
# Developer opens a PR → preview auto-deploys
[Bot] Vercel Preview: https://your-app-pr-42.vercel.app
# Reviewer adds a PR comment
@claude also change the hover state on this button
# 5 minutes later Claude commits the fix
[Bot Claude] commit pushed: 'feat: add hover state to button'
[Bot] Vercel Preview updated: https://your-app-pr-42.vercel.app
# Reviewer checks → approve → merge → production auto-deploy
La vraie puissance : le scénario où « les humains ne touchent pas au code jusqu'à la PR finalisée » devient réel. Comme discuté dans seniors vs juniors et l'IA va-t-elle éliminer les emplois cols blancs, « l'IA absorbe le travail des juniors » trouve ici son implémentation la plus concrète. Les équipes se concentrent sur la revue ; l'IA gère l'implémentation — c'est la nouvelle division du travail.
6. Stratégie de preview — Branche → URL → A/B
Pour les trois approches, « utiliser stratégiquement les environnements de preview » est le levier. Vercel émet automatiquement une URL unique pour chaque branche hors production, donc « essayer le même changement en trois versions et comparer » est essentiellement gratuit.
Trois façons d'utiliser les environnements de preview
develop comme environnement de staging permanent. Les variables scope preview signifient que la DB de production est en sécurité ; vérifiez le comportement sans risque.
Les variables d'environnement sont entièrement isolées entre development / preview / production — les secrets de staging ne fuitent jamais en production.
Contrôle des coûts : désactivez l'auto-deploy et même une IA emballée ne peut pas faire exploser les minutes de build.
7. Quatre pièges — fuites .env, coût, conflits, rollback
Confiez l'auto-deploy à un agent IA et vous tomberez sur quatre pièges — garanti. Mettez les défenses en place dès le départ et vous évitez 80 % des incidents.
Quatre pièges des opérations agent IA
Correctif :
.env* dans .gitignore, GitHub Push Protection / Secret Scanner activés, instruire l'IA de ne jamais utiliser git add ..Correctif : Vercel Spending Limit, désactivation de l'auto-deploy preview, instruire l'IA de « grouper et pousser à la fin ».
Correctif : règle 1 PR = 1 issue = 1 agent IA, convention de nommage de branche, CODEOWNERS pour limiter l'auto-approbation.
Correctif : Vercel Instant Rollback, Sentry / monitoring d'erreurs, porte d'approbation humaine obligatoire pour la production.
Le jeu de gardes-fous standard : Spending Limit + proxy Cloudflare devant + monitoring Sentry.
Cela maintient « même si l'IA déraille, les dégâts ne sont pas fatals ».
Mise en garde supplémentaire : « automatiser entièrement les déploiements de production à l'IA » n'est pas recommandé. Même avec les approches ② et ③, exigez l'approbation humaine pour les déploiements de production — c'est la réalité de mai 2026. Comme couvert dans précautions sur ce que vous donnez à l'IA, l'IA peut casser la production par des erreurs purement innocentes. Automatisez jusqu'à preview / staging ; gardez la production avec une approbation à deux étapes.
Synthèse
« Déployer depuis Claude Code / Cursor vers Vercel » — d'ici mai 2026, l'« ère du passage au navigateur » est terminée. Vercel Agent Skills (MCP) et Claude Code GitHub Actions v1.0 condensent « code → build → deploy → URL de preview → gestion des variables d'environnement → rollback » en un seul flux dans l'agent.
Choisissez selon votre workflow : ① dev solo → git push (setup 5 min, deploy 60 à 90 s), ② dev intermédiaire ouvrant le tableau de bord Vercel plus de 10 fois par mois → MCP-Direct (Cursor + .cursor/mcp.json), ③ équipe orientée revue → GitHub Actions (@claude → auto-fix + déploiement preview). Utilisez les previews pour la comparaison A/B, le staging permanent, la revue client. Défendez-vous contre les quatre pièges (fuite .env, explosion des coûts, conflits de PR, rollback oublié) avec Spending Limit + proxy Cloudflare + Sentry + approbation humaine en production.
Connexes : L'IA recommande Vercel, Vercel AI SDK, v0 vs Bolt vs Lovable, Cursor expliqué, L'IA peut-elle gérer l'infrastructure ?
FAQ
Q. Est-ce que ça marche aussi sur Cloudflare Pages ou Netlify ?
R. Des choses similaires sont possibles, mais l'écosystème est plus faible. Cloudflare et Netlify ont tous deux des CLI officiels et une intégration GitHub, mais en mai 2026 ils n'ont pas l'équivalent des Vercel Agent Skills (MCP) pour une intégration agent first-party. Sur l'intégration IA, Vercel mène de 6 à 12 mois. Voir les critères de sélection dans L'IA recommande Vercel.
Q. Claude Code vs Cursor pour les déploiements Vercel — lequel est meilleur ?
R. Les deux supportent MCP et les capacités sont quasi équivalentes. Claude Code est centré terminal et livre une intégration GitHub Actions officielle ; Cursor est centré IDE avec une UI de commandes slash intuitive. Les utilisateurs de VS Code gravitent vers Cursor ; les gens du terminal vers Claude Code. Beaucoup utilisent les deux.
Q. Faut-il laisser l'IA automatiser entièrement les déploiements de production ?
R. Non. Preview / staging — automatisez entièrement, c'est très bien. La production doit toujours exiger une approbation humaine. Raison : l'IA peut casser la production par des erreurs innocentes, et « qui est responsable après un incident » devient ambigu. Utilisez GitHub Branch Protection pour interdire les pushs directs sur main et exiger des règles d'approbation.
Q. Le token dans .cursor/mcp.json doit-il aller dans git ?
R. Surtout pas. Soit ajoutez tout le répertoire .cursor/ au .gitignore, soit lisez .cursor/mcp.json depuis des variables d'environnement. Un token Vercel fuité signifie que des tiers peuvent déployer dans votre projet à volonté — un incident critique.
Q. Je m'inquiète du coût de l'API Claude depuis GitHub Actions.
R. Globalement quelques centimes à quelques dizaines de centimes par PR selon la taille du code — typiquement quelques dollars par mois. Pour éviter les « boucles infinies de l'IA », posez une limite de dépense mensuelle sur l'API Anthropic. Claude Code Action v1.0 a aussi des limites de nombre d'étapes activées par défaut.