Deploy

Deploy

Vercel / Netlify / Cloudflare step-by-step.

Sourcedocs/DEPLOY.md

AgentKit runs on any platform that supports Next.js 16. The hero chat route uses Edge runtime; everything else is static.

Vercel (recommended · 2 minutes)

npx vercel

Vercel auto-detects Next.js 16. Follow the prompts:

  1. Link to your Vercel account (first time only).
  2. Select / create a project.
  3. Accept the default settings — Vercel figures it out.

After the first deploy, add the live-chat credentials:

Vercel dashboard → Your project → Settings → Environment Variables
  OPENAI_API_KEY = sk-...          (Production, Preview, Development)
  UPSTASH_REDIS_REST_URL = https://...
  UPSTASH_REDIS_REST_TOKEN = ...

Redeploy (Vercel does this automatically when you push, or click "Redeploy").

Custom domain

Project → Settings → Domains → Add → type your domain. Follow the DNS instructions.

Netlify (3 minutes)

# Ensure you have the Next.js plugin installed
npm install -D @netlify/plugin-nextjs

Create netlify.toml at the project root:

[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

Then:

npx netlify deploy --prod

Add OPENAI_API_KEY, UPSTASH_REDIS_REST_URL, and UPSTASH_REDIS_REST_TOKEN in Netlify dashboard → Site settings → Environment variables.

Cloudflare Workers

Cloudflare's current full-stack Next.js path is Workers through the OpenNext adapter. Wrangler 4.68+ can detect and configure an existing Next.js project automatically:

npx wrangler deploy

Review the generated wrangler.jsonc and OpenNext files, run the generated preview script, then deploy. Add all three live-chat variables in Workers settings or through Wrangler secrets.

Cloudflare Pages is appropriate only if you convert the project to a static export and remove the live chat API.

Self-hosted (VPS / Docker)

npm run build
npm start
# Runs on PORT=3000 by default

Set all three live-chat variables as shell env vars or through your orchestrator (PM2, systemd, Docker secrets, etc.).

For Docker:

FROM node:22-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:22-alpine AS runtime
WORKDIR /app
ENV NODE_ENV=production
COPY --from=build /app/.next/standalone ./
COPY --from=build /app/.next/static ./.next/static
COPY --from=build /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

Custom domain checklist (whatever platform)

  1. Point DNS: A record (or ALIAS / CNAME depending on provider) to your deploy platform's IP or CNAME.
  2. HTTPS: Most platforms issue Let's Encrypt certs automatically. Verify the green padlock.
  3. PUBLIC_SITE_URL (if you added it): update env vars so og:url and canonical links match production.
  4. Test the chat: open your-domain.com, scroll to hero, send "Hello" — you should see a streamed response.

Troubleshooting

"OPENAI_API_KEY is not configured"

The chat API route returns 503 if the env var isn't set. The hero gracefully falls back to the scripted demo. To fix:

  • Verify the env var is in production (not just local).
  • Redeploy after adding it.

"rate limiting is not configured"

Production live chat requires UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN. Add both credentials and redeploy. The API intentionally returns 503 when Redis is missing or unavailable so model spend cannot become unbounded.

Fonts loading slowly

AgentKit self-hosts fonts via @fontsource, so there's no external network dependency. If you see slow font rendering:

  • Check Network tab — fonts should load from same-origin with fetchpriority="high".
  • Rebuild: npm run build (Next.js may cache stale asset hashes).

Chat streaming cuts off

Edge runtime has a 30-second max duration (maxDuration = 30 in route.ts). If your agent takes longer than 30s, either:

  • Raise maxDuration and switch to runtime = 'nodejs' (no edge, longer timeouts allowed).
  • Move the long-running inference to a separate worker.

I deleted a section and the page is broken

Check src/app/page.tsx — it imports each section. Remove the import AND the JSX usage together.

Questions? Reply to your purchase receipt.

— webdesignhot.com