GPT-4 & LangChain PDF Chatbot

A Next.js application that enables natural language querying of multiple large PDF documents using GPT-4, LangChain, and Pinecone vector storage.

https://github.com/davidbmar/gpt4-pdf-chatbot-langchain  ·  public  ·  shipped

What it is

This project is a full-stack web application that allows users to upload or pre-load PDF documents, convert them into vector embeddings, and store them in a Pinecone index. It provides a chat interface where users can ask questions about the content of these PDFs. The system retrieves relevant text chunks from the vector store based on the user's query and uses OpenAI's GPT models to generate contextual answers.

Features

Quickstart

git clone https://github.com/davidbmar/gpt4-pdf-chatbot-langchain.git
cd gpt4-pdf-chatbot-langchain
pnpm install
cp .env.example .env
# Edit .env with your OPENAI_API_KEY, PINECONE_API_KEY, PINECONE_ENVIRONMENT, and PINECONE_INDEX_NAME
mkdir docs
# Add your PDF files to the docs folder
pnpm run ingest
pnpm run dev

Architecture

flowchart TD
    User[User Browser] -->|HTTP Request| NextJS[Next.js App]
    NextJS -->|API Call| ChatAPI[/api/chat]
    NextJS -->|Ingest Command| IngestScript[scripts/ingest-data.ts]
    IngestScript -->|Load & Split| PDFs[PDF Files in /docs]
    IngestScript -->|Embed| OpenAIEmb[OpenAI Embeddings]
    IngestScript -->|Store Vectors| Pinecone[(Pinecone Index)]
    ChatAPI -->|Retrieve Context| Pinecone
    ChatAPI -->|Generate Answer| OpenAIChat[OpenAI GPT-4/3.5]
    ChatAPI -->|Stream Response| User

How it's built

The backend is built with Next.js API routes handling the logic. It uses LangChain for orchestrating the LLM calls, document loading, and text splitting. PDFs are parsed using a custom loader, split into chunks, and embedded using OpenAI's embedding model. These embeddings are stored in Pinecone. During chat, the system performs similarity search in Pinecone, constructs a prompt with retrieved context, and streams the GPT response back to the client.

How it runs

sequenceDiagram
    participant U as User
    participant N as Next.js Frontend
    participant A as API Route (/api/chat)
    participant P as Pinecone
    participant O as OpenAI API

    U->>N: Types question
    N->>A: POST /api/chat {question, history}
    A->>P: Similarity Search (Query Vector)
    P-->>A: Relevant Document Chunks
    A->>O: Send Prompt with Context & Question
    O-->>A: Stream Token Response
    A-->>N: Stream SSE Data
    N-->>U: Display Answer Incrementally

How to apply & reuse

Developers can use this as a starter template for building document-specific Q&A systems. It demonstrates how to integrate vector databases with LLMs for retrieval-augmented generation (RAG). It can be extended to support other document types, different vector stores, or customized prompting strategies for specific domains.

At a glance

CapabilitiesPDF IngestionVector EmbeddingSemantic SearchLLM ChatResponse Streaming
ComponentsNext.js Pages/APILangChain ChainsPinecone Vector StoreOpenAI EmbeddingsCustom PDF LoaderText Splitter
TechTypeScriptNext.jsLangChainPineconeOpenAI APIpdf-parse
Depends onNode.jspnpmOpenAI AccountPinecone Account
Integrates withOpenAI GPT-4/3.5Pinecone Vector Database
PatternsRetrieval-Augmented Generation (RAG)Server-Sent Events (SSE)Vector Similarity SearchDocument Chunking
Reuse tagschatbotpdf-readerlangchainpineconenextjsraggpt-4

⚠ Needs attention