Big language models are good at answering questions, but they have one major limitation: they don’t know what’s inside your private documents.
If you upload a PDF like a company policy, research paper, or contract, the model can’t magically read it unless you give it the content.
This is where the recovery augmented generation, or rag, comes in handy.
Rig lets you associate language models with your data. Instead of guessing from the model, you first retrieve the correct parts of the document and then ask the model to respond using that information.
In this article, you’ll learn how to interact with your own PDF using RAG. You’ll build a backend using LangChain and create a simple reactive user interface for asking questions and viewing answers.
You should be comfortable with basic Python and JavaScript, and have a working knowledge of React and REST APIs. Familiarity with language models and a basic understanding of embedding or vector search would be helpful but not mandatory.
What we will cover
What problem are we solving?
Imagine you have a long PDF with hundreds of pages. Searching manually is slow. Copying text in ChatGPT is not practical.
You want to ask simple questions like “What is the vacation policy?” or “What does this contract say about termination?”
A normal language model cannot answer these questions correctly because it has never seen your PDF. Rig solves this by adding a fetch step before generation.
The system first finds the relevant parts of the PDF and then uses those parts as context for the response.
What is recovery-enhanced generation?
Retrieval extended generation A model has three main steps.
First, your document is divided into small parts. Each part is converted into a vector embedding. These embeddings are stored in a vector database.
Second, when a user asks a question, that question is also converted into an embed. The system searches the vector database to find similar segments.
Third, these parts are sent to the language model along with the query. The model only uses the same context to generate the response.
This approach keeps the answers in your document and reduces clutter.
This system has four main parts:
A PDF loader reads the document.
A text splitter breaks it into chunks.
An embedding model converts text into vectors and stores them in a vector store.
The language model answers questions using retrieved parts.
The frontend is a simple chat interface built in React. It sends the user query to the backend API and displays the response.
This kind of custom Development of vein Helps companies build internal tools that work with their private data instead of sending it to big language models.
Setting up a backend with Langchain
We will use python and langchain for the backend. The backend will load the PDF, construct the vector store, and expose an API to answer queries.
Installing dependencies
Start by installing the required libraries.
pip install langchain langchain-community langchain-openai faiss-cpu pypdf fastapi uvicorn
This setup uses FAIS as the native vector store and OpenAI for embedding and chat. You can change these for other models later.
Loading and distributing PDFs
The first step is to load the PDF and split it into pieces that are small enough to embed.
from langchain_community.document_loaders import PyPDFLoader
from langchain.text_splitter import RecursiveCharacterTextSplitter
loader = PyPDFLoader("document.pdf")
documents = loader.load()
text_splitter = RecursiveCharacterTextSplitter(
chunk_size=1000,
chunk_overlap=200
)
chunks = text_splitter.split_documents(documents)
Chunking is important. If the fragments are too large, the embedding becomes less accurate. If they are too small, the context is lost.
Embedding and creating a vector store
After that, convert the snippets into embeds and store them in phos.
from langchain_openai import OpenAIEmbeddings
from langchain_community.vectorstores import FAISS
embeddings = OpenAIEmbeddings()
vectorstore = FAISS.from_documents(chunks, embeddings)
This step is usually done once. In a real app, you would maintain the vector store on disk.
Creating a recovery chain
Now create a retrieval based question answering chain.
from langchain_openai import ChatOpenAI
from langchain.chains import RetrievalQA
llm = ChatOpenAI(
temperature=0,
model="gpt-4o-mini"
)
qa_chain = RetrievalQA.from_chain_type(
llm=llm,
retriever=vectorstore.as_retriever(search_kwargs={"k": 4}),
return_source_documents=False
)
Retrieval finds the top matching segments. The language model responds using only these parts.
Exposing an API with Fasty
Now wrap this logic in an API so that a React app can consume it.
from fastapi import FastAPI
from pydantic import BaseModel
app = FastAPI()
class QuestionRequest(BaseModel):
question: str
@app.post("/ask")
def ask_question(req: QuestionRequest):
result = qa_chain.run(req.question)
return {"answer": result}
Run the server using this command:
uvicorn main:app --reload
Your backend is now ready.
Building a simple reactive chat UI
Next, create a simple React interface that sends queries to the backend and displays the responses.
You can use any reaction setup. A simple Talk or Create React App project works fine.
Within your main component, manage question input and response state.
import { useState } from "react";
function App() {
const (question, setQuestion) = useState("");
const (answer, setAnswer) = useState("");
const (loading, setLoading) = useState(false);
const askQuestion = async () => {
setLoading(true);
const res = await fetch("http://localhost:8000/ask", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ question })
});
const data = await res.json();
setAnswer(data.answer);
setLoading(false);
};
return (
"2rem", maxWidth: "600px", margin: "auto" }}>
Chat with your PDF
);
}
export default App;
This UI is simple yet effective. It allows users to type in a question, send it to the backend, and display the answer. Make sure to use the latest version of React to avoid incremental additions React to weaknesses.
How Full Flow Works
When the app starts, the backend has already processed the PDF and created the vector store. When a user types a query, the React app sends it to the API.
Converts the backend query to an embed. It searches the vector store for similar fragments. These parts are passed to the language model as context. The model only generates an answer based on that context.
The response is sent back to the frontend and displayed to the user.
Why this approach works better
The chord works well because it keeps the answers in real numbers. The model isn’t guessing – it’s reading from your document.
This approach also scales well. You can add more PDFs, search them again, and use the same chat interface again. You can also change the fos for the host vector database if needed.
Another advantage is control. You decide what data the model can see. This is important for private or sensitive documents.
Common fixes you can add
You can improve this setup in many ways. You can maintain the vector store so it doesn’t rebuild on every restart. You can also include references to documentation in the answer. And you can forward replies for a better chat experience.
You can add authentication, upload new PDFs from the UI, or support multiple documents per user.
Final thoughts
Chatting with PDFs using retrieval-increment generation is one of the most practical uses of language models today. It turns static documents into interactive knowledge sources.
With LangChain handling retrieval for interactions and a simple React UI, you can build a useful system with very little code. The same style can be used for HR policies, legal documents, technical manuals, or research papers.
Once you understand this flow, you can adapt it to many real-world problems where the answers must come from reliable documentation rather than just the model’s memory.