DEV Community

Cover image for Chat With Your PDFs: Part 2 - Frontend - An End to End LangChain Tutorial. Build A RAG with OpenAI.
Austin Vance for Focused

Posted on

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

Top comments (0)