Chat With Your PDFs: Part 2 - Frontend - An End to End LangChain Tutorial. Build A RAG with OpenAI.

In this video we are going to dive into part two of building and deploying a fully custom RAG with @LangChain and @OpenAI. In this tutorial, code with me, video we will take the LangServe pipeline we developed in Part 1 and build out a fully functioning React & Typescript frontend using TailwindCSS.

The video did end up getting pretty long so we will deploy the app to @digitalocean_staff and to @LangChain in Part 3!

Just to remember what happened so far:

In Part One You will Learned:

• Create a new app using @LangChain's LangServe
• ingestion of PDFs using @unstructuredio
• Chunking of documents via @LangChain's SemanticChunker
• Embedding chunks using @OpenAI's embeddings API
• Storing embedded chunks into a PGVector a vector database
• Build a LCEL Chain for LangServe that uses PGVector as a retriever
• Use the LangServe playground as a way to test our RAG
• Stream output including document sources to a future front end.

In Part 2 we will focus on:

• Creating a front end with Typescript, React, and Tailwind
• Display sources of information along with the LLM output
• Stream to the frontend with Server Sent Events

In Part 3 we will focus on:

• Deploying the Backend application to @DigitalOcean & @LangChain's LangServe hosted platform to compare
• Add LangSmith Integrations
• Deploying the frontend to @digitalocean_staff's App Platform
• Use a managed Postgres Database

In Part 4 we will focus on:

• Adding Memory to the @LangChain Chain with PostgreSQL
• Add Multiquery to the chain for better breadth of search
• Add sessions to the Chat History

Github repo

https://github.com/focused-labs/pdf_rag