How to Add an AI Chatbot to Your Next.js App in 2026 (The Right Way)

Every client is asking for it. "Can we add an AI assistant to the site?" The answer is yes — and it's simpler than most people think. Here's exactly how to do it in a Next.js app using the Vercel AI SDK.

This isn't a toy demo. By the end, you'll have a real streaming chat interface wired to an LLM, built with the App Router pattern that's actually production-ready.

---

What You'll Build

• A chat UI with streaming responses (no waiting for the full reply)
• A Next.js API route that handles the AI calls server-side
• Clean component structure you can drop into any existing project

Stack: Next.js 15/16, TypeScript, Tailwind CSS, Vercel AI SDK

---

Why the Vercel AI SDK?

You could call OpenAI directly. But the Vercel AI SDK gives you:

• Streaming out of the box — useChat handles all the state for you
• Model-agnostic — swap between GPT-4o, Claude, Gemini without rewriting logic
• Built for Next.js — App Router support is first-class

---

Step 1: Install Dependencies

``bash pnpm add ai @ai-sdk/react zod `

You'll also need an API key from your model provider — OpenAI, Anthropic, or via the Vercel AI Gateway.

---

Step 2: Create the API Route

Create app/api/chat/route.ts:

`typescript import { streamText } from 'ai'; import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) { const { messages } = await req.json();

const result = streamText({ model: openai('gpt-4o'), system: 'You are a helpful assistant.', messages, });

return result.toDataStreamResponse(); } `

That's it for the backend. The streamText function handles the streaming automatically — no manual SSE setup needed.

---

Step 3: Build the Chat UI

Create app/chat/page.tsx:

`typescript 'use client';

import { useChat } from '@ai-sdk/react';

export default function ChatPage() { const { messages, input, handleInputChange, handleSubmit } = useChat();

return ( <div className="flex flex-col h-screen max-w-2xl mx-auto p-4"> <div className="flex-1 overflow-y-auto space-y-4 mb-4"> {messages.map(m => ( <div key={m.id} className={p-3 rounded-lg ${ m.role === 'user' ? 'bg-blue-100 ml-auto max-w-sm' : 'bg-gray-100 mr-auto max-w-sm' }} > <p className="text-sm">{m.content}</p> </div> ))} </div>

<form onSubmit={handleSubmit} className="flex gap-2"> <input value={input} onChange={handleInputChange} placeholder="Ask something..." className="flex-1 border rounded-lg p-2 text-sm" /> <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm" > Send </button> </form> </div> ); } `

useChat manages the message history, input state, and streaming updates — all in one hook.

---

Step 4: Add Your API Key

Create .env.local:

` OPENAI_API_KEY=your_key_here `

Run pnpm dev and go to /chat. You've got a working AI chatbot with streaming responses.

---

Making It Production-Ready

A few things to add before shipping:

Rate limiting — you don't want unlimited API calls. Add a simple check in the route handler using the user's IP or session.

System prompt customization — change the system field to match your use case: customer support bot, product assistant, FAQ responder.

Error handling — wrap the streamText call in a try/catch and return a proper error response.

Model switching — the AI SDK makes this trivial. Want to use Claude instead?

`typescript import { anthropic } from '@ai-sdk/anthropic'; // replace openai('gpt-4o') with: anthropic('claude-sonnet-4-5') ``

---

What Clients Are Actually Asking For

Most businesses want one of these:

• Support chatbot — answers questions about their product/service
• Lead qualifier — collects info before a sales call
• Internal tool — search through docs or databases

All three use the same foundation you just built. The difference is the system prompt and what data you feed in.

---

Bottom Line

Adding AI chat to a Next.js app in 2026 takes about 30 minutes of setup. The Vercel AI SDK handles the hard parts — streaming, state management, provider abstraction. You focus on the product logic.

If you want this built into your site — whether that's a customer support bot, a product assistant, or something custom — let's talk.