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
Top comments (0)