Part 2: Langchain AI app with Flutterflow & Flowise - No-code Crash Course

hi how's it going Jasper from limo Coast here welcome to part two of our free crash course where we create a chat with PDF or website type of app with flutter flow flow wise super base and open AI in this part this is where our flutter flow chat flows are actually going to connect with flat flow front end and they're going to work together to create that interaction where the user can upload their documents or their website URL into a knowledge base and then chat with that knowledge base to get a very accurate response from our AI chatbot so in this part we'll first cover how to set up your API course on flat tolow and we'll cover how the front end interface is put together how the database is designed how the action chains are implemented and as well as how everything work together so let's set up our API course first we want to create a API call group here and name it flow wise and the API based URL here should be your flow wise domain SL API slv1 / prediction something like that if you're unsure go to any one of your chat flows and click on the AI endpoint button here from the top right corner click on the curl Tab and your base URL should be the first portion of this URL just right before that long and random looking string text those are called the endpoints which we'll be using that part next so we want to paste That Base URL into our API based URL here and we can click save we are creating a group group here because we have three different chat flows right but they all share the same base URL uh do not use the exact same URL as mine here just go to your own flow wise endpoint and then get your base URL because this is just an example I inputed for this course and if you purchase the template yeah don't forget to change that pot now let's create our first post API call for the PDF upser half flow let's create a new API call name it PDF upsert the method type is post and for the API endpoint you can locate it from your flow wise PDF upster half flow go to API endpoint this popup from the top right corner go to curl Tab and the random looking string of text is your endpoint for this particular chat flow and each chat flow share the same base URL but different endpoints and we can add a new header copy and paste this part content type multia form data and let's move on to the body Tab and select multia here now let's set up our variables so we have files which is a uploaded file type and it's not a list we have question it's a string and it's false and the default value is what is this document about and we have the metad data which is a string so you might be asking uh metad data based based on here like if you go to the curl tab if you check that you can see more configurations that you can send you might if you have worked with flowise before you might be asking okay metad data is supposed to be a Json type that is true but the reason why we're doing a string is because as of right now flutter flow doesn't have a way to pass uh Json type from the from the action so we are actually using a string type here but our content is going to be a text combination where we we recreate a Json format so if you have worked with like bubble before with flow wise you might be asking why we're not using a Json type here it's because of a technical constraint that's currently on flutter Flow side uh this is just a workaround but it also works so that's why if you're asking if you haven't integrated flow wise with any no Cod tools you you're probably not even going to catch uh this part so you you can just move on don't worry about that and in step three let's come back to the body type and then add our parameters in so they're basically going to be the same so files question metad data so the value Source are all from variable and we just select the variable that we have set up on the variables tab here so what this part is handling is basically we're going to send these body these parameters with this API call but the values for each of the parameter is actually Dynamic so that's why we want to use a select variable here so when we set up the actions later on we are actually going to pass some information pass the variables in here so to dynamically send different things to that flow wise API endpoint that's why this body is set up this way and we can click save here and this is it you can also test it like you can go to this tab usually you can test your API core but because we're sending an entire file in here so we can't really test it here or I haven't figured out a way to test it here you kind of have to test it in test mode or run mode or actually publish that to the to a domain to test this part test this API call but if you follow the setup exactly it it will work I promise because because I have already made an working app with this exact setup now let's move on let's create our next API call for the web up uper chat flow so we want to have a we want to name this API call web upsert and for the method type it's Post in the API endpoint we we're going to get that from flow wise and you can locate that endpoint from your web uper CH flow and for headers here we want to paste copy and paste this part so we want to copy and paste content type application SL Json so the body type here is actually a Json type here unlike the PDF uh API call because PDF we need to send a file through that API call but for the web upsert everything will is actually a string so we just we can simply use the Json type and we can move on to body and select Json type here we always want to pass the parameters as variables so we always want to set up our variables first and then we can put them into the body here so let's move on to the variables type we we have question and the typ is string it's not a list we have URL this this is where the user is going to provide a URL then we'll ask the uh the chat flow to scrape and then upser the content into our knowledge base the type is string and we also have another string type variable called namespace and this is basically the part of the metadata that we're going to send as a way to filter to label our our embeddings on in our Vector database space so when we later query them we can use these Nam space to search for only the relevant embeddings if you work with pine cone before you already know namespace is actually a feature that's offered by pine cone but it is a pay feature so I think it cost like 70 bucks to use but with this same setup you can achieve the same result but for free and that's why I named these variable namespace just so that uh semantically they mean the same thing and because they're used to achieve the same functionality okay now let's head back to Json our body here and we want to have a Json here and we first we're going to have override config and and as part of over override config we have URL which we can then drag our URL variable here as you can see it's just properly set up there and we have the metad data here and as you can see namespace we can just track that namespace in here here so the re and the reason why for the PDF obser po we have metad dat as the variable but here we have Nam space is because here we already have control over how the metad data PO is structured but with PDF since it it is a workaround so we need to construct the entire metad data so entire this Json body as a as a string right that's why the variables are set up a bit differently because we are working around some flutter flows constraint and for questions we have a question here and we can save here and for this API call we can actually test it you can test it here you can input your url you can put a name space there and you can put a question here I will use my setup here and then I'll show you so you can put your url let's say no codes you can put namespace you can put questions like summarize these and then we can test it and see you have a response here and then on the super Bas side actually I will show you you have yeah yeah you have more embeddings now in the superbase database yep and then you can see that uh they're they're into different chunks and if we click on metad data here you can see that there is a there is a parameter there is a field called namespace here and then namespace it's just the namespace I randomly inputed here so this API call also works but you don't have to test if you follow the exact same structure because I've already tested that for you so you just need to make sure the setup is exactly the same okay now our upser part is done let's make an let's make our third API call which is going to be used to ask question retrieve information and receive a response back again pretty similar to what we have done in the previous two API Calles uh the the metha type is post the endpoint we can find it from flow wise header is the same as the web upsert one it's content type application Json and our body again is corresponding to the header we just used is Json and as you can see we before we actually configure the body we want to configure our variables here and what we're going to do is question string and we're going to add another variable which is nam space string so this name space here is very important we need to use that uh we always need to make sure we pass the name space when we ask question because otherwise just imagine you have multiple documents or URLs scraped and upsert it into your knowledge base if you don't have a way to retrieve specific em retrieve information from specific documental websites what what's going to happen is if you ask chapot to summarize it they're going to summarize all the knowled all the information in your knowledge base but is it's just going to be a mix of all the documents and websites you have upser in there so it's it's not going to be an accurate response it's because you haven't specified which embeddings you want to search for and then formulate your responses based on the information that you asked for so namespace here is as a way to filter through information so you always need to have that here and for question here unlike the previous two calls which they didn't really matter before this question is the your user is going to Define what the question is so these variables going to be uh based on users uh input on the front end and let's go back to the body Tab and a bit similar to the upser here but instead of metad data we actually using superbas metad data filter here as part of the Json structure and the namespace it's going to be inputed here and question it's going to be inputed it's going to be set up here as well as well and you can click save there you have it this is all the API calls that we need to set up and now let's move on to the front end okay now let's quickly talk about the user flow and pages so we're going to have a login page self-explanatory so we're going to have a pretty standard login and sign up page after the user log in or sign up they're going to be here at a homepage so they can select if they want to chat with the PDF or they want to chat with a website or or they want to see their previous chat sessions here so for the we have two officer pages right one is to upload PDF and one is to ask a web page which is also essentially upserting information from this web page so for upload PDF page the user will have a button to upload a PDF locally and they have a widget to preview that PDF that just they just uploaded they have a text input field to give it a name and they finally can upsert the file through our PDF upsert call from this action but from this button here and we're going to attach an action chain on this button to actually do the API call and for the ask web page site for the ask web so for the upsert web page we have a input we have an input for the website URL and then we have a button to make the API call and we're going to add attach an action chain later here to actually make that call and we have a chat page this basically every time a user upser a PDF document or a website after they successfully have uped after they successfully upser information into the knowledge base we're going to redirect them into this chat page and they can start asking questions with our Universal query API and we also have a previous chat page where user can ask questions about PDF or websites that previously they already up upseted so they do not need to add more into the super base before they can ask any questions they can already resume the previous conversation and we have a pretty standard user profile page to edit the information um to or to upgrade or to lock out so based on the user flow our database designed it's as follow so for user collection is pretty standard you can just simply use the flut tolow template and we have a chat sessions collection so here uh this collection is to create chat sessions that user can come back to after they have S successfully upsert PDFs or or websites into the knowledge base this saves users from having to upsert again and if they want to ask more questions the most important fields are link user this is to control access we don't want all your users on your app to see each other's document sessions right they they they shouldn't be able to ask questions about other people's uh documents and you have a query uncore name space this is the filter this is the filter used when querying for information as you can see uh without the right query namespace the other users can have no way to retrieve information from the other documents they have upseted date this is for sorting purposes we can sort users chat sessions with this upseted date uh field so yeah we have this chat sessions collection and for flow wise message collection this is to remember what questions are asked and responses are generated during a chat session I named it flow wise message because message is already is already in use for some of my other apps uh because I'm using actually the same Firebase for that uh you can simply name it message if you don't have other uh collection that's called the same name the most important fields are linked user so it's to control access and you have linked session this is to control what messages to appear uh for each chat sessions because you don't want the message to flood into all the sessions right it doesn't make sense so we want a way to um control what to be displayed in different chat sessions and we have its user this is a Boolean to identify if this is a question sent by the user or a response uh from flow wise okay now let's go to our PDF obser page let's talk about how we can use action from the flut to for front and and actually successfully upser a PDF document so step one let's set up our upload PDF PDF page where you have a button to trigger an action to upload the PDF file we have a text field to name the PDF it has two use cases for these text field in my design we can use these as a way to label the chat sessions but combining that with users ID we can as we can use these as the query uh namespace to filter um to make sure when we chat with our knowledge base we're only chatting with this particular PDF and we have a button to trigger the PDF upsert API Coe so our flow wise chat flow can work its magic to upsert this PDF file into our Vector database and uh so the upload file we're going to attach the store file for store file for upload action here and the upload type will be locco upload and the file type is PDF and we're going to show snack bar just so users know when the the upload hasn't complete yet and the name is is automatically there um but this is going to be used to refer to if you it's more useful when you have multiple actions on the same page but for for for us it doesn't really matter so you don't have to worry about that and you can click on the PDF viewer widget and for the uploaded so the PDF Source will be uploaded file and then we can map the uploaded file into here so every time a user upload a file locally it would just show up here on the PDF viewer widget and then let's talk about our action chain for the start asking button to trigger our PDF upsert API call for flow wise chat flow so that we can upsert the uploaded PDF into our super base we're going to do a backend API call we're going to do the group flow wise and we're going to do the PDF upsert call and for the two variables we can add two variables um are the variables we set up previously we will map our files to our uploaded locco file and for the metad data we need to do a text combination because as we have discussed previously technically we need Json type here but due to the constraint we are using a string type hence we need to use text combination to recreate this Json structure for flow eyes to recognize and use the tech text combination is as shown here so basically the first text is this namespace part and for the text two we basically going to dynamically put you know upsert namespace which is the name of this PDF and we're going to do it underscore and then we're going to plug our users authent authenticated users user ID here so the reason why we want to complicate we we want to make such a long Nam space is because if we don't add the user ID part here we only use our the name for this PDF as the namespace it's not as Rob robust because users can actually name their PDF the same name right so if we don't do these uh user ID after the underscore once multiple users make the same name there's no way for us to tell which PDF belongs to which when later on when the user Make the query call we're actually retrieving all the PDF that's named the same name but some of the information might not even belong to the user who asked the question so so the answers are not accurate to the users and also they might be able to see other people's data which is not great right so if we connect users the way user name the PDF so the value that user give to the PDF naming and we do the underscore and then we connect that with users unique ID that will make sure our filter is very robust we actually only retrieving information that's user specific and that's very and that's spef specific to this particular document that's uploaded by this particular user so this is the reason why we it looks a bit more complicated but that's the reason why we Nam the namespace this way and we can click confirm here and after we add the last part basically to close off the Json uh structure and we can click confirm okay move on so if usually once you add API call usually you you have an action here um but if for some reason didn't show up for you just add a condition conditional action here so basically if the API was successful we create a new chat session document make sure to reference the user at a date created and more importantly store the same metad data Json so we going to put put that into here as the query namespace so that you can use the same query name space as a as a variable later for our Universal query API this is important because without this variable acting as a filter for our Universal query API flow wise will actually just generate responses based on all the data in our super base which is not what the user want and it is a privacy concern so note that we have set up an action output variable name created session PDF this output will be used for the subsequent action where we navigate to our ch page with the newly created set chat session document reference as the page parameter called session breath so these page parameter makes sure that when we go to that page we know what messages to load and within that page when we do the API call we know what the query to use when asking questions to our knowledge base so this is very important if you if you're new to flutter flow and you still very confused with this part uh go to my my Discord Channel and ask me more but to Simply put this is a way for us to tell what information to load on the chat page without this reference we don't know what chat session the user is currently in we don't know what messages to load in the chat page also when we make that API call there is no way for us to specify the the filter when we ask information from the super base now okay let's go to our web upser page so let's say of our page where you have a text input field for website URL and we always want to start that with https and we have a button to trigger the web officer API call and let's set up our action chain for the analyze website button here so the two variables are URL which will just map that uh to the URL text input field value and for the namespace uh we'll simply just do a text combination uh the first part is the the URL and the second part is the underscore and then the third part is the users reference ID okay now if the API is successful we will create a new chat session document make sure to reference the user at a date created and more importantly store the metadata Json as the query name space so that you can use the same query namespace as a variable later for our Universal query API so now that we have set up the action output variable name created a session here this output will be used again is again it's the same as the previous action chain this output would be used for the subsequent action where we can navigate to our chat page with the newly created chat session document reference as the page parameter which is called session ref now let's move on to the chat page and let's see how the these Pages set up and how we actually trigger our Universal query API to retrieve information and receive a generated response from chat jpt okay let's talk about how our page is set up first so we have a list of flow wise message documents here this is a list and we did a backend query here and the collection we quered is flow wise message documents and we actually filtering that by the linked session ref so that we're only showing messages that belong to this particular chat session and also we added a kind of like a safety net as well we want to make sure that messages are created by the authenticated user the list will be sorted by the time created where the bottom of the list is the latest message and on this widget we actually reversed um the list so that is actually appearing from uh so the newest is actually appearing from the bottom and with we have an input text field to to for the user to put their questions in and we have a button to send the questions along with metad dat filter and for the action chain on this button we'll make we'll first make a backend call to create a new flow wise message document and populate all the fields accordingly make sure it's user is true since we want to display messages sent by the user differently in the message list in terms of styling so we can we can identify which are users's question which are the response that sent that are sent back to us from the API call so we want to First create these and then make an Universal API call the two variables we will map are first the question which is mapped to the text field value second the namespace which is the query namespace field value from the current chat sessions document note you will need to use the session ref page parameter for uh for a document from reference back and query first on the parent widget of this button so you can get access to this particular field value so what we have here is actually if you see that here on the parent element I've have done a document from reference query and I use the session ref page parameter to actually get the these particular um chat session documents so that when we make this API call we can use the query namespace field value here uh as part of the API call and if the API call was successful we first reset the text field uh the reason why we wait until the API was success successful to reset the field is so that in case the API failed and the user want to ask again they don't have to input again because the the the text field is not reset so they can quickly do a second try we will then create a new flow wise message document where the message is the API response output which aka the answer to users question generated by uh flow wise remember to make sure that it's user fi it's set to false because now this response is actually not the what user sent it's uh the response generated by chat gbt from flow wise and the rest of the fields will be mapped accordingly and should be pretty straightforward now our chat page is properly set up if you also want to implement the chat history page where users can re-enter a previous chat session and continue the conversation with a particular PDF or website they have upseted let's quickly go through how to implement this feature so for the chat history page you need a list with backend query to get a list of chat sessions that belong to to the authenticated user by using this filter then you want to add an onclick action that navigate to the chat page and also pass the current chat session document reference into the chat page parameter session ref and then when the user click on it they can just go into the chat page with the right session ref again and because we have set up our list accordingly before and it's going to filter based on this current chat session and it's going to filter and it's going to sort that by the created date of the message the list of previous messages should also appear and the user can start chatting resume the conversation with the PDF or the URL they upsert it into the knowledge base again and there you pretty much have it this this is end of this course uh it should be under an hour um but again it depends on your experience with API core with flow wise and with flat to flow if you need more support join my Discord Channel post questions I should be responding within 24 hours hopefully this crash course has been very helpful and I know if you haven't used any of these tools this might be a lot for you to digest in one go but take your time it took me a while to figure this H workflow out as well hopefully it will serve as a good starting point as a good foundation for you to start making your own L chain app with flow wise with flat flow with super a and open Ai and thank you for watching till the end until next time [Music] ciao

Channel: Nomo Codes - AI apps & automation with no-code

Views: 1,429

Keywords: nocode, softr, airtable, design, ux, ui, web design, web development, frontend, backend, lowcode, 3d, spline, product, saas, framer, webflow, googlesheet, zapier, make, integromat, bubble, figma, adobe, plugin, ios, android, pwa, sparkar, lensstudio, chatgpt, gpt4, openai, flutterflow, aigen, generativeai, generativedesign, nocodedesign, nocodeai, automation, MVP, startup, entrepreneur, ai, agi, artificial intelligence, generative ai, gpt, Langchain, Flowise, Supabase, Openai, Chatwithpdf

Id: 5SidcrcuRDA

Length: 30min 53sec (1853 seconds)

Published: Mon Oct 30 2023