Build a Production-Ready AI Chatbot with Next.js & Vercel AI SDK

Ship a real-time streaming chatbot with model switching, system prompts, and markdown rendering.

In this hands-on project, you will build and deploy a full-stack AI conversational application using Next.js 15, the Vercel AI SDK, and Tailwind CSS. You will handle streaming HTTP responses, tool execution, and local persistence.

Prerequisites:

Basic React & TypeScriptNext.js App Router basics

Tools & Frameworks:

Next.jsVercel AI SDKTailwind CSSLucide React

Implementation Blueprint

Step 013 Checkpoints

Step 1: Set Up Next.js & Install the AI SDK

Initialize the project and install `ai` and provider adapters.

Install `ai` and `@ai-sdk/openai` via npm

Configure `.env.local` with your AI Gateway API key

Verify server-side environment variable access

npm install ai @ai-sdk/openai lucide-react

Never prefix sensitive AI gateway keys with NEXT_PUBLIC_.

Step 023 Checkpoints

Step 2: Create the Streaming Route Handler

Write an edge/node route handler at `app/api/chat/route.ts` using `streamText()`.

Accept `messages` and optional `model` in the request body

Call `streamText()` with OpenAI or Anthropic provider

Return the resulting stream as a `toDataStreamResponse()`

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'),
    messages,
  });
  return result.toDataStreamResponse();
}

Ensure your API route catches 429 rate limit exceptions.

Step 033 Checkpoints

Step 3: Build the Client Chat Interface with useChat

Consume the stream using the React `useChat` hook.

Render the message stream with avatars and timestamps

Handle auto-scroll to the bottom of the chat

Add stop generation and message reload buttons

Use `useChat({ api: '/api/chat' })` for zero-boilerplate stream state.

Finished Building This Project?

Mark project complete to add +500 XP to your profile and unlock the Master Builder badge.