Vercel for the frontend — LobeChat public portal at the edge
Chatwoot / Dify are stateful backends and don't belong on Vercel. But stateless frontends like LobeChat one-click deploy globally with zero ops.
Vercel boundaries#
Vercel suits stateless, short-request, edge-rendered frontends. For AI support:
| Component | Fits Vercel? |
|---|---|
| LobeChat (public AI chat portal) | ✓ Great fit |
| Astro / Next.js marketing site | ✓ Great fit |
| Chatwoot (Rails + Sidekiq) | ✗ Stateful, long connections |
| Dify Web console | ✓ But API/Worker live elsewhere |
| Dify API (Python) | ✗ Long connections + queue |
| n8n | ✗ Persistence required |
Correct architecture: frontend (LobeChat / marketing) on Vercel; backend (Dify API, Chatwoot, n8n) on Railway / fly.io / VPS.
Deploy LobeChat to Vercel#
1. Fork#
https://github.com/lobehub/lobe-chat → Fork.
2. Import to Vercel#
https://vercel.com/new → Import Git Repository → pick your fork. Vercel auto-detects Next.js.
3. Key env#
# Backend pointer (required)
OPENAI_API_KEY=app-xxxxxxxx # actually a Dify app key
OPENAI_PROXY_URL=https://dify.your.com/v1
# Database (Vercel Postgres or external Supabase)
DATABASE_URL=postgresql://...
NEXTAUTH_SECRET=$(openssl rand -base64 32)
# OAuth (optional)
AUTH_GOOGLE_ID=...
AUTH_GOOGLE_SECRET=...
# Multi-model (optional)
ANTHROPIC_API_KEY=...
GROQ_API_KEY=...4. Deploy + custom domain#
Click Deploy. 1-2 minutes later open the preview URL, confirm chat works.
Settings → Domains → add chat.your.com. Vercel auto-CNAMEs and issues TLS.
5. Functions for edge logic#
LobeChat uses Vercel Functions for LLM streaming. Default Fluid Compute (2026), Node 24 LTS — full Node APIs available, 300 s timeout.
Cost#
| Resource | Monthly |
|---|---|
| Vercel Hobby (personal) | $0 |
| Vercel Pro (team) | $20 / seat |
| Backend Dify (Railway / VPS) | $30-60 |
| LLM tokens | $10-50 |
| Total | $30-130 / mo |
Hobby caps: 100GB egress / mo and no commercial use — production needs Pro.
What else fits Vercel#
- Marketing sites (e.g. this site, Astro) — perfect fit
- Marketing + blog (Next.js + MDX)
- Hosts for Chatwoot widget embed SDK scripts
- Custom chat UIs that consume Dify app APIs
- Pure-static Astro docs sites
Honest limitations#
| Limit | Impact |
|---|---|
| Function 300s timeout | Multi-minute LLM responses get cut |
| No native WebSocket | Chatwoot’s realtime won’t work |
| No persistent disk | Attachments must go to external S3 |
| No static IPv4 from edge | Email gets spam-flagged |
| Usage-based billing | Burst traffic blows budget |
Pitfalls#
- OAuth callback URLs — Vercel preview domains change per PR; whitelist wildcards
- NEXTAUTH_URL — set to production domain, not vercel.app subdomain
- DB connection pool — use Vercel Postgres’s built-in PgBouncer, not direct
- Cold start — 1-3 s on Hobby idle; Pro reduces noticeably