Deploy

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 your API key:

Vercel dashboard → Your project → Settings → Environment Variables
  OPENAI_API_KEY = sk-...          (Production, Preview, Development)

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 in Netlify dashboard → Site settings → Environment variables.

---

Cloudflare Pages (edge-first, lowest cost)

Cloudflare's @cloudflare/next-on-pages adapts Next.js for their edge network. Good for latency and cost but requires all routes to be edge-compatible (AgentKit already is).

# Install the adapter
npm install -D @cloudflare/next-on-pages

# Build for Cloudflare
npx @cloudflare/next-on-pages

# Deploy
npx wrangler pages deploy .vercel/output/static

Environment variables via wrangler secret put OPENAI_API_KEY or in the Cloudflare dashboard.

Note: Cloudflare Pages requires edge-compatible APIs throughout. AgentKit is edge-safe, but if you add Node.js-only packages, switch to Workers or Vercel.

---

Self-hosted (VPS / Docker)

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

Set OPENAI_API_KEY as a shell env var or via your orchestrator (PM2, systemd, Docker secrets, etc.).

For Docker:

FROM node:22-alpine AS base
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev

FROM base AS build
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:22-alpine AS runtime
WORKDIR /app
COPY --from=build /app/.next ./.next
COPY --from=build /app/public ./public
COPY --from=build /app/node_modules ./node_modules
COPY --from=build /app/package.json ./
ENV NODE_ENV=production
EXPOSE 3000
CMD ["npm", "start"]

---

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.

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.

— Richard · webdesignhot.com