Despliegue automático de Claude Code / Cursor a Vercel — Tres flujos para la era de Vercel Agent Skills (mayo 2026)

"Claude Code editó el archivo, ahora cambia al terminal, git push, cambia al navegador, abre el panel de Vercel..." Eso era lo normal hasta 2025. Desde mayo de 2026, Vercel publica oficialmente sus Agent Skills (vía MCP) y un plugin para Claude Code, y Cursor se conecta con un único archivo .cursor/mcp.json. "Editar código, construir, desplegar, comprobar la URL de preview, actualizar variables de entorno, hacer rollback" ocurre todo dentro del agente de IA. El "impuesto" de tener que cambiar al navegador desapareció.

De entrada: la realidad de 2026 es combinar los tres enfoques. (1) Mínimo (git push, despliegue automático en 60-90 segundos) basta para desarrollo en solitario. (2) MCP-Direct (Vercel Agent Skills) permite que Cursor o Claude Code llamen a vercel deploy directamente, ideal para quien cambia de entorno a diario. (3) GitHub Actions + Claude Code Action da a los equipos "comentar @claude en un PR, la IA arregla y vuelve a desplegar el preview", perfecto para culturas con mucha revisión. No hay un "mejor" absoluto: hay un "mejor para tu flujo de trabajo".

Mi opinión personal de entrada: solo con 1-3 proyectos, (1); trabajo diario multi-entorno, (2); equipo orientado a revisión, (3). Las minas más grandes: fugas de variables de entorno y "la IA despliega sola, los costes explotan". Defiéndete con spending limit + previews restringidos + Cloudflare como proxy delante: ese es el conjunto de protecciones estándar de 2026. Léelo junto con La IA recomienda Vercel, Cursor explicado y ¿Puede la IA con la infraestructura? para tener todo el contexto. Este artículo recorre las tres implementaciones, la estrategia de preview y las cuatro trampas, todo con código que funciona, basado en datos de mayo de 2026.

1. Por qué "agente de IA + despliegue en Vercel" es el estándar de 2026

Hasta 2025, "que la IA escriba código" y "desplegar" eran dos mundos separados. Editas en Cursor o Claude Code, cambias al terminal, git add . && git commit -m "fix" && git push, cambias al navegador, miras el panel de Vercel, copias la URL de preview y la pegas en Slack. Ese cambio de contexto pasaba decenas de veces al día y envenenaba poco a poco la experiencia de desarrollo.

En 2026 cambiaron dos cosas grandes. (1) Vercel publicó Agent Skills (Model Context Protocol = MCP), el mecanismo que permite a los agentes de IA llamar a las APIs de Vercel "como herramientas, directamente". (2) Anthropic publicó Claude Code GitHub Actions v1.0: escribes @claude fix this bug en un comentario de PR y la IA ejecuta la corrección, el deploy de preview y la respuesta al comentario automáticamente. Que la propia Vercel lanzara vercel/vercel-deploy-claude-code-plugin va en la misma dirección.

El flujo estándar de mayo de 2026 ya es: "En Cursor, di 'añade esta funcionalidad, despliégala y dame la URL de preview', y 30 segundos después la URL aparece en el chat". Como contamos en Qué es MCP y Claude Agent SDK, MCP se ha convertido en "el USB-C que conecta agentes de IA con tus sistemas de negocio", y esta integración con Vercel es el ejemplo más claro funcionando.

2. Los tres enfoques en 5 minutos

Compara los tres por "peso del setup x profundidad de la automatización".

Guía rápida para elegir: "¿Abres el panel de Vercel más de 10 veces al mes?" El (2) compensa el setup. "¿La revisión de PR es diaria?" El (3) alivia muchísimo. "¿Escala de blog personal?" El (1) basta: pasarte de ingeniería costará más en mantenimiento de lo que ahorra.

3. Enfoque 1: Mínimo (despliegue automático con git push)

La base más usada. Conectas Vercel y GitHub una sola vez y cada git push dispara un deploy que está en línea en 60-90 segundos. La IA solo "escribe código, escribe el mensaje de commit y ejecuta 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

El valor real de este montaje: "cada rama recibe una URL de preview generada automáticamente". Empuja feature/red-button y Vercel levanta https://your-app-git-feature-red-button-yourname.vercel.app sin que hagas nada. Dile a la IA "crea la rama feature/redesign, actualiza el diseño y pega la URL de preview en Slack" y todo el bucle ocurre sin tocar nada.

Cuidado: el plan Hobby prohíbe el uso comercial. Repasa las trampas de precio en La IA recomienda Vercel §5. Si la IA empieza a generar previews en masa, los build minutes se queman volando.

4. Enfoque 2: MCP-Direct (Cursor + Vercel Agent Skills)

El enfoque estrella de 2026. Los Agent Skills (servidor MCP) oficiales de Vercel se conectan directamente a Cursor o Claude Code y dejan que el agente de IA llame a las APIs de Vercel directamente. El paso de "cambiar al navegador" desaparece por completo.

# 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

Eso es todo lo que necesitas para usar estos slash commands dentro de 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

