🧭 Day 29 — Capstone Project I: Planning & AI Chatbot

Zero to Hero — Hands-on Next.js Tutorial

Congratulations! You’ve learned all the core concepts. Now, for the final 2 days, we will build a real-world, modern application.

The Project: An AI Chatbot (Clone of ChatGPT). The Stack: Next.js 14, Tailwind, Vercel AI SDK, OpenAI API.

🟦 1. The Architecture

• Frontend: Client Components for the Chat UI (Input, Bubble, Scroll).
• Backend: A Route Handler (/api/chat) to stream the AI response.
• State: The useChat hook from Vercel AI SDK manages everything.

🟩 2. Setup

npx create-next-app@latest ai-chat
npm install ai openai

Get your OpenAI Key and put it in .env.local.

🟧 3. The Backend (api/chat/route.ts)

This uses standard Response streams. Use the Edge runtime for speed!

import { OpenAIStream, StreamingTextResponse } from 'ai';
import OpenAI from 'openai';

// Optional, but recommended: run on the edge!
export const runtime = 'edge';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

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

  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages,
  });

  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

🟥 4. The Frontend (page.tsx)

'use client';

import { useChat } from 'ai/react';

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

  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {messages.map(m => (
        <div key={m.id} className="whitespace-pre-wrap">
          {m.role === 'user' ? 'User: ' : 'AI: '}
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

🧪 Challenge: Day 29

1. Initialize the project.
2. Get it running with your API Key.
3. Send a message “Hello”.
4. Watch the text stream in character-by-character. (That’s the power of the AI SDK + Next.js Streaming!).

See you tomorrow for the Final Polish & Deployment! 🚀