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

#ai #webdev #tutorial #react

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: