nextjs-claude-chatbot

Production-ready Next.js 15 + Claude chatbot starter, powered by Claudexia. Streaming, edge-ready, deploy in 5 minutes.

---

What's inside

• Next.js 15 App Router + React 19
• Vercel AI SDK (ai, @ai-sdk/anthropic) for streaming
• Claudexia as the Claude API provider — pay-per-token, no Anthropic account
• Edge runtime API route — fast global cold starts
• Zero CSS framework — minimal inline styles, easy to rip out and replace
• TypeScript everywhere

Quickstart

1. Clone

npx degit claudexia-api/nextjs-claude-chatbot my-bot
cd my-bot
npm install

2. Get a Claudexia API key

Sign up + top up at claudexia.tech/register.

3. Configure env

cp .env.example .env.local
# Edit .env.local with your CLAUDEXIA_API_KEY

4. Run

npm run dev
# Open http://localhost:3000

Deploy to Vercel

Click the button above, paste your CLAUDEXIA_API_KEY when prompted. Done.

For other platforms (Cloudflare Pages, Netlify, etc.), the API route is edge-compatible — no Node-only deps.

How it works

The chat UI uses Vercel AI SDK's useChat() hook. The API route (src/app/api/chat/route.ts) uses @ai-sdk/anthropic with a custom baseURL pointing at Claudexia:

const claudexia = createAnthropic({
  apiKey: process.env.CLAUDEXIA_API_KEY,
  baseURL: "https://api.claudexia.tech/v1",
})

const result = await streamText({
  model: claudexia("claude-sonnet-4.6"),
  messages: convertToCoreMessages(messages),
})

That's the entire integration. The Anthropic SDK doesn't know it's talking to Claudexia — same wire format, different billing.

Switching models

Change one line in src/app/api/chat/route.ts:

model: claudexia("claude-opus-4.7")     // top reasoning
model: claudexia("claude-sonnet-4.6")   // best price/perf (default)
model: claudexia("claude-haiku-4.5")    // cheapest, fastest
model: claudexia("gpt-5.5")             // OpenAI frontier

Live pricing.

Customize

This starter is intentionally minimal — no Tailwind, no shadcn, no auth. Easy to:

• Drop in your own design system
• Add streaming markdown rendering (e.g. react-markdown)
• Add tool use (Vercel AI SDK supports it natively for Anthropic)
• Add persistence (Postgres, KV, etc.)
• Add auth (NextAuth, Clerk, Supabase)

Why Claudexia for chatbots

• 💸 Pay-per-token — perfect for spiky chatbot traffic, no monthly minimum
• 🌍 Works anywhere — SBP, card, USDT payments
• 🔌 Drop-in — uses standard Anthropic SDK, swap one base URL
• 🎯 All Claude + GPT models — no vendor lock-in

Related

• Claudexia Node SDK
• Claudexia Python SDK
• Cursor + Claudexia config
• Awesome Claude Tools
• Building a Claude customer support bot (blog)

License

MIT — see LICENSE.