Build a Web App with Response Streaming | LangChain JS Tutorial #3

☕ Buy me a coffee:

☕ Buy me a coffee:

USEFUL LINKS:

Chat with Like Minded Individuals on Discord:

TIMESTAMPS:
00:00 - Introduction to building a web app for LangChain
00:58 - Basic UI Demo
02:42 - Project setup
04:33 - Building the Web App / UI
05:21 - TailwindCSS
18:08 - Next API Route for Streaming LangChain Responses
25:16 - Next Route Handler for Streaming LangChain Responses
31:19 - Next API Route VS Route Handler
32:00 - Outro

#openai #langchain #langchainjs #gpt3 #gpt4 #autogpt #agi #babyagi #chatgpt #nextjs

[leonvanzyl]

Hi guys, I had to make one small change after recording this video to clear the state variable before the API fetch call.
Check out the PAGE.JS file in the APP directory on the Github repo.

Basically it should now look like this.

const handleChatSubmit = async (e) => {
e.preventDefault();
setStreamedData("");

const formData = new FormData(e.currentTarget);

[wadejohnson]

I cannot believe how good this tutorial series is. Leon, I am confused by your generosity. You must not be human. Whoever you are, know that you are very much appreciated. Thank you.

[김준석-dc]

I am currently learning Langchain and planning to build a website using it. This is so far one of the most helpful tutorials for beginner. Thank you so much!

[patousarg]

Thanks man! It’s really helpful!
Would be awesome, if you continue this tutorial, embedding documents as a context in a chat!

[derejew]

This is as usual awesomely clear to follow along series! Thank you so much Leo!

[fitnessigniter]

Your video is amazing, congratulations! But I have a question about how to pass parameters in the API call. Should it be in the body like a regular API call?

[AdrianPerez-dpyq]

Leon as Always amazing video well explained and easy to replicate, could you make more or less the same video but feeding it with pdfs?

[reyco]

Please continue this series Can you use just regular vanilla javascript going forward?

[markoguru]

This is great thanks! Will it work if we use chains? I can't get it to work once i introduce chains like createStuffDocumentsChain or createRetrievalChain. The error i'm getting is either "Response body object should not be disturbed or locked" or "The "chunk" argument must be of type string or an instance of Buffer or Uint8Array. Received an instance of Object"

[abdelmounaimammari]

Not me getting too excited when it's done with NextJs

[moritz]

Hey, first of all thank you very much for this tutorial series. It has been pretty helpful so far! I habe a question: Are you familiar with react and if so, could you make a tutorial about creating a full stack React web app using the OpenAi Api with Langchain and Nodejs?

[markvosloo]

Hi Leon. Thanks so much for the tutorial video. It was VERY helpful. Can you please give some pointers on how to use the PDF Reader to ingest a PDF file (or many) and then query them. That would be much appreciated!

[devBotPlus]

Hi nice one, Why dont you use state to handle formData? why using uncontrolled way such as formData class.

[ate]

Hi I'm not sure if this works in a production environment. For me, it just doesn't stream anymore when deployed on Vercel

[avinier]

Hi great video, can you tell how to store the memory of the conversation while working with nextjs, it gets refreshed after every api call

[giovannimenon]

not working anymore or maybe it never worked