Creating a Document Processor for Contextual Retrieval

Welcome to the first lesson of our course on building a RAG-powered chatbot with LangChain and TypeScript! In this course, we'll create 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 question 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 question 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. In TypeScript, we can leverage type annotations and class property declarations to make our code more robust and maintainable. TypeScript's type safety helps us catch errors early and provides better tooling support. Here's how we set up the basic structure of our DocumentProcessor class in TypeScript: TypeScriptimport { PDFLoader } from "@langchain/community/document_loaders/fs/pdf"; import { RecursiveCharacterTextSplitter } from "langchain/text_splitter"; import { OpenAIEmbeddings } from "@langchain/openai"; import { FaissStore } from "@langchain/community/vectorstores/faiss"; import { Document } from "@langchain/core/documents"; class DocumentProcessor { private chunkSize: number; private chunkOverlap: number; private embeddingModel: OpenAIEmbeddings; private vectorstore: FaissStore | null; constructor() { this.chunkSize = 1000; this.chunkOverlap = 100; this.embeddingModel = new OpenAIEmbeddings(); this.vectorstore = null; } }import { PDFLoader } from "@langchain/community/document_loaders/fs/pdf"; import { RecursiveCharacterTextSplitter } from "langchain/text_splitter"; import { OpenAIEmbeddings } from "@langchain/openai"; import { FaissStore } from "@langchain/community/vectorstores/faiss"; import { Document } from "@langchain/core/documents"; class DocumentProcessor { private chunkSize: number; private chunkOverlap: number; private embeddingModel: OpenAIEmbeddings; private vectorstore: FaissStore | null; constructor() { this.chunkSize = 1000; this.chunkOverlap = 100; this.embeddingModel = new OpenAIEmbeddings(); this.vectorstore = null; } } Let's break down what each variable does: 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. TypeScript allows us to specify the types of method parameters and return values, making our code more predictable and easier to maintain.

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

TypeScript

async loadDocument(filePath: string): Promise<Document[]> {
    // 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");
    }
}

async loadDocument(filePath: string): Promise<Document[]> {
    // 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");
    }
}

Parameter Types: The filePath parameter is explicitly typed as a string.
Return Type: The method returns a Promise<Document[]>, ensuring that we always return an array of Document objects asynchronously.

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

TypeScript

async processDocument(filePath: string): Promise<Document[]> {
    // Load the document
    const docs: Document[] = await this.loadDocument(filePath);
    
    // Split the document into chunks
    const textSplitter = new RecursiveCharacterTextSplitter({
        chunkSize: this.chunkSize,
        chunkOverlap: this.chunkOverlap
    });
    const splitDocs: Document[] = 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;
}

async processDocument(filePath: string): Promise<Document[]> {
    // Load the document
    const docs: Document[] = await this.loadDocument(filePath);
    
    // Split the document into chunks
    const textSplitter = new RecursiveCharacterTextSplitter({
        chunkSize: this.chunkSize,
        chunkOverlap: this.chunkOverlap
    });
    const splitDocs: Document[] = 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 question
Uses a chat model to generate a response based on this context

Here's the complete example in TypeScript:

TypeScript

import DocumentProcessor from './DocumentProcessor';
import { ChatOpenAI } from "@langchain/openai";
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { AIMessage } from "@langchain/core/messages";
import { Document } from "@langchain/core/documents";

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

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

// Initialize the chat model
const chat = new ChatOpenAI();

// Define a question
const question: string = "What is the main mystery in the story?";

// Retrieve relevant context
const relevantDocs: Document[] = await processor.retrieveRelevantContext(question);
const context: string = 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 question
const prompt = await promptTemplate.format({
    context,
    question
});

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

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

Let's highlight how TypeScript helps in this workflow:

Type Annotations: We specify types for variables such as filePath, chunks, question, relevantDocs, and context, making the code more readable and less error-prone.
Type Safety: When working with the DocumentProcessor, the TypeScript compiler ensures that we only pass and receive the correct types, reducing the risk of runtime errors.
Tooling Support: TypeScript-aware editors provide autocompletion and inline documentation, making it easier to work with complex objects like Document and AIMessage.

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

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.