Deploy Your AI App to Vercel: Zero to Production

You have built an AI-powered application locally and it works great on your machine. Now comes the part that trips up many developers: getting it live in production with reliable performance, proper environment management, and cost-effective scaling.

This guide walks you through deploying an AI application to Vercel, from initial setup to production-ready configuration. Whether you are working with OpenAI, Anthropic, or any other LLM provider, the deployment patterns here apply universally.

Prerequisites

Before starting, make sure you have:

• A working AI application (Next.js recommended, but any framework Vercel supports works)
• A Vercel account (free tier is sufficient to start)
• Node.js 18+ installed locally
• Your LLM API keys ready

Step 1: Install the Vercel CLI

The Vercel CLI gives you direct control over deployments from your terminal.

npm install -g vercel
vercel login

After logging in, verify your connection:

vercel whoami

Step 2: Prepare Your Project Structure

A typical AI app deployed to Vercel follows this structure:

my-ai-app/
├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts    # AI endpoint
│   ├── layout.tsx
│   └── page.tsx
├── .env.local              # Local secrets (never commit)
├── .gitignore
├── next.config.js
└── package.json

Make sure your .gitignore includes .env.local and any other files containing API keys.

Step 3: Configure Your AI API Route

Here is a standard streaming AI endpoint that works well on Vercel:

// app/api/chat/route.ts
import { StreamingTextResponse } from 'ai';
 
export const runtime = 'edge'; // Use edge for lower latency
 
export async function POST(req: Request) {
  const { messages } = await req.json();
 
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
    },
    body: JSON.stringify({
      model: 'gpt-4o',
      messages,
      stream: true,
    }),
  });
 
  return new StreamingTextResponse(response.body);
}

The runtime = 'edge' directive is important. Edge functions start faster and have lower latency for streaming responses compared to serverless functions.

Step 4: Set Up Environment Variables

Never hardcode API keys. Use Vercel's environment variable system:

# Add your API key to Vercel
vercel env add OPENAI_API_KEY
 
# You'll be prompted for the value and which environments to apply it to
# Choose: Production, Preview, and Development

For multiple keys, repeat the process:

vercel env add ANTHROPIC_API_KEY
vercel env add DATABASE_URL

You can also manage environment variables in the Vercel dashboard under Project Settings > Environment Variables.

Step 5: Configure vercel.json

Create a vercel.json at your project root for fine-tuned deployment control:

{
  "framework": "nextjs",
  "regions": ["iad1"],
  "functions": {
    "app/api/chat/route.ts": {
      "maxDuration": 60
    }
  }
}

Key settings explained:

• regions: Deploy close to your users or your LLM provider. iad1 (US East) works well for OpenAI and Anthropic APIs.
• maxDuration: AI responses can take time. The default 10-second timeout is often too short. Increase it to 60 seconds for complex prompts. Pro plans allow up to 300 seconds.

Step 6: Deploy to Production

Run your first deployment:

# Preview deployment (creates a unique URL)
vercel
 
# Production deployment
vercel --prod

The CLI will auto-detect your framework and apply the correct build settings. Your first deployment takes a minute or two while Vercel caches your dependencies.

Step 7: Configure Custom Domain (Optional)

vercel domains add yourdomain.com

Follow the DNS instructions Vercel provides. Propagation typically takes a few minutes with most registrars.

Step 8: Set Up Monitoring and Logs

After deploying, monitor your AI endpoints:

# Stream real-time logs
vercel logs --follow
 
# Check recent deployments
vercel ls

In the Vercel dashboard, use the Functions tab to monitor:

• Invocation count and duration
• Error rates
• Cold start frequency

Practical Tips for AI Apps on Vercel

Handle Timeouts Gracefully

LLM calls can be slow. Implement client-side timeout handling:

const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 55000);
 
try {
  const response = await fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ messages }),
    signal: controller.signal,
  });
  // handle response
} finally {
  clearTimeout(timeout);
}

Use Streaming for Better UX

Streaming responses feel faster to users even when total generation time is the same. The Vercel AI SDK makes this straightforward:

npm install ai

Manage Costs with Rate Limiting

Protect your API keys from abuse. Add basic rate limiting using Vercel KV:

import { kv } from '@vercel/kv';
 
export async function POST(req: Request) {
  const ip = req.headers.get('x-forwarded-for') ?? 'unknown';
  const requests = await kv.incr(`rate:${ip}`);
 
  if (requests === 1) {
    await kv.expire(`rate:${ip}`, 60); // 60-second window
  }
 
  if (requests > 10) {
    return new Response('Rate limited', { status: 429 });
  }
 
  // Continue with AI logic...
}

Cache Repeated Queries

If your app handles similar queries often, cache responses to reduce API costs:

export const revalidate = 3600; // Cache for 1 hour
 
// Or use Vercel KV for more control
const cached = await kv.get(`cache:${queryHash}`);
if (cached) return new Response(cached);

Set Spending Limits

In your Vercel dashboard, go to Settings > Billing > Spend Management to set hard caps. This prevents unexpected bills if your AI endpoint gets unusual traffic.

Common Deployment Issues

Problem: Function timeout errors Solution: Increase maxDuration in vercel.json and ensure your plan supports the duration you need.

Problem: Environment variables not working Solution: Redeploy after adding variables. Preview deployments need the variable assigned to the "Preview" environment.

Problem: CORS errors from your frontend Solution: Add appropriate headers to your API route:

export async function OPTIONS() {
  return new Response(null, {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'POST',
      'Access-Control-Allow-Headers': 'Content-Type',
    },
  });
}

Next Steps

Once your AI app is live on Vercel, consider:

• Adding analytics to track usage patterns
• Implementing A/B testing for different model configurations
• Setting up preview deployments for pull requests
• Integrating with a database for conversation history