From 26a586d4b4cc9368f9e841a4d2b4c2c414c3b710 Mon Sep 17 00:00:00 2001
From: Mario Lopez Martinez <mario.lopez@vercel.com>
Date: Fri, 8 May 2026 16:15:52 -0500
Subject: [PATCH] feat(builder): add Vercel as a deploy provider

TanStack Start has first-party support on Vercel via the Nitro Vite
plugin, so add Vercel alongside Cloudflare, Netlify, and Railway in
the builder's deploy actions.

Mirrors the Railway/Nitro path with one deviation: pins the nitro dep
to the stable 'latest' tag (currently a beta) instead of nitro-nightly,
because today's nightly hits a 508 INFINITE_LOOP_DETECTED on every
request when deployed to Vercel. Verified end-to-end with a real
TanStack Start app deployed via this exact config.

Refs: https://vercel.com/docs/frameworks/full-stack/tanstack-start
---
 src/components/ApplicationStarter.tsx        | 13 +++++
 src/components/application-builder/shared.ts |  6 ++-
 src/components/deploy/shared.ts              |  8 ++-
 src/utils/provider-config.server.ts          | 56 +++++++++++++++++++-
 4 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/src/components/ApplicationStarter.tsx b/src/components/ApplicationStarter.tsx
index ea4fa64ac..cd1eea04b 100644
--- a/src/components/ApplicationStarter.tsx
+++ b/src/components/ApplicationStarter.tsx
@@ -832,6 +832,19 @@ export function ApplicationStarter({
                                 Deploy to Railway
                               </Button>
 
+                              <Button
+                                size="sm"
+                                type="button"
+                                onClick={() => {
+                                  void openDeployDialog('vercel')
+                                }}
+                                disabled={!canUseFinalActions}
+                                className="border-black bg-black text-white hover:bg-gray-800 dark:border-white dark:bg-white dark:text-black dark:hover:bg-gray-100"
+                              >
+                                <Rocket className="h-4 w-4" />
+                                Deploy to Vercel
+                              </Button>
+
                               {!showMoreActions ? (
                                 <Button
                                   variant="secondary"
diff --git a/src/components/application-builder/shared.ts b/src/components/application-builder/shared.ts
index bece2adfc..4f29e46eb 100644
--- a/src/components/application-builder/shared.ts
+++ b/src/components/application-builder/shared.ts
@@ -9,7 +9,11 @@ import {
 } from '~/utils/application-starter'
 
 export type StarterTone = 'cyan' | 'emerald' | 'violet'
-export type StarterDeployProvider = 'cloudflare' | 'netlify' | 'railway'
+export type StarterDeployProvider =
+  | 'cloudflare'
+  | 'netlify'
+  | 'railway'
+  | 'vercel'
 export type StarterPackageManager = 'bun' | 'npm' | 'pnpm' | 'yarn'
 export type StarterToolchain = 'biome' | 'eslint'
 
diff --git a/src/components/deploy/shared.ts b/src/components/deploy/shared.ts
index 00b9d83c8..946add446 100644
--- a/src/components/deploy/shared.ts
+++ b/src/components/deploy/shared.ts
@@ -4,7 +4,7 @@
  * Common types, constants, and validation for deploy dialogs.
  */
 
-export type DeployProvider = 'cloudflare' | 'netlify' | 'railway'
+export type DeployProvider = 'cloudflare' | 'netlify' | 'railway' | 'vercel'
 
 export type DeployState =
   | { step: 'auth-check' }
@@ -46,6 +46,12 @@ export const PROVIDER_INFO: Record<DeployProvider, ProviderInfo> = {
     deployUrl: () =>
       `https://railway.com/new/github?utm_medium=sponsor&utm_source=oss&utm_campaign=tanstack`,
   },
+  vercel: {
+    name: 'Vercel',
+    color: '#000000',
+    deployUrl: (owner, repo) =>
+      `https://vercel.com/new/clone?repository-url=https://github.com/${owner}/${repo}`,
+  },
 }
 
 export async function checkRepoNameAvailability(
diff --git a/src/utils/provider-config.server.ts b/src/utils/provider-config.server.ts
index df42b42fc..182fa65d7 100644
--- a/src/utils/provider-config.server.ts
+++ b/src/utils/provider-config.server.ts
@@ -5,7 +5,7 @@
  * This enables 1-click deploys to Cloudflare, Netlify, Railway, etc.
  */
 
-export type DeployProvider = 'cloudflare' | 'netlify' | 'railway'
+export type DeployProvider = 'cloudflare' | 'netlify' | 'railway' | 'vercel'
 
 interface ProviderConfigResult {
   files: Record<string, string>
@@ -47,6 +47,8 @@ export function getProviderConfig(
       return getNetlifyConfig()
     case 'railway':
       return getRailwayConfig()
+    case 'vercel':
+      return getVercelConfig()
     default:
       return { files: {}, devDependencies: {} }
   }
@@ -112,6 +114,18 @@ function getRailwayConfig(): ProviderConfigResult {
   }
 }
 
+/**
+ * Vercel configuration (uses Nitro)
+ */
+function getVercelConfig(): ProviderConfigResult {
+  return {
+    files: {},
+    devDependencies: {
+      nitro: 'latest',
+    },
+  }
+}
+
 /**
  * Sanitize project name for use in configs (lowercase, hyphens only)
  */
@@ -238,6 +252,23 @@ cmd = "npx serve dist -s -l 3000"
       }
     }
 
+    case 'vercel': {
+      // Vercel auto-detects Vite SPA builds via the dist/ output directory
+      // and serves index.html for unmatched routes when configured below.
+      const vercelJson = `{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "npm run build",
+  "outputDirectory": "dist",
+  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
+}
+`
+      return {
+        files: {
+          'vercel.json': vercelJson,
+        },
+      }
+    }
+
     default:
       return { files: {} }
   }
@@ -292,6 +323,12 @@ function updatePackageJson(
         pkg.scripts.build = 'vite build'
         pkg.scripts.start = 'node .output/server/index.mjs'
         break
+
+      case 'vercel':
+        // Vercel auto-detects the build command. Nitro's Vercel preset
+        // outputs the function bundle Vercel expects.
+        pkg.scripts.build = pkg.scripts.build ?? 'vite build'
+        break
     }
 
     return JSON.stringify(pkg, null, 2)
@@ -361,6 +398,22 @@ function updateViteConfig(content: string, provider: DeployProvider): string {
       result = addPluginToConfig(result, 'nitro()')
       break
     }
+
+    case 'vercel': {
+      // Add nitro import if not present
+      if (!result.includes('nitro/vite')) {
+        const lastImportIndex = findLastImportIndex(result)
+        const importStatement = `import { nitro } from 'nitro/vite'\n`
+        result =
+          result.slice(0, lastImportIndex) +
+          importStatement +
+          result.slice(lastImportIndex)
+      }
+
+      // Add nitro() to plugins array
+      result = addPluginToConfig(result, 'nitro()')
+      break
+    }
   }
 
   return result
@@ -414,6 +467,7 @@ export function generateExampleDescription(
     cloudflare: 'Cloudflare',
     netlify: 'Netlify',
     railway: 'Railway',
+    vercel: 'Vercel',
   }
 
   return `${libraryName} example: ${exampleName} (configured for ${providerNames[provider]})`