Chat With Your PDFs PART 2: Frontend - An End-to-End LangChain Tutorial

In this tutorial, Austin Vance, CEO and co-founder of ‪@austinbv_codes‬, will guide you through building a production-ready AI chatbot with ‪@LangChain‬ that uses retrieval to search court documents. From setting up the back end to deploying the front end on Digital Ocean and Lang serve, you'll have a fully functional chatbot ready to go. Follow along with the code on GitHub and get ready to dive into code using React & Typescript frontend using TailwindCSS, Python and more!

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

Just to remember what happened so far, in Part 1 you learned:

• How to 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‬'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

Chapters

0:00 - Intro

2:30 - Revisit Part 1

4:45 - Inspect the LangServe Output

8:00 - Have the Backend send JSON and Documents Not A String

9:15 - Modify our LCEL Chain for JSON

11:50 - Start Thinking About the Frontend

12:40 - Create React App & Install Dependencies

13:40 - Install & Configure TailwindCSS

15:30 - Start Building the Frontend

30:50 - Start to Handle Input on The Frontend

34:20 - Start Handling Server Communication

39:00 - Dealing with CORS Errors

47:35 - Display User Messages Dynamically

55:28 - Handle Server Returned Messages

57:00 - Handle Server Returned Chunks of Messages

1:00:00 - Display Sources Below AI Messages

1:03:53 - Serve Static Documents from the LangServe Server\

1:06:45 - Coming Next

1:07:00 - Revisit What We Did

1:08:00 - Outro