# Build a Chatbot with Next.js and Kyma API in 5 Minutes

Markdown version of https://kymaapi.com/blog/build-chatbot-nextjs-kyma, for agents and crawlers. Same content as the HTML page.

- Generated: 2026-10-09T21:45:05.593Z
- HTML page: https://kymaapi.com/blog/build-chatbot-nextjs-kyma
- Model catalog: https://kymaapi.com/models.md
- Pricing: https://kymaapi.com/pricing.md

2026-04-12 · 2 min read

> **Update, 2026-09-21.** `gemini-2.5-flash`, which this post suggested for long context, retires on 2026-10-20 and is no longer listed on Kyma. Use `gemini-3-flash`, which the `long-context` alias resolves to; the model list below now names it.

![Chatbot in 5 min](/blog/build-chatbot-nextjs-hero.jpg)

## What You'll Build

A streaming chatbot with:
- Real-time token streaming
- Switch between 6 AI models
- Dark navy + gold theme
- Deploy to Vercel in one click

Total code: under 100 lines. Total cost: free (Kyma gives you $0.50 on signup, spendable on the [free tier](https://kymaapi.com/pricing#free-tier)).

## Prerequisites

- Node.js 18+
- A Kyma API key ([get one free](https://kymaapi.com))

## Step 1: Create the Project

```bash
npx create-next-app@latest my-chatbot
cd my-chatbot
npm install kyma-ai
```

## Step 2: Add Your API Key

```bash
cp .env.example .env.local
```

Edit `.env.local`:
```
KYMA_API_KEY=kyma-your-actual-key
```

## Step 3: Run

```bash
npm run dev
```

Open http://localhost:3000. You're chatting with `qwen-3.6-plus` — the most popular model on Kyma.

## How It Works

### The API Route (15 lines)

```typescript
// app/api/chat/route.ts
import { streamText } from "ai";
import { kyma } from "@kyma-api/ai-sdk";

export async function POST(req: Request) {
  const { messages, model } = await req.json();
  const result = streamText({
    model: kyma(model || "qwen-3.6-plus"),
    messages,
    system: "You are a helpful assistant.",
  });
  return result.toUIMessageStreamResponse();
}
```

The `kyma()` function wraps the Vercel AI SDK's OpenAI-compatible provider. It reads `KYMA_API_KEY` from your environment automatically.

### The Chat UI

The frontend uses `useChat` from `ai/react` — it handles streaming, message state, and the input form. The model selector passes the selected model via the `body` option.

```tsx
const { messages, sendMessage, status } = useChat({
  body: { model }, // passed to the API route
});
```

## Switch Models

The dropdown lets you switch between:
- **qwen-3.6-plus** — best overall quality
- **deepseek-v3** — GPT-5 class, best value
- **deepseek-r1** — chain-of-thought reasoning
- **llama-3.3-70b** — fast, all-around
- **gemini-3-flash** — 1M context window
- **qwen-3-32b** — ultra-fast coding

Each model has different strengths. Try asking the same question to different models to see the difference.

## Deploy to Vercel

Deploy your chatbot to Vercel — add `KYMA_API_KEY` as an environment variable and you're live.

Click the button, paste your `KYMA_API_KEY`, and you're live.

## What's Next

- Add conversation history with [Supabase](https://supabase.com)
- Add tool calling for function execution
- Try the [Vercel AI SDK guide](https://docs.kymaapi.com/guides/vercel-ai-sdk) for more patterns
- Check [model recommendations](https://docs.kymaapi.com/models/recommended) to pick the right model

## Cost

With $0.50 free credit on the [free tier](https://kymaapi.com/pricing#free-tier), you get roughly 500-3,000 chat messages depending on the model. A typical conversation (500 input + 200 output tokens) costs about $0.0008 with `qwen-3.6-plus`.