DEV Community

Leo Laish
Leo Laish

Posted on

Deploying Interactive Chatbots on Vercel: A Complete Guide

#vercel #deployment #chatbots #react

Deploying Interactive Chatbots on Vercel: A Complete Guide

Learn how to deploy the AYW chatbot platform on Vercel — frontend, backend, and database migrations. Zero-downtime deployments with preview URLs for every PR.

Published: June 27, 2026 | 14 min read | Part 5 of AYW Dev.to Series

Why Vercel for Chatbot Deployment?

When we built AYW, we evaluated:

  • AWS EC2: Too much DevOps, manual scaling
  • Heroku: Expensive, limited region choices
  • Railway: Great, but smaller ecosystem
  • Vercel: ✅ Perfect for our frontend + easy backend functions

Vercel's advantages for chatbots:

  1. Instant preview deployments (test chatbot on every PR)
  2. Zero-downtime deployments (critical for 24/7 chatbots)
  3. Built-in CDN (fast chatbot widget loading globally)
  4. Serverless functions (backend API without managing servers)
  5. GitHub integration (auto-deploy on push)

AYW Architecture on Vercel 

┌─────────────────────────────────────────────┐
│           Vercel Platform                  │
├─────────────────────────────────────────────┤
│  Frontend (React + Vite)                  │
│  → Static build on Vercel                 │
│  → Deployed to global CDN edge            │
├─────────────────────────────────────────────┤
│  Backend API (Node.js + Express)          │
│  → Converted to serverless functions       │
│  → Runs on Vercel Edge Network            │
├─────────────────────────────────────────────┤
│  Database (PostgreSQL via Prisma)          │
│  → External (Neon, Supabase, or Railway)  │
│  → Connected via environment variables     │
└─────────────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Step 1: Prepare Your AYW Project for Vercel

1.1 Install Vercel CLI 

npm i -g vercel
Enter fullscreen mode Exit fullscreen mode

1.2 Connect Your GitHub Repo 

cd ayw-monorepo
vercel login
vercel link
Enter fullscreen mode Exit fullscreen mode

This creates a .vercel directory with your project config.

Step 2: Deploy the Frontend (React + Vite)

2.1 Configure vercel.json (Root) 

