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:
Instant preview deployments (test chatbot on every PR)
Zero-downtime deployments (critical for 24/7 chatbots)
Built-in CDN (fast chatbot widget loading globally)
Serverless functions (backend API without managing servers)
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 │
└─────────────────────────────────────────────┘
Step 1: Prepare Your AYW Project for Vercel
1.1 Install Vercel CLI
npm i -g vercel
1.2 Connect Your GitHub Repo
cd ayw-monorepo
vercel login
vercel link
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"
}
}
}
2.2 Frontend package.json Scripts
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
}
}
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
Important: Use VITE_ prefix for client-side env vars (Vite requirement).
2.4 Deploy Frontend
cd apps/frontend
vercel --prod
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);
3.2 Install serverless-http
cd apps/backend
npm install serverless-http
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"
}
]
}
3.4 Backend Environment Variables
In Vercel Dashboard → Backend Project → Settings → Environment Variables:
DATABASE_URL=postgresql://user:[email protected]: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
3.5 Deploy Backend
cd apps/backend
vercel --prod
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)
- Sign up at neon.tech
- Create a project:
ayw-production
- Copy the connection string:
- Add to Vercel env vars as
DATABASE_URL
Option 2: Supabase
- Sign up at supabase.com
- Create a new project
- Go to Settings → Database → Copy connection string
- 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"
}
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
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"
}
}
]
}
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>
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 });
}
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()
});
// 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]);
});
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
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Test the chatbot on preview:
- Click the preview URL
- Interact with the chatbot widget
- Verify functionality before merging
Step 8: Custom Domain Setup
8.1 Add Domain in Vercel
- Go to Vercel Dashboard → Project → Settings → Domains
- Add
chatbot.yourcompany.com
- 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
}));
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;
};
2. Use Vercel Edge for Geographic Proximity
// vercel.json
{
"functions": {
"api/chatbot.ts": {
"runtime": "edge",
"regions": ["iad1", "sfo1", "lhr1"] // US East, US West, London
}
}
}
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()
})
});
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"
}
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}`);
}
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
Vercel Docs: vercel.com/docs
AYW GitHub: github.com/ayw-ai/ayw-monorepo
Previous Article: Chatbot NLP: AYW's Approach
Neon PostgreSQL: neon.tech/docs
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)
SOCIAL SHARE CARD GENERATOR