Chat With Your PDFs: Part 2 - Frontend - An End to End LangChain Tutorial. Build A RAG with OpenAI.
Austin Vance
Posted on January 29, 2024
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
💖 💪 🙅 🚩
Austin Vance
Posted on January 29, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.