{
  "version": 2,
  "projects": {
    "frontend": {
      "root": "apps/frontend",
      "outputDirectory": "dist",
      "buildCommand": "npm run build",
      "devCommand": "npm run dev",
      "framework": "vite"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

2.2 Frontend package.json Scripts 

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}
Enter fullscreen mode Exit fullscreen mode

2.3 Environment Variables for Frontend

In Vercel Dashboard → Project → Settings → Environment Variables:

VITE_API_URL=https://your-backend.vercel.app
VITE_WS_URL=wss://your-backend.vercel.app
Enter fullscreen mode Exit fullscreen mode

Important: Use VITE_ prefix for client-side env vars (Vite requirement).

2.4 Deploy Frontend 

cd apps/frontend
vercel --prod
Enter fullscreen mode Exit fullscreen mode

Result: Your chatbot widget is now live at https://your-project.vercel.app 🎉

Step 3: Deploy the Backend (Node.js + Express)

Vercel doesn't support long-running Node.js servers. We need to convert Express to serverless functions.

3.1 Create api/index.ts (Entry Point) 

import express from 'express';
import serverless from 'serverless-http';
import cors from 'cors';
import helmet from 'helmet';

import authRoutes from '../src/routes/auth';
import conversationRoutes from '../src/routes/conversations';
import chatbotRoutes from '../src/routes/chatbot';

const app = express();

// Security middleware
app.use(helmet());
app.use(cors({
  origin: process.env.FRONTEND_URL || 'https://your-frontend.vercel.app',
  credentials: true
}));

app.use(express.json());

// API routes
app.use('/auth', authRoutes);
app.use('/conversations', conversationRoutes);
app.use('/chatbot', chatbotRoutes);

// Health check
app.get('/health', (req, res) => {
  res.json({ status: 'ok', timestamp: new Date().toISOString() });
});

// Export as serverless function
export default serverless(app);
Enter fullscreen mode Exit fullscreen mode

3.2 Install serverless-http 

cd apps/backend
npm install serverless-http
Enter fullscreen mode Exit fullscreen mode

3.3 Configure vercel.json for Backend 

{
  "version": 2,
  "builds": [
    {
      "src": "api/index.ts",
      "use": "@vercel/node",
      "config": {
        "includeFiles": ["dist/**"]
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/api/index.ts"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

3.4 Backend Environment Variables

In Vercel Dashboard → Backend Project → Settings → Environment Variables:

DATABASE_URL=postgresql://user:pass@your-db.com:5432/ayw_db
OPENAI_API_KEY=sk-your-openai-key
JWT_SECRET=your-jwt-secret-32-chars-minimum
FRONTEND_URL=https://your-frontend.vercel.app
Enter fullscreen mode Exit fullscreen mode

3.5 Deploy Backend 

cd apps/backend
vercel --prod
Enter fullscreen mode Exit fullscreen mode

Result: Your API is live at https://your-backend.vercel.app 🎉

Step 4: Set Up PostgreSQL Database

Vercel doesn't provide databases. Use a serverless-friendly PostgreSQL provider:

Option 1: Neon (Recommended)

  1. Sign up at neon.tech
  2. Create a project: ayw-production
  3. Copy the connection string: 
postgresql://user:password@ep-cool-neon.us-east-2.aws.neon.tech/ayw_db?sslmode=require
Enter fullscreen mode Exit fullscreen mode
  1. Add to Vercel env vars as DATABASE_URL

Option 2: Supabase

  1. Sign up at supabase.com
  2. Create a new project
  3. Go to Settings → Database → Copy connection string
  4. Add to Vercel env vars

Run Prisma Migrations 

# Locally (with production DATABASE_URL)
npx prisma migrate deploy

# Or use Vercel's build step:
# Add to package.json:
"scripts": {
  "vercel-build": "npx prisma generate && npx prisma migrate deploy && npm run build"
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Deploy the Chatbot Widget

The AYW chatbot widget is a standalone JavaScript bundle that customers embed on their websites.

5.1 Build the Widget 

cd apps/chatbot
npm run build
Enter fullscreen mode Exit fullscreen mode

Output: dist/ayw-widget.js (≈ 50KB gzipped)

5.2 Host on Vercel CDN

Create apps/chatbot/vercel.json:

{
  "version": 2,
  "public": "dist",
  "routes": [
    {
      "src": "/ayw-widget.js",
      "headers": {
        "Cache-Control": "public, max-age=31536000, immutable",
        "Content-Type": "application/javascript"
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

5.3 Embed Code for Customers 

<!-- Add before </body> tag -->
<script>
  window.AYW_CONFIG = {
    companyId: 'your-company-id',
    apiKey: 'your-api-key',
    theme: 'light',
    position: 'bottom-right'
  };
</script>
<script src="https://your-chatbot.vercel.app/ayw-widget.js" async></script>
Enter fullscreen mode Exit fullscreen mode

Step 6: WebSocket Support (Real-Time Chat)

Vercel doesn't support long-lived WebSocket connections. Use Vercel Edge Functions or external service:

Option 1: Vercel Edge (Limited) 

// api/socket.ts (Edge Function)
export const config = {
  runtime: 'edge',
};

export default async function handler(request: Request) {
  // Edge runtime has limited WebSocket support
  // Best for simple HTTP polling fallback
  return new Response('WebSocket not supported in Edge', { status: 426 });
}
Enter fullscreen mode Exit fullscreen mode

Option 2: External WebSocket Service (Recommended)

Use Pusher or Ably for real-time chat:

// Backend: Send message to Pusher
import Pusher from 'pusher';

const pusher = new Pusher({
  appId: process.env.PUSHER_APP_ID!,
  key: process.env.PUSHER_KEY!,
  secret: process.env.PUSHER_SECRET!,
  cluster: 'us2'
});

await pusher.trigger(`conversation-${id}`, 'new-message', {
  message: botResponse,
  timestamp: new Date()
});
Enter fullscreen mode Exit fullscreen mode 
// Frontend: Listen for messages
import Pusher from 'pusher-js';

const pusher = new Pusher('your-pusher-key', {
  cluster: 'us2'
});

const channel = pusher.subscribe(`conversation-${id}`);
channel.bind('new-message', (data) => {
  setMessages(prev => [...prev, data.message]);
});
Enter fullscreen mode Exit fullscreen mode

Step 7: Preview Deployments (Game Changer)

Every pull request gets a unique preview URL:

PR #123: "Add sentiment analysis to chatbot"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ Frontend preview: https://ayw-frontend-git-pr-123.vercel.app
✅ Backend preview:  https://ayw-backend-git-pr-123.vercel.app
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Enter fullscreen mode Exit fullscreen mode

Test the chatbot on preview:

  1. Click the preview URL
  2. Interact with the chatbot widget
  3. Verify functionality before merging

Step 8: Custom Domain Setup

8.1 Add Domain in Vercel

  1. Go to Vercel Dashboard → Project → Settings → Domains
  2. Add chatbot.yourcompany.com
  3. Update DNS records (Vercel provides instructions)

8.2 Update CORS Settings 

// Backend: Update CORS origin
app.use(cors({
  origin: [
    'https://chatbot.yourcompany.com',
    'https://yourcompany.com',
    process.env.FRONTEND_URL!
  ],
  credentials: true
}));
Enter fullscreen mode Exit fullscreen mode

Performance Optimization

1. Enable Caching for FAQ Responses 

// Cache common responses (Redis or in-memory)
const faqCache = new Map<string, string>();

const getBotResponse = async (message: string) => {
  // Check cache first
  if (faqCache.has(message)) {
    return faqCache.get(message);
  }

  // Generate response
  const response = await openai.generateResponse(message);

  // Cache for 1 hour
  faqCache.set(message, response);
  setTimeout(() => faqCache.delete(message), 3600000);

  return response;
};
Enter fullscreen mode Exit fullscreen mode

2. Use Vercel Edge for Geographic Proximity 

// vercel.json
{
  "functions": {
    "api/chatbot.ts": {
      "runtime": "edge",
      "regions": ["iad1", "sfo1", "lhr1"] // US East, US West, London
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Monitoring & Debugging

Vercel Dashboard

  • Deployments: See build logs, errors, and timing
  • Functions: View serverless function invocations
  • Speed Insights: Real-user performance metrics

Custom Logging 

// Log chatbot interactions
await fetch('https://your-logging-endpoint.com/log', {
  method: 'POST',
  body: JSON.stringify({
    conversationId,
    message,
    response: botResponse,
    timestamp: new Date()
  })
});
Enter fullscreen mode Exit fullscreen mode

Cost Breakdown (Vercel Pricing)

Hobby Plan (Free)

  • ✅ Unlimited deployments
  • ✅ Preview URLs
  • ❌ Limited to 100 GB bandwidth/month
  • ❌ No password protection for previews

Pro Plan ($20/month per member)

  • ✅ 1 TB bandwidth/month
  • ✅ Password-protected previews
  • ✅ Advanced analytics
  • ✅ Priority support

AYW Usage:

Resource Free Tier Our Usage Cost
Bandwidth 100 GB 50 GB Free
Serverless Functions 100 GB-hrs 10 GB-hrs Free
Build Minutes 6,000 500 Free

Total: $0/month on Hobby plan (for now) 🎉

Common Deployment Issues

1. "DATABASE_URL not found"

Solution: Add env vars to all three environments (Production, Preview, Development) in Vercel.

2. "Prisma Client not initialized"

Solution: Ensure npx prisma generate runs in build step:

"scripts": {
  "vercel-build": "npx prisma generate && npm run build"
}
Enter fullscreen mode Exit fullscreen mode

3. CORS Errors

Solution: Update CORS origin to include Vercel preview URLs:

const allowedOrigins = [
  'https://your-frontend.vercel.app',
  process.env.FRONTEND_URL!
];

// Add preview URL pattern
if (process.env.VERCEL_URL) {
  allowedOrigins.push(`https://${process.env.VERCEL_URL}`);
}
Enter fullscreen mode Exit fullscreen mode

Complete Deployment Checklist

  • [ ] Frontend deployed to Vercel
  • [ ] Backend API deployed as serverless functions
  • [ ] Database (Neon/Supabase) connected
  • [ ] Environment variables set (all 3 environments)
  • [ ] Prisma migrations run (npx prisma migrate deploy)
  • [ ] Chatbot widget built and hosted on CDN
  • [ ] Custom domain configured (optional)
  • [ ] CORS origins updated
  • [ ] Health check endpoint working (/api/health)
  • [ ] Preview deployments tested on a PR

Resources

Your Turn: What's Your Deployment Setup?

Are you using Vercel, AWS, or something else for your chatbots?

  • What works well?
  • What's been frustrating?
  • Any tips for serverless chatbot deployments?

Drop a comment below! 👇

Tags: #Vercel #Deployment #Chatbots #React #NodeJS #Tutorial

Series: AYW Developer Tutorials (Part 5 of 6)

Top comments (0)