Creating a Document Processor for Contextual Retrieval

Welcome to the first lesson of our course on building a RAG-powered chatbot with LangChain and JavaScript! In this course, we'll be creating a complete Retrieval-Augmented Generation (RAG) system that can intelligently answer questions based on your documents. At the heart of any RAG system is the document processor . This component is responsible for taking your raw documents, processing them into a format that can be efficiently searched, and retrieving the most relevant information when a query is made. Think of it as the librarian of your RAG system — organizing information and fetching exactly what you need when you ask for it.

Understanding the Document Processor

The document processing pipeline we'll build today consists of several key steps: Loading documents from files (like PDFs) Splitting these documents into smaller, manageable chunks Creating vector embeddings for each chunk Storing these embeddings in a vector database Retrieving the most relevant chunks when a query is made This document processor will serve as the foundation for our RAG chatbot. In later units, we'll build a chat engine that can maintain conversation history and then integrate both components into a complete RAG system. By the end of this course, you'll have a powerful chatbot that can answer questions based on your document collection with remarkable accuracy. Let's start building our document processor!

Setting Up the Document Processor Class

First, we need to create a class that will handle all our document processing needs. This class will encapsulate the functionality for loading, processing, and retrieving information from documents. Let's start by setting up the basic structure of our DocumentProcessor class: JavaScriptimport { OpenAIEmbeddings } from "@langchain/openai"; import { RecursiveCharacterTextSplitter } from "langchain/text_splitter"; import { PDFLoader } from "@langchain/community/document_loaders/fs/pdf"; import { FaissStore } from "@langchain/community/vectorstores/faiss"; class DocumentProcessor { constructor() { this.chunkSize = 1000; this.chunkOverlap = 100; this.embeddingModel = new OpenAIEmbeddings({ model: "text-embedding-3-small" }); this.vectorstore = null; } } In this constructor, we're setting up several important parameters: chunkSize: This determines how large each document chunk will be (measured in characters). We're using 1000 characters as a default, which is a good balance between context size and specificity. chunkOverlap: This specifies how much overlap there should be between consecutive chunks. Overlap helps maintain context across chunk boundaries. embeddingModel: We're using OpenAI's embedding model to convert our text chunks into vector representations. vectorstore: This will hold our Faiss vector store, which we'll initialize later when we process our first document. These parameters can be adjusted based on your specific needs. For example, if you're working with technical documents where context is crucial, you might want to increase the chunk size and overlap.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Implementing Document Loading and Chunking

Now that we have our class structure set up, let's implement the methods for loading documents and splitting them into chunks.

First, we'll create a method to load documents based on their file type:

JavaScript

async loadDocument(filePath) {
    // Load a document based on its file type
    if (filePath.endsWith('.pdf')) {
        const loader = new PDFLoader(filePath);
        return await loader.load();
    } else {
        throw new Error("Unsupported file format");
    }
}

This method checks the file extension and uses the appropriate loader. Currently, we're only supporting PDF files, but you could easily extend this to support other file types like text files, Word documents, or HTML.

Next, let's implement the method that will process a document and add it to our vector store:

JavaScript

async processDocument(filePath) {
    // Load the document
    const docs = await this.loadDocument(filePath);
    
    // Split the document into chunks
    const textSplitter = new RecursiveCharacterTextSplitter({
        chunkSize: this.chunkSize,
        chunkOverlap: this.chunkOverlap
    });
    const splitDocs = await textSplitter.splitDocuments(docs);
    
    // Create or update the vector store
    if (this.vectorstore === null) {
        this.vectorstore = await FaissStore.fromDocuments(splitDocs, this.embeddingModel);
    } else {
        await this.vectorstore.addDocuments(splitDocs);
    }
    
    return splitDocs;
}

This method does several important things:

It loads the document using our loadDocument method.
It creates a RecursiveCharacterTextSplitter with our specified chunk size and overlap.
It splits the loaded document into chunks.
It either creates a new Faiss vector store (if this is the first document) or adds the chunks to our existing vector store.

In our processDocument method, we check if this.vectorstore is null. If it is, we create a new Faiss vector store from our document chunks using the familiar fromDocuments method. If not, we use the addDocuments method to incorporate new chunks into our existing vector store without rebuilding the entire database — this powerful feature allows us to incrementally expand our knowledge base, giving us the flexibility to start with a single document and gradually add more as needed.

Putting It All Together: Using the Document Processor

Now that we've built all the components of our document processor, let's see how to use it in a complete RAG workflow. We'll create a simple example that:

Initializes our document processor
Processes a PDF document
Retrieves relevant context for a query
Uses a chat model to generate a response based on this context

Here's the complete example:

JavaScript

import DocumentProcessor from './DocumentProcessor.js';
import { ChatOpenAI } from "@langchain/openai";
import { ChatPromptTemplate } from "@langchain/core/prompts";

// Initialize the document processor
const processor = new DocumentProcessor();

// Process a document
const filePath = "data/a_scandal_in_bohemia.pdf";
const chunks = await processor.processDocument(filePath);
console.log(`Processed ${chunks.length} chunks from ${filePath}`);

// Initialize the chat model
const chat = new ChatOpenAI({
  model: "gpt-5.6-luna",
  reasoningEffort: "none",
});

// Define a query
const query = "What is the main mystery in the story?";

// Retrieve relevant context
const relevantDocs = await processor.retrieveRelevantContext(query);
const context = relevantDocs.map(doc => doc.pageContent).join("\n\n");

// Create a prompt template for RAG
const promptTemplate = ChatPromptTemplate.fromTemplate(
  "Answer the following question based on the provided context.\n\n" +
  "Context:\n{context}\n\n" +
  "Question: {question}\n\n" +
  "Answer:"
);

// Format the prompt with our context and query
const prompt = await promptTemplate.format({
    context: context,
    question: query
});

// Get the response from the model
const response = await chat.invoke(prompt);

// Print the question and the AI's answer
console.log(`Question: ${query}`);
console.log(`Answer: ${response.content}`);

This example demonstrates the complete RAG workflow:

We process a document and store its chunks in our vector store.
We define a query about the document.
We retrieve the most relevant chunks for this query.
We create a prompt that includes both the query and the retrieved context.
We send this prompt to a language model to generate a response.

When you run this code with the PDF of "A Scandal in Bohemia" (a Sherlock Holmes story), you might get output like:

text

Question: What is the main mystery in the story?
Answer: The main mystery in "A Scandal in Bohemia" revolves around retrieving a compromising photograph that Irene Adler possesses. This photograph shows her with the King of Bohemia, and the king fears it could damage his reputation and upcoming marriage to a Scandinavian princess. He hires Sherlock Holmes to recover this photograph before Irene can use it to blackmail him or reveal their past relationship.

The language model's response is based on the specific context we provided, which helps ensure that it's accurate and relevant to our document.