Deploying Interactive Chatbots on Vercel: A Complete Guide

┌─────────────────────────────────────────────┐
│ 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 │
└─────────────────────────────────────────────┘

npm i -g vercel

cd ayw-monorepo
vercel login
vercel link

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

{"scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview"}}

VITE_API_URL=https://your-backend.vercel.app
VITE_WS_URL=wss://your-backend.vercel.app

cd apps/frontend
vercel --prod

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);

cd apps/backend
npm install serverless-http

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

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

cd apps/backend
vercel --prod

postgresql://user:password@ep-cool-neon.us-east-2.aws.neon.tech/ayw_db?sslmode=require

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

cd apps/chatbot
npm run build

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

<!-- 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>

// 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 });
}

// 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]);
});

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
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

// 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;
};

//vercel.json{"functions":{"api/chatbot.ts":{"runtime":"edge","regions":["iad1","sfo1","lhr1"]//USEast,USWest,London}}}

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

"scripts":{"vercel-build":"npx prisma generate && npm run build"}

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}`);
}