La gran ventaja real: "todo ocurre dentro de la conversación". Di "añade esta API, despliega a preview y, si hay error, lee los logs y arréglalo" y la IA ejecuta editar código, /deploy, /logs, detectar el error, corregir, /deploy de nuevo, de forma autónoma. En el marco del semáforo de ¿Puede la IA con la infraestructura?, esto es zona "amarilla": el humano se centra en "aprobación final y monitorización de costes".

Quien use Claude Code tiene el vercel-deploy-claude-code-plugin oficial de Vercel. Instálalo para obtener las mismas capacidades.

5. Enfoque 3: GitHub Actions (PR-driven completo)

El enfoque cumbre para equipos. Con Claude Code GitHub Actions v1.0 basta con mencionar @claude en un comentario de PR y la IA ejecuta edición de código + tests + deploy de preview + respuesta en el PR automáticamente.

# 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 }}

Esto reescribe la operación. Ejemplo de flujo de 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

El verdadero poder: el escenario en el que "los humanos no tocan el código hasta que el PR está listo" se vuelve real. Como discutimos en veteranos vs junior y ¿la IA eliminará el trabajo de oficina?, "la IA absorbe el trabajo junior" tiene aquí su implementación más concreta. El equipo se concentra en revisión, la IA implementa: esa es la nueva división del trabajo.

6. Estrategia de preview — rama, URL, A/B

En los tres enfoques, "usar los entornos de preview con estrategia" es la palanca. Vercel emite automáticamente una URL única para cada rama que no sea producción, así que "prueba el mismo cambio de tres formas y compara" es prácticamente gratis.

7. Cuatro trampas — fugas de env, costes, conflictos, rollback

Si pones el deploy automático en manos de un agente de IA, caerás en cuatro trampas, garantizado. Monta las defensas desde el principio y evitas el 80% de los incidentes.

Aviso adicional: "automatizar del todo el deploy a producción con IA" no se recomienda. Incluso con los enfoques (2) y (3), exige aprobación humana para los deploys de producción: esa es la realidad de mayo de 2026. Como contamos en precauciones con lo que le das a la IA, la IA puede romper producción por errores absolutamente inocentes. Automatiza hasta preview o staging y bloquea producción con aprobación en dos pasos.

Resumen

"Desplegar desde Claude Code o Cursor a Vercel": en mayo de 2026, la era de "cambiar al navegador" se acabó. Vercel Agent Skills (MCP) y Claude Code GitHub Actions v1.0 colapsan "código, build, deploy, URL de preview, gestión de env, rollback" en un único flujo dentro del agente.

Elige según tu flujo de trabajo: (1) desarrollo en solitario, git push (5 min de setup, 60-90 s de deploy), (2) desarrollador intermedio que abre el panel de Vercel más de 10 veces al mes, MCP-Direct (Cursor + .cursor/mcp.json), (3) equipo orientado a revisión, GitHub Actions (@claude, auto-fix + preview deploy). Usa los previews para comparativa A/B, staging permanente y revisión con cliente. Defiéndete de las cuatro trampas (fuga de env, explosión de costes, conflictos de PR, rollback olvidado) con Spending Limit + Cloudflare como proxy + Sentry + aprobación humana en producción.

Relacionados: La IA recomienda Vercel, Vercel AI SDK, v0 vs Bolt vs Lovable, Cursor explicado, ¿Puede la IA con la infraestructura?

FAQ

P. ¿Esto funciona también en Cloudflare Pages o Netlify?
R. Se pueden hacer cosas parecidas, pero el ecosistema es más débil. Cloudflare y Netlify tienen CLIs oficiales e integración con GitHub, pero a fecha de mayo de 2026 no tienen el equivalente a Vercel Agent Skills (MCP) como integración nativa con agentes. En integración con IA, Vercel va por delante 6-12 meses. Mira los criterios de selección en La IA recomienda Vercel.

P. Claude Code vs Cursor para deploys en Vercel, ¿cuál es mejor?
R. Ambos soportan MCP y las capacidades son casi equivalentes. Claude Code es céntrico al terminal y trae integración oficial con GitHub Actions; Cursor es céntrico al IDE con una UI intuitiva de slash commands. La gente de VS Code tiende a Cursor; la de terminal a Claude Code. Mucha gente usa los dos.

P. ¿Debería dejar que la IA automatice por completo los deploys de producción?
R. No. Preview o staging, automatízalo todo, perfecto. Producción siempre debe requerir aprobación humana. Razón: la IA puede romper producción por errores inocentes y "quién es responsable después de un incidente" se vuelve ambiguo. Usa GitHub Branch Protection para prohibir push directos a main y exigir reglas de aprobación.

P. ¿El token de .cursor/mcp.json debe ir a git?
R. Bajo ningún concepto. Mete todo el directorio .cursor/ en .gitignore, o lee .cursor/mcp.json desde variables de entorno. Una fuga del token de Vercel implica que terceros pueden desplegar en tu proyecto a placer: incidente crítico.

P. Me preocupa el coste de la API de Claude desde GitHub Actions.
R. Más o menos céntimos a decenas de céntimos por PR según el tamaño del código, en general unos pocos dólares al mes. Para evitar "bucles infinitos de IA", configura un spending limit mensual en la API de Anthropic. Claude Code Action v1.0 también trae límites de número de pasos activados por defecto.