Build a RAG Chatbot with Next.js: Step-by-Step Developer Guide

npx create-next-app@latest rag-chatbot
cd rag-chatbot

npm install openai chromadb @xenova/transformers

OPENAI_API_KEY=your_openai_api_key_here

const { ChromaClient } = require("chromadb");
const OpenAI = require("openai");
const fs = require("fs");

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

const documents = [
  {
    id: "doc1",
    text: "Our return policy allows returns within 30 days of purchase.",
  },
  {
    id: "doc2",
    text: "We offer free shipping on orders over $50 to the continental US.",
  },
  {
    id: "doc3",
    text: "Customer support is available Monday to Friday, 9am to 6pm EST.",
  },
];

async function ingest() {
  const collection = await chroma.getOrCreateCollection({
    name: "knowledge_base",
  });

  for (const doc of documents) {
    const response = await openai.embeddings.create({
      model: "text-embedding-3-small",
      input: doc.text,
    });

    await collection.add({
      ids: [doc.id],
      embeddings: [response.data[0].embedding],
      documents: [doc.text],
    });

    console.log(`Ingested: ${doc.id}`);
  }

  console.log("Ingestion complete.");
}

ingest();

node scripts/ingest.js

import { NextResponse } from "next/server";
import OpenAI from "openai";
import { ChromaClient } from "chromadb";

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

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

  // 1. Embed the user's question
  const embeddingResponse = await openai.embeddings.create({
    model: "text-embedding-3-small",
    input: message,
  });
  const queryEmbedding = embeddingResponse.data[0].embedding;

  // 2. Retrieve the most relevant documents
  const collection = await chroma.getCollection({ name: "knowledge_base" });
  const results = await collection.query({
    queryEmbeddings: [queryEmbedding],
    nResults: 3,
  });

  const context = results.documents[0].join("\n\n");

  // 3. Build the prompt with retrieved context
  const systemPrompt = `You are a helpful assistant. Answer questions using only the context provided below. If the answer is not in the context, say you don't know.

Context:
${context}`;

  // 4. Stream the response
  const stream = await openai.chat.completions.create({
    model: "gpt-4o",
    stream: true,
    messages: [
      { role: "system", content: systemPrompt },
      { role: "user", content: message },
    ],
  });

  const encoder = new TextEncoder();
  const readable = new ReadableStream({
    async start(controller) {
      for await (const chunk of stream) {
        const text = chunk.choices[0]?.delta?.content || "";
        controller.enqueue(encoder.encode(text));
      }
      controller.close();
    },
  });

  return new Response(readable, {
    headers: { "Content-Type": "text/plain; charset=utf-8" },
  });
}

"use client";

import { useState, useRef, useEffect } from "react";

export default function ChatPage() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const bottomRef = useRef(null);

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

  async function sendMessage(e) {
    e.preventDefault();
    if (!input.trim()) return;

    const userMessage = { role: "user", content: input };
    setMessages((prev) => [...prev, userMessage]);
    setInput("");
    setLoading(true);

    const res = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message: input }),
    });

    const reader = res.body.getReader();
    const decoder = new TextDecoder();
    let assistantText = "";

    setMessages((prev) => [...prev, { role: "assistant", content: "" }]);

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      assistantText += decoder.decode(value);
      setMessages((prev) => {
        const updated = [...prev];
        updated[updated.length - 1] = {
          role: "assistant",
          content: assistantText,
        };
        return updated;
      });
    }

    setLoading(false);
  }

  return (
    <main className="max-w-2xl mx-auto p-6 flex flex-col h-screen">
      <h1 className="text-2xl font-bold mb-4">RAG Chatbot</h1>

      <div className="flex-1 overflow-y-auto space-y-4 mb-4">
        {messages.map((msg, i) => (
          <div
            key={i}
            className={`p-3 rounded-lg ${
              msg.role === "user"
                ? "bg-blue-100 ml-8"
                : "bg-gray-100 mr-8"
            }`}
          >
            <p className="text-sm font-semibold mb-1 capitalize">{msg.role}</p>
            <p>{msg.content}</p>
          </div>
        ))}
        <div ref={bottomRef} />
      </div>

      <form onSubmit={sendMessage} className="flex gap-2">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Ask a question about your data..."
          className="flex-1 border rounded-lg px-4 py-2 focus:outline-none"
          disabled={loading}
        />
        <button
          type="submit"
          disabled={loading}
          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50"
        >
          Send
        </button>
      </form>
    </main>
  );
}

chroma run --path ./chroma_db

npm run dev

User Question
     ↓
Embed the question (OpenAI)
     ↓
Search vector database (Chroma)
     ↓
Retrieve top 3 relevant chunks
     ↓
Build prompt with context
     ↓
Stream GPT-4o response
     ↓
Display to user

npm install pdf-parse

const pdfParse = require("pdf-parse");
const fs = require("fs");

const buffer = fs.readFileSync("./docs/handbook.pdf");
const data = await pdfParse(buffer);
const text = data.text;