Tutorial: Build a Custom chatbot with LangChain, OpenAI, and React

RAG (Retrieval-Augmented Generation) chatbots are one of the most practical AI applications for businesses right now. The idea: instead of asking an LLM what it knows from training data, you give it your documents and ask questions about those. Support chatbots that actually know your product. Knowledge bases that can answer questions from your SOP library. Internal tools that reason over your company's Confluence or Notion.

This tutorial builds one from scratch. We'll use LangChain for orchestration, OpenAI for the LLM, Pinecone for vector storage, and React for the chat UI.

Prerequisites

• Node.js 18+
• OpenAI API key (paid account)
• Pinecone account (free tier works)
• Basic React and TypeScript knowledge

Step 1: Set Up the Project

mkdir rag-chatbot && cd rag-chatbot
npm init -y
npm install langchain @langchain/openai @langchain/pinecone @pinecone-database/pinecone pdf-parse

Step 2: Ingest Documents into Pinecone

// scripts/ingest.ts
import { PDFLoader } from 'langchain/document_loaders/fs/pdf';
import { RecursiveCharacterTextSplitter } from 'langchain/text_splitter';
import { OpenAIEmbeddings } from '@langchain/openai';
import { PineconeStore } from '@langchain/pinecone';
import { Pinecone } from '@pinecone-database/pinecone';

const pc = new Pinecone({ apiKey: process.env.PINECONE_API_KEY! });
const index = pc.index('my-docs');

// Load and chunk the PDF
const loader = new PDFLoader('./docs/manual.pdf');
const docs = await loader.load();

const splitter = new RecursiveCharacterTextSplitter({
  chunkSize: 1000,
  chunkOverlap: 200,
});
const chunks = await splitter.splitDocuments(docs);

// Embed and store
const embeddings = new OpenAIEmbeddings({ model: 'text-embedding-3-small' });
await PineconeStore.fromDocuments(chunks, embeddings, { pineconeIndex: index });
console.log(`Ingested ${chunks.length} chunks`);

Run this once to load your documents. Subsequent runs add to the index — if you're refreshing content, delete the index first.

Step 3: Build the Query Chain

// src/lib/chain.ts
import { ChatOpenAI } from '@langchain/openai';
import { createRetrievalChain } from 'langchain/chains/retrieval';
import { createStuffDocumentsChain } from 'langchain/chains/combine_documents';
import { ChatPromptTemplate } from '@langchain/core/prompts';
import { PineconeStore } from '@langchain/pinecone';

export async function buildChain() {
  const vectorStore = await PineconeStore.fromExistingIndex(embeddings, { pineconeIndex: index });
  const retriever = vectorStore.asRetriever({ k: 4 });

  const prompt = ChatPromptTemplate.fromMessages([
    ['system', 'Answer based only on the context below. If unsure, say so.

Context: {context}'],
    ['human', '{input}'],
  ]);

  const llm = new ChatOpenAI({ model: 'gpt-4o-mini', temperature: 0 });
  const combineChain = await createStuffDocumentsChain({ llm, prompt });
  return createRetrievalChain({ retriever, combineDocumentsChain: combineChain });
}

Step 4: Streaming React Chat UI

For streaming responses, call the chain in a Next.js/Node route handler and use the ReadableStream API to pipe tokens to the frontend as they arrive. The frontend uses the useChat hook from the Vercel AI SDK, which handles streaming state out of the box.

// In your React component
import { useChat } from 'ai/react';

export function ChatWidget() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
  });

  return (
    <div>
      {messages.map(m => <div key={m.id}><b>{m.role}:</b> {m.content}</div>)}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button disabled={isLoading}>Send</button>
      </form>
    </div>
  );
}

Costs to Expect

For a small knowledge base (100-200 pages), embedding costs are minimal ($0.02-0.10 one-time). Query costs depend on usage — at 1,000 queries/month using GPT-4o-mini, expect roughly $1-5. The biggest variable is how much context you retrieve per query (we use k=4 chunks).