How to use the OpenAI Assistants in flutterflow

hi my name is Leo mcon and welcome to this video in this video I'm going to show you how you can use the open AI assistance in your flutter Flow app H and if you haven't watched my previous videos flutter flow is a kind of software building app where you can build mobile apps or web apps very easily with a drag and drop can of flow and then you can easily C connect apis to it so in this video I'm going to show you how you can leverage the assistance API from open AI so basically a own trained AI shadow spot that you then can use in your flat flap so you can basically create like a personalized chatbot for your flat flap so let's get started as you can see on my screen currently I'm inside of open Ai and I'm also pressed on this assistance kind of tab up here so the first thing we need to do is just to create an assistant so let's do that now so just press create pretty explanatory and name H we can name it demo instructions your helpful assistant that's default one we can just leave it at that model uh let's do the sh GPT 3.5 turbo 01225 that's good um and for this tutorial I won't Implement any functions or code interpreter retrieval so these are kind of tools that the AI can use so for example if you want your AI to be able to um interpret code run its own code kind of write his own code then you can check this one so you can read here what it does um yeah write and wrun code basically and the retrieval enable assistant with knowledge from files that your that you or your users upload so basically you can upload like PDFs images whatever so if you want to upload an image to an AI you would basically use assistance and then check this one but that's a future video I will show you in this video I will just focus on setting up the kind of assistant overall so now we created this um assistant here the next thing we need to do is just check through their documentation for how we can actually kind of use an assistant because this is not as straightforward as a normal API as you will notice so firstly you will just go from here down to press on documentation here and that will take you into this page here and then just scroll down to assistance and here just press overview so this overview which kind of explain what API calls from their API reference up here that we need to use in order to actually kind of get the response from their assistance so let's now check here so the first create an assistant via API but we already did that so we can skip this step so we can see the steps that we need to follow so first we need to create a Fred then we need to add a message to your Fred and then thirdly or furly create run and then lastly just kind of check for the status of that kind of that run and whenever that's completed then we can leas the messages from the AI and that will kind of be all the steps it's not super clear here but I'll will show you that this is very easy to set up that and we can just check what all of them have um Freds Freds uh what do we have up here Freds oh all of them actually start with Freds so that's pretty great it's going to shake if the crate run yeah perfect then we can actually just copy this first Freds part there and it's going to shake so it's really Freds yep perfect just copy that part go into flaty flow just paste it in there and then just add that so now we can go into the head so the first one was just uh content content type so content type application SL Jon that's the first one the next one was yeah I'm not going to I'm not super good at English though or decent but I can't spell this authorization beers it's going to copy this guy over here so just copy it here perfect and then also now we need an API key so for now I'll will just write this API key like this for now and but you will see the we will kind of replace this with the actual API key so now we can actually just press here add another header and then just ask this add this last guy here so we just add that guy perfect and now we're done with the headers so with the API key we can actually just press on group variables so we can have this API ke uh variable for every single call H or we could just write it up here it doesn't matter you can choose whatever you want actually I just kind of u i just paste it in here just for Simplicity so let's just go here and now we will need to create your own API key for open AI as I hope you know how to do I have I covered it many times in or it's pretty easy to find out you can just go to your open AI then just press API Keys then create a new one I've just stored it here in the browser as usual for these tutorials uh then we can just copy paste this API key instead of this uh placeholder there perfect and then just press it's going to sh Advan settings uh perfect and just add group great so now we added the group now we can start adding the API calls that we need to use in order before we actually kind of make the API call Flow inside of FL flow so let's Now quickly as def find them very fast so we don't have to spend too much time on that so if you press on this group add API call the first API call is um let just shake I think that was Fred right so we can just write M Fred or create Fred create Fred and then that's a post request and the end point we can quickly check that the end point is if you go to the overview here uh we can check that to actually create a Fred we will use just SL frad so nothing more then we will actually we don't need to pause anything as well so that was pretty easy okay that's done then so the end point is uh nothing or just slash okay FRS okay I see that that seems to be a problem so yes let's do this go into the um and here just remove the Fred part there and then just press save now if we create an uh here then we just say create Fred as usual as before post end point Freds perfect and then they were no headers so the B headers but we Define them in the API Group H they were nobody so we don't need to find this no variables nothing actually so we just add press add here and another thing we will need to do um for the assistant is actually to Define what assistant we will be using so you will see later down where is it uh is it for create run yeah okay assistant ID perfect you will need to copy this assistant ID later and but for now and after creating this API call for creating a Fred this is what we have now so per this is actually all we need and to check the um response of this Fred because we want to be able to store this Fred ID so we can use it later to add messages to it as you can see here will they be able to use a Fred ID so we need to know the response of this API call and to do that you can just go over to API reference and I used to you open a different tab so you don't have to yeah so I don't have have to close and open them all the time in here you can see assistants so you scroll down to assistants scroll down to Freds if you press on Fred you can see create Fred and you will see the response so this is the response and the only thing I want to have from here is just ID so then in here we can actually just press uh create thread then response and test we can just add Json path which is do ID or if you want to make it even easier you can actually just test call this API call so we can test call it and get the Fred and you can see that we can just add it from here and now it doesn't show up here since I already added it but you can just test it out and just press add the Json path for the ID so that's all let's move on to the next one which is uh add message I think I'm pretty sure it's going to see uh create Fred add message perfect and that is Freds so Freds slash this perfect and the body should be just an object with a row and a Content great and here's a good thing to note instead of having this Json format we will actually create a custom data type inside of our app that just simplify this process so if you open up um our flood flow then we can just here add message or something add message then for the Endo we will just use this so here and instead of Fred one to three or whatever this is we just switch this for for M Fred ID and this will need to be a v variable that's called uh Fred ID H and that will just be a string perfect so we can actually add the Fred ID that we got from this API call into this one and this will be a post request uh I think that's actually it and now for the kind of that object type that I mentioned now we can just go here to data types check if do we have a message perfect we actually got the message from the last tutorial but just to simplify how this is made you can press this plus button up here name it whatever you want and it will have a roll um field with a string value and a content of string so we basically just create a data type that represent H this data right here and you will see why we do that that's much easier to handle later when we actually Implement these API calls into the flat flow flow and so now if we just go over to um it's going to see here if you go over to their API reference we can now check for messages and you'll see what response we get so create message messages and we will get the response ID H we don't need that is there anything content no so we actually don't need to use anything for the um messages since this is basically the process basically is we create a Fred push push the message to Fred H then we create a run for that specific um Fred and with one assistant specific assistant then we will wait kind of we will make an API call for checking the status of that kind of run and then whenever the API or the AI is done with their run and kind of has created the response then we just list the messages of that threed and grab the latest one which should be the ai's response so that's basically how we do it so firstly we have created the thread now we have actually added the message which we just did here so uh sorry not here if we go into flat flow you see that we actually in the API calls here have the add message which took in the variable Fred ID but we also want to be able to take in the H kind of message so we will say message and this will be the um what is it ajon h yep that's it and then the body which will be a Json format will be the H was it I can remember what the the variable was called so okay wasn't call anything application Json and then just use oh right role users okay so this is not the um one object this is just the user the role and then the content so we can basically for this API call just create a variable that's called um yeah message is good me name this to string and then for the body here we would basically say roll um let's pass the roll as well so let's just say that or by the way yeah yes let's do that roll uh which will be a string and the default will be user user and here we'll basically just have roll roll there then go down here I'm trying to speed this up so this video doesn't get super long and then was was content perfect and just drag in messages there perfect so now we actually created the API call for adding a message to Fred and that that didn't have any important information in the response so now we can move on to the next API call so the next API call is also a post and this is for creating run so create uh create run perfect and the end point we can check here quickly so create run it's this Freds Fred runs uh there and the body is assistant ID instructions okay and we will just skip the instructions for now since we already have kind of embedded that into our AI h so we will just use the assistant ID and so here we can just go in here create run uh we can switch this again and then we just add the Fred ID here the next thing we need to do is just we don't need to add any headers as before H for the body we will add the um assistant ID so we'll have no not text Json and then we'll have the uh what is it uh assistant ID and that will have the value of a assistant ID that we can yes we can say assistant ID and yeah yes variable here and this will be uh a string and this will be a default value so we don't need to pass the assistant ID because we will probably use the same assistant ID but for some reason if you want to use different assistants across your app will AC set this as a variable so we can actually switch between what assistant you want to run for a specific threed so the assistant red will then the default value will just be that um assistant ID that you have up here so if you just copy this go in here and then just default value will be this H perfect body assistant ID just drag this guy in here and I think query parameters uh what's wrong now Fred ID oh we haven't added the Fred ID Fred ID which will be a string add call perfect yeah okay so that was actually this is how to you to create the run and I going to check quickly if the um run and gives some response for some useful information so if you go into the documentation again you can go down to runs create run and we can check the response so uh the Run ID we will need to use because this will be used for another API call um where is it here so retrieve run where we will check the status and so if you go to retrieve run you will see that we will actually need to give the Run ID so um is there anything else important here in this response object assistant ID we already know that stat is cued that's always cued in the beginning start expire set yeah okay run ID is almost the the only one I'm going to use here or it is the one only one I'm going to use so now we just um response test add another Json path for do id id which will be the Run ID not the Fred ID this time so ID and this will be a string okay edit Jason PA type that wasn't too possible okay save perfect so now we created the create run so let's now check the next step and that this step is kind of this will be a get request now because now we will and kind of retrieve the run so we can actually check if the run or the or the AI has been kind of done creating the response so now we just press here on ADD API call and we can say just get run and then we that's a get request and we can go into the assistant overview again so this is the API called we created so the next one is for checking the status and that is just the so SL Freds Fred ID run then run ID so we'll see that we will need both the Run ID and Fred ID here so if we go back in here we can see that it's going to check yep get get run the Fred Fred ID so it's going to and then we also fill in the Run ID and by the way just to clarify you don't need to write exactly this the only important thing is that this spelling here is exactly the same as the variable that will will create for you so you don't have to name it exactly this the I just think this looks pretty good so and then we can just for the uh variables we can now here just say the Fred ID so with the same spelling as before and then they run ID with the same spelling as up here H so add API call and I don't think it was actually any parameters no great so this retrieve this retrieve H where is it goingon to see retrieve run this is the exact API call we're making out now and the response will be here H status so we will want to get the F the status from this API call in order to check if it's still cued or completed so later in flut flow we can create a loop and check this status every second or every half second or whatever and then you check whenever it's and completed then we actually kind of grab the messages so inside here now for the response and test we just pressed on ad Json path H do stay does and that name will just be status that is good status anything yeah that's good enough and then you just press save so though that's the only kind of response field that we actually need to use in order to get this working so the next thing the last thing after making all these AP calls we can finally start implementing it in the flat flow UI and that is just kind of get messages and we can go into this overview again so the overview and this is kind of the list messages so yeah we'll just use the same headress as before no parameters and then we'll just use this uh end point so Freds at Fred ID messages so there and then we just check in the API reference what the response will get so we can check for uh where is it messages H list message and we will get the data okay nice so we will get a list called the data um with these objects here and this object will contain as you can see the role of a certain message and the content so we will basically want to get the H the data uh list and then the last one in order to get the as response so you will see kind of how we do that um and then we will want to get content and then text and then value okay yeah okay I don't want to memorize that just to save time so let's just can of check that later so let's just cop this in here to Freds and then we just do Fred ideas before the AR now created fors before I don't need to explain it anymore head there's nothing uh that's it okay so now for the kind of Json path now to actually get the the response of thei we just press h dot data which was that list then we get the last one let's just try for now with zero I'm pretty sure that it's that way that the as response get added on top so we can just use zero so um data zero and then it's dot content dot uh do text Dot do value and so just going to check if this is right so currently we will get here so data R yeah so we would basically just get here data H the first object so here then we would get content then we would get text and we would get value which is the response H so that's um actually all we need so this would just be uh res bonds perfect uh going to check if everything shaks out value text content data zero H perfect save so that's actually it this is actually how you set up the API calls for the entire flow for kind of using assistant and this could kind of feel like a lot but you will see when we implement this is pretty straightforward okay let's move on with the UI and as you can see I'm in my very good look AA page that I made for this demo page yeah H and it looks really good uh or not but here we can actually see this kind of message flow that I created in a previous video so if you want to check out how to kind of build this um you can check the video out but I will here show you how we can make the API calls for this assistant so the first thing I would kind of advise to do is to decide where when you want to create a new kind of new conversation between the user and AI so for example if you want to create a new conversation each time to refresh the page so for example whenever they get into the page it's a new conversation then I we just go in here to the page state and press on actions and then in here I just delete this and then we can just basically say um API call and then select group assistant then create Fred and so this will basically just create a Fred so creating a Fred is the API called for kind of you know creating a new conversation and you need to decide where you want to do that for example if you want to save the conversation um then you could have um kind of a conditional you you can have an app State called Fred ID and you can check if the Fred ID um is not set then you make this IPI call to create a new conversation but if the Fred ID is already set you can then you can retrieve H the old messages from their old conversation with get messages API call and then just push that to the messages and so you can see for the this um page I actually have these messages list with data type messages I created in the previous video so this is the list where will kind of store all the messages but for for the Simplicity of this video I will make so we actually kind of create a new conversation for each refresh but otherwise you would just use that App State flow as I just described H but here we just press on these actions so create a Fred then we can basically say that we need all by the way we need a page date called uh Fred Fred ID Fred ID uh it's going to oh it needs to be in camel case for some reason there and that will be a string great so confirm okay so now let's go back to actions so here we can say that if it succeeds then we will basically just update the page date variable thread ID and you set this to be this API call response so we basically say API H which API is 5 Y and then we would say Json body predefined path and here we can use the predefined path that we created for this AP call which will call ID did I not save the ID what I'm pretty sure I did I was going to double check uh assistant create Fred response on dear Oh I thought I add the ID here weird id id oh dot did I say any of them I did right oh that didn't have any okay okay I just forgot to say that okay uh then we go just go back to this AI page here and then we just click on page date Fred ID and then we just say API J somebody predefined path and now we have ID confirm okay so the next thing we will need to do is that just on this send button we will grab this input and um kind of push that this input message as a new message to our friend and so let's do that now so we can press on this send button so the first thing we'll need to do is just to um create a new message to the or actually let's call the API first I'm just going to um clear this out so we don't have any old things there so first we make the API call for adding this message to the Fred so we can say API call a group assistant then we just say add message and this message will be the content so the Fred ID we can just use the uh page State Fred ID and for the we're just going to check here for the r we don't need to do anything since the default was user or you can fill in user here do whatever you want uh for the message we just fill in the input field so we search for input uh this label here uh so yeah message input perfect so this will actually just create kind of a new message object we push that kind of the Fred list of messages so the AI can use this when creating the response so this is actually it and then when after succeeding we will also need to create a message object in our own lists so we can kind of keep track of them and show them in that UI so in the page date we'll just say that we for the messages we will add to the list and we will add a new message with the role user and the role here will just kind of decide what icon we show and what side we show the message so we kind of separate the user and the AI and so the content will basically just be the API or wait it's just the input what I'm talking about the input of course H perfect so that's it for kind of adding the message so after adding the message what do we need to do now now we need to create a run so then we can just basically say that we need to uh here uh let's see yeah let's I know that this will kind of run either way if this succeed or not but or actually we can just set the terminate here here so it shuts off or and then you can add some snack bar like um fail to add message or something um up here just to notify user that something went wrong so here we make an API call again but now we will make the API call to create a Fred or not not to create a Fred to create a run so we'll say create run and we will say assistant ID which will we actually don't need to fill this in since we have a default value H the Fred ID though will just be the Fred ID of the page and then if succeeds and if not we can just add terminate again so if this succeeds with creating the run then we will now start to shake if H when this run is done so and doing that we can just do this we can just say um start periodic action perfect and then in this we will make a API call so we can say how often do we need to check every yeah every second is good let's do that um so let's do this every second and then we basically let's do this API call uh assistant and then we just say get run and then we will just say here Fred ID for ID and the Run ID will just be the response of this API call so we can see that API call is something with vvx there uh so we just say here that the Run ID is equal to the API where is it vvx uh and the Jon body and now we'll use the predefined path for status that we got here create oh yeah yeah okay run ID yeah no no no okay sorry my bad um this is the Run ID yeah okay the status is what we will get from this API calls response not the last one so we just use the ID from the last one API calls response perfect so now we make this and get a m APLE and we can basically say terminate if it fails um or actually let's do nothing because this is actually just in a loop so let's just do nothing so if it succeeds then let's do this if it succeeds or yeah exactly then we will check the status of the of the run so we can say add conditional and then we can just say if single condition um API uh and the six piece that name so we can add the API call 6 P oh that the stor and then we can say um API response options J somebody um predefined path and now we use the status and then we can say equal to completed so we can say is some J something there okay we will need to do a test run in order to get this um thing in the right format yeah flood flow is working great now um so we can say get run response and test this will just be uh oh we can't do here okay we will need to do this create Fred response and test there just grab this Fred ID then we will just see here create run create run response and test uh there assistant ID just let's have it there for now then here we just grab the run actually we need to take notes here yeah this is a work I I just need to run the so we can FR ID here for no taking H grab this run ID here go to get run and then response here we'll just say that the Run ID is this and the Fred ID is the one I copied here and this is basically just so we can test run it so we can decide the data type for this status because for some reason flat flow doesn't allow me to set this manually so let's just now test API call status is now string perfect and we can oh now we can change it but we couldn't before okay that makes sense uh nice okay save and let's just do this for the get messages as well so it's going to do Fred ID it's going to check yeah Fred ID then we just press save and then test Backle okay context is going to see data zero content content dot text do value hello I can assist you today shouldn't that be the response here I was going to shake really quickly what I did wrong here uh Jon path oh content at zero okay we need to content Z here as well de oh yeah perfect now it works and now we just press here save Okay small adjustments let's get back to the main task here so now if we go back into the send button here now we can check the status so now we can check here that if the um status of this API call so API uh 6p API options Json body predefined that status perfect and now we can check if that's equal to and a string nice that's working if this equal to completed um if not we don't we don't have to do anything we just no not terminate sorry we just not do anything since then the loop would just go over um after a second if it succeeds or if this is completed um then we would just do this we would just stop stop this we would just say stop and periodic action and stop this timer and now we can just use the whatever uh kind of response now we can list the messages so after we kind of waiting for this Loop to kind of check if it's completed and after it's completed we can just close this Loop and then under here now we can basically just um list the messages and then use it for um to add it to our messages listing UI so now we can say API call H and now we just group assistant and then we just say get messages and now we know that AI will have its messages in here since we actually had this Loop up here to wait for that to happen and so now we can say that the get messages oh Fred ID perfect so here we have just Fred ID uh de H V8 okay nice so if this doesn't succeed then we just add terminate here and then we have some snack bar thing um and if this succeed so if we get the message then we just do this now so now we can say create State page State and now we can add a new message to our message list so we can say just add to list and new message and now the role will be M AI so uh or assistant assistant I just going to double check what we use up here it's going to see this row here so we use assistant perfect okay uh so now we can out also and besides the role we can also add the H the text of this response so the content would just be the API of the what is it mv8 J somebody predefined path and then the response and then confirm and this would basically just kind of this will be the entire flow so if you have done this um it should work I will of course test this now to make sure it works I don't release a video when it doesn't work and so I going to check this error up here local says page Fred ID is non default okay let's just set this to nullable then perfect okay let's now if I I will compile this app now and try out this um this uh this app and see if the r assistant actually works so let's do that now before we go into test mode I just wanted to show you some some small adjustments we need to make in order to make this work and that is to change this um where is it this periodic action here to a normal Loop and then just basically change the Boolean that makes the loop keep going to be false and whenever this status is completed because this periodic action does not stop actions below from happening So currently if we would run this this would check for us completed status but before that has time to get completed this down here would start getting run and then we would basically just get we would get the messages before the AI has actually created the new response so to actually fix this we can just go into app um AI page App State here and just create a new variable called um waiting or something simple and let's just set that to our Boolean perfect great and now we going back to the send button here now we can actually just go down uh below here uh create a loop move this Loop up above here and the loop could basically just be a waiting so it could be waiting and then before this Loop we could set up here the waiting to be true so we can say waiting um set value to true there and then we can just set actually cut this entire action chain here and delete this Loop up here uh and then uh under here we can basically just paste it in here delete this so we basically do the exact same thing but instead of a kind of a time H Loop we would a normal Loop and then down here at the bottom we would basically set a normal delay so we can set a delay down here to F and this is even more solid than before actually because before when we set the time Peri to be 100 second or one one, millisecond or one second H then it didn't care if this API call was uh or yes it did okay ignore that but this is actually this actually hinders the kind of action flow from keep going down here before it has actually completed and so just by doing this actually let's say this weight actually appear here inste so we don't have that weird thing okay and then we can just remove this top periodic action as well and then instead of that we would basically here say State variable not up State we would say that the waiting would be false so we stop kind of going this Loop uh so it's going to go to state H page State and then waiting and that should be false now yep false so that's the other small adjustment we need to make so now we can jump into test mode and actually check out if this actually works it's going to double check waiting um get to run this thing here is going to remove this here uh status and then just remove this guy here as well uh is this everything yep I actually think that was it so let's now go into test mode and check if this works for this is the third time I've tried because I needed to H make the small adjustment but let's now go into our testing mode here instant reload and check if this actually gives the appropriate response that we should get which is not a replicate of our own text as I got them before so now after making that adjustment with the from the time periodic to the normal Loop let's see if this actually works now so if we go down here and say something like hi if we send that so now it takes some time for it to check for that completed status and then after it you can see that we get the response so now we can say um like something like oh uh something like my name is Leo pretty good and then we could say something like uh what is my name you just to see if it actually can remember the conversation because it should be since we are publishing these messages to the same thread so you should be able to memorize and the previous messages so what is my name it should be able to say Leo if it remembers perfect since this is in the same thread we can it can see all the messages without us having to do anything flow and so this is basically the video I will in the future um release a video on how you can make the um AI kind of update fir to documents because I've actually not I don't know if I'm the one who came up with it but I not checked out anyone else doing it and but for also me I need to develop a technique on how they I could actually kind of send out videos based on a specific kind of uh conversation uh conditionals or whenever they ask about something they should they I should send out a specific video or do something else um outside of its own capabilities so I will show you in the next video how we can use this assistant or um a normal rag on the server that's the kind of method I'm using but just to kind of keep it in flood flow and make it easy so you also can do that I was show in the next video on how you can witha custom trained Ai and how you can actually make it so it can update fire store documents or anything else or do anything else um outside of his normal capability using a kind of a specific um system prompt and some training data that kind of allows it to do so so I'll show that in the next video and I recorded this video today just so I don't have to go over all of this in the next video so this will kind of be the part one of this series and then the next video we go over that and in future I also got a request for how to upload images to the AI and that's something that you can easily do with the assistant so I will show that as well in another video so yeah that was basically it hope you learned something and found this video interesting bye

Channel: Leo McMillion

Views: 617

Keywords: openai assistant, ai assistant, ai in flutterflow, flutterflow, openai api flutterflow

Id: WKxjJFdDNLc

Length: 42min 26sec (2546 seconds)

Published: Sun Mar 31 2024