Build an AI Chatbot in NextJS: A Step-by-Step Guide

This tutorial walks you through the process of creating a fully functional AI chatbot using NextJS. By leveraging the AI Vercel SDK alongside OpenAI, you'll build a chatbot that supports real-time streaming responses and renders Markdown content for a polished user experience. Follow these steps to build your chatbot in just 30 minutes.

1. Install the AI SDK

Start by installing the AI Vercel SDK, which simplifies the integration of artificial intelligence into your NextJS project.

Installation Commands

Run the following command to install the necessary dependencies:

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

Next, ensure you add your OpenAI API key to your .env file:

OPENAI_API_KEY=xxxxxxxxx

2. Create Your Client Page

Develop a client-side page that serves as the user interface for your chatbot. This React component manages message display and user input.

Sample Code for the Chatbot Interface

'use client';

import { useRef, useEffect, KeyboardEvent } from 'react';
import { useChat } from '@ai-sdk/react';
import { Send, User, Bot } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Textarea } from "@/components/ui/textarea";
import { Button } from '@/components/ui/button';
import { MemoizedMarkdown } from '@/components/memoized-markdown';

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

    const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            handleSubmit(e);
        }
    };

    const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        handleInputChange(e);
        if (textAreaRef.current) {
            textAreaRef.current.style.height = 'auto';
            textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
        }
    };

    useEffect(() => {
        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    }, [messages]);

    return (
        <div className="flex flex-col h-[80vh] md:h-[70vh] w-full max-w-[80%] mx-auto pb-24">
            <div className="flex-1 overflow-y-auto px-4 py-6 space-y-4">
                {messages.map(m => (
                    <div key={m.id} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
                        <Card className="bg-opacity-30 border-4 rounded-lg shadow-md text-white max-w-full">
                            <CardContent className="flex items-center space-x-2">
                                {m.role === 'user' ? <User /> : <Bot />}
                                <MemoizedMarkdown id={m.id} content={m.content} />
                            </CardContent>
                        </Card>
                    </div>
                ))}
                <div ref={messagesEndRef} />
            </div>

            <form onSubmit={handleSubmit} className="py-4 border-t">
                <div className="relative">
                    <Textarea
                        ref={textAreaRef}
                        className="w-full p-2 resize-none rounded-lg"
                        value={input}
                        placeholder="Say something..."
                        onChange={handleInput}
                        onKeyDown={handleKeyDown}
                        rows={1}
                    />
                    <Button type="submit" className="absolute right-2 bottom-2">
                        <Send className="w-4 h-4" />
                    </Button>
                </div>
            </form>
        </div>
    );
}

Key Features:

• Auto-scroll to the latest message.
• Expandable textarea that adjusts based on content.
• Quick message submission using the Enter key.

3. Create a Route Handler

Set up a backend route handler to process chat streams and handle real-time interactions with OpenAI.

Sample Route Handler Code

import { openai } from '@ai-sdk/openai';
import { streamText, Message } from 'ai';

export const maxDuration = 30;

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

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
  });

  return result.toDataStreamResponse();
}

This handler uses webhooks to process streaming responses from OpenAI, ensuring minimal boilerplate code while delivering a responsive chatbot experience.

4. Add Markdown Rendering

Enhance the user experience by rendering bot responses in styled Markdown. This approach supports code blocks, links, and various formatting options out of the box.

Sample Markdown Rendering Code

import { marked } from 'marked';
import { memo, useMemo } from 'react';
import ReactMarkdown from 'react-markdown';

const MemoizedMarkdownBlock = memo(({ content }) => (
    <ReactMarkdown>{content}</ReactMarkdown>
));

export const MemoizedMarkdown = memo(({ content, id }) => {
    const blocks = useMemo(() => marked.lexer(content).map(token => token.raw), [content]);

    return blocks.map((block, index) => (
        <MemoizedMarkdownBlock key={`${id}-block_${index}`} content={block} />
    ));
});

This component ensures that all bot responses are rendered cleanly, making them easy to read and visually appealing.

5. Conclusion

In just 30 minutes, you've built a complete AI chatbot in NextJS. Your chatbot now features:

• A responsive user interface for real-time communication.
• A lightweight backend that handles streaming responses seamlessly.
• An optimized Markdown renderer for beautifully formatted messages.

Technical Note: This implementation is built with NextJS, but you can achieve similar results in any language or framework by following the same integration principles: install the necessary SDK, configure your backend, and implement a robust message rendering system.