Building an IT AI Assistant with #OpenAI's Latest Assistant API in #FlutterFlow

welcome to another video on my channel where we are taking my aging it support assistant and giving it an upgrade and we're giving a very good upgrade because what we're going to use is we're going to use the new open AI assistant apis which have just been launched we're going to integrate that into this flood of flat application and it will it will keep our it support assistant firmly on topic without deviating off and giving you other recommendations that you're not interested in whatsoever and uh please do follow along the startup project project is there as a link in the description so you're going to learn an absolute ton with inside this particular video and without further Ado let's get into it and let's get [Music] cracking so here I am then running the application you can see I've got me it support assistant up and running I'm ready to ask it a question my pc video card is getting hot when the computer is Idle what can you suggest hit the send button here so I'm hoping it will now come back with some suggestions there we go so it's come back with then an option uh so give me another option let's hit the send button here let's see what it comes back with there we go so it's keeping it on topic it's keeping it with inside the IT world now let's now try and fo it uh tell me how to bake a cake question mark hopefully it should refuse to answer that particular question Excellence there we go so it's staying on topic and the reason why it's staying on topic is is because I've told the open AI platform the assistant platform there to uh keep it within the context of it so let's now move on the video and let's now start to see how we implement this thing in flood oflow so if you are learning flood oflow please do check the link in the description because we've got the starter project this is the project you are seeing on screen I highly encourage you to follow along in this particular video because although the UI is pretty well much already constructed we're going to focus on all of the key functionality to get our application up and running so this is what the this is what it looks like let's just talk now about some couple of pieces of key information in order for us to orientate ourselves with this startup project so we got some appstate variables that's being created now we need to hold the API key somewhere so this is where it needs to be now this is the API key from the platform uh a the open ai ai platform so you can need to paste that in here once you've actually generated it and then the assistant ID is the specific assistant that we're going to create with inside the open AI platform and we'll come back to that very very shortly so that's the only two App State variables that we've got if I move over to the actual widget tree let's move over to the actual page local page State variables here and these ones are quite key for us so we've got the chat history we need a store obviously all of the conversation that's happening here so that's where it's going to be and then we've got the thread ID the Run ID and the status these are all page State variables that we're going to need to populate and to track the various values we've inside this here um because certainly these two here are going to be passed back and forth to the the open AI platform uh the status is just something we just need to keep track track of of when we're actually then checking for the completion of the actual the actual chat moment we've inside the actual uh the assistant uh AI platform so pretty much much they are the local state variables we'll come back to those very very shortly um just some other little pieces we've also got um some data types being created so I've got one here called content and text you can see here that content has a data type of text and with' inside the text itself we have a value so I'll come back to these very very shortly but just bear in mind that they have been created and of course this is what we are going to add if you if I go back here to the actual page State variable here you can see that the chat history is a list of the actual content data type okay so just keep that thought in your mind at the moment and we'll come back to that a little bit later when we start actually populating those particular values other than that the UI is really pretty simple here so this is kind of like a scrolling region here that we're going to allow us to obviously as we add various uh sort of conversations in here then this will scroll down of course and um here this is where you will type your message in to actually obviously ask the question this is the button that's going to really kind of do most of the work there's about 15 or 16 action blocks that we're going to create with inside there of course which will then actually carry out all of the work for us now in this particular application there's no custom code whatsoever everything has been implemented using the action flow editor now of course there is many many different ways you can construct this particular application and this is just a simple example just to kind of demonstrate the concept and hopefully when you take this into your own projects then you'll be able to expand uh your skills and uh certainly what you've learned here into your own projects in a variety of different ways so that's it so that's pretty well much the startup project let's now move over to the open AI platform let's get everything set up there and then we'll come back to flood oflow very very shortly and we'll start working on the actual build of our [Music] application so here I have headed over to to platform. openen ai.com I've logged into my accounts of course if you haven't got an account already make sure you create it this is the page that I've landed on here um there a couple of things you need to do here first thing you need to do is make sure that you have some credit in the system now this is just one of my accounts I've got a number of different accounts uh with open AI but some this particular one I've got a very very small amount of credit on of about $5 if you just go over to the settings here go to billing and you can see here that um there go I've got less than $5 now actually so um you want to make sure that you add a credit card put some balance in there you can just put something pretty small in there um and you'll find it will go quite a long way when actually using this particular system next bit you need to make sure you got an API key here got a couple of different API keys I'm going to use one from another account but um I just wanted to say that just make sure that you actually create a new secret and this is what you need to make sure you make a copy of because you're going to need to put this into the API key app State variable with inside a flood of flow so make sure you do that and then um the key thing is is with inside here of course is the documentation always really important to have a look at the documentation is updating all of the time and it's it's this assistance therea this is the bit that um that I've kind of uh interpreted a little bit and I kind of put this example together based off this documentation but we we won't worry too much about the documentation here but certainly under the API reference this is a section that we will look at very very shortly where we are looking at actually how to use some of these API calls at actually into the assistant API so and we'll come back to some of this shortly but just to make sure that you're aware that's where it is is is positioned what we're going to do now is we're going to move over to this section called assistance this is the key part now what you can see on screen at the moment is an IT support technician this is what I created and I'm using with inside my application and what you can do is you literally just will click on assistance go up to create here and you give it a a name you give it some instructions you can see that this is the instructions that I've got here so you can see we've inside this particular copy here I'm being pretty pretty uh uh strict I think in the actual Rule now of course if you're creating all different numbers of assistants then you're going to give obviously this different instructions but you can see here that I'm pretty well much saying that I want my it support technician to obviously answer it problems but but certainly um refuse to answer anything outside of the context of an it question now of course one thing in my exper experimentation of this is that you want to make sure that you adjust this if you're not getting quite the results that you need you might need to be a little bit more relaxed or you might need to be a little bit stronger in in the instructions that you put in in there because you might find you can actually ask something uh specific that that might be not quite it related but still relate to the context of the conversation that they might actually then refuse to actually answer it so certainly just Tinker with it a little bit with inside your your use case and um you should be absolutely fine so this is the assistant ID that's really important this is the next piece that needs to be added into the App State variable inside flood oflow so just make sure that you take a a reference to this on a clipboard somewhere and we'll come back and use that very very shortly so one thing you've also got in this platform is you've actually got a playground itself so you can actually test this thing out within here you can just kind of make sure you've got all of these details selected here we're using the chat GPT 3.5 Turbo Turbo model of course feel free you can choose any of these other models um that um that you might be there more comfortable with or you might be getting different results with so certainly try those out just please do bear in mind that of course using different models will obviously cost more with inside the platform so just be fully aware of those type of costs that are associated with use of these models but I'm just going to use the turbo 1106 model in this particular example I'm not going to worry about any of this here I'm just going to type a message in here and say my my P my PC is getting uh overheated okay let's just hit the send option add to the run and what's good here I've got the logs being displayed here you can kind of see some of the API calls that's actually getting uh kind of made you can see here that um I've got a response back from the it support technician and now of course I can carry on having that conversation within here and I can just test it out just make sure that I'm getting the uh the right results I need for my application so again well worth having look at the playground before you actually get into the flood oflow and actually start creating your application so we'll leave it there that's pretty well much all we need make sure you got your API key and you got your assistant ID that it's actually you've got on with inside the actual assistance itself this one here and let's now move over to flood oflow and let's down start building out this application so just by way then of configuration before we actually start talking more specifically about the apis I've lifted the API key and the assistant ID and I've gone over to my App State variables with inside my cloned project and I've just put them in there so we should be good to go now with everything set there let's now go and talk about the apis okay so let's talk a little bit about how our flut oflow application will invoke all of these API calls how are we going to go from from nothing to then a message coming back from the open AI platform so the first thing that we need we are going to do with inside our application is we're going to create a thread now I'm going to do this on the actual page load of our application but of course if you were probably building this out into a more substantial application then probably what you would do is you probably create a thread actually when the user is actually going to invoke a brand new conversation okay so I'm just going to I'm only going to be having one conversation with inside our flood oflow applications I'm going to create a thread when the actual page loads itself once we've actually created that Freds that's going to be an API call out to the open AI platform we're going to get a Fred ID back we're going to store that with inside our page State variable you probably saw that earlier on and we're going to keep a track of it because we're going to need to pass that in with further API calls so once we done that we're then going to create our user message okay so the user is going to type in the flood oflow text box at the bottom there they're going to hit the send option we are then going to put that message into the chat history because we don't need to kind of um sort of get a return back from the open platform because you've got the message in that particular point so I'm just going to display that on the UI and then what I'm going to do is I'm then going to put that message actually onto the thread itself so I'm going to be making a further API call out and putting that message onto the thread once that is done I'm going to very then instantly make a call out to the open AI platform and say right now go and run the assistant so the assistant is going to run and then what we then need to do is we then need to periodically check to see if the actual assistant has actually completed so it'll so it will go into kind of this state where it's kind of in progress and then of course it will then get to status of completed and once it is completed of course we can then put that message that very that last message that's being returned is then going to be put into the chat history which of course we inside our floff flow application will be will be positioned underneath the message that we put in and of course we'll go along we'll type another message in and we'll go back through this process again and again and again so hopefully that is going to be pretty clear if it's not don't worry we'll work through this stage by stage with inside the actual flood oflow application so when we start sort of putting the API calls together and the action blocks together so uh let's now move on okay so back with inside our flood oflow project I've moved over to the API call section and let's now start creating our API so the first thing that we need to do is create an API Group so just go to create API and we're going to give our API Group a name so open AI chat GPT is the name I'm going to give you can put that whatever you like in there let's put the AI URL in so that's really really important and we now need to start adding some headers into this particular setup so we need to pass two headers in so the first one we're going to pass it in is the actual uh the actual API key itself so this is what we need to type so we got authorization colon Bearer and then our token we'll create that very very shortly add the header in we now need to put in so that's the particular header we need to put in there the open ai- Beta assistance V1 so uh please do check the documentation because it depends when you're actually watching this particular video it could be that this is actually then out of beta and then you don't actually need to actually put this in there but for now I'm just going to put that in here cuz that's what is required at this particular time of recording so we now need to go over to our group variable let's add a variable let's just call this one token here because we reference it just up here in these square brackets and we need to say this is a string and that's all that we're going to need to do so we're going to pass this actually into the uh the actual every single API call that we make we're going to pass that in here so we can add the group that's all done and you can see here that it's created up here now once we've actually got that of course we now need to create those individual API calls now going back to what we just had in the previous section where we talked about the different API calls we're now going to focus our attention on the thread okay so this API call out to the thread so choose add API call so let's give our API call a name so I'm just going to type in Threads here and I'm just going to do the same thing here because that's the endpoint URL that we actually need now this is going to be a post request now we're not actually going to pass anything into this but actually if you look at the uh the actual documentation for the assistant API you can actually pass in a message at the point that you actually create the thread now we're not doing that with inside our application we're going to create the thread we're going to get a reference back and then we're going to add our message in at a later point so just bear that one in mind if that's a a scenario that you would wish to uh kind of use inside your own application so we also just need to do one other thing as well is so this is going to return back an ID for us I'm just going to go into the Json pass and I'm going to add adjacent path and I'm just going to do ID here and I'm just going to pull in a name of the thread idid like that so what this will just allow us to do with inside our with inside the actual application itself well actually this will give us a reference to the response that comes back so if you look at the documentation for this particular API call the result that comes back you'll see that it's going to return back in something called an ID and this is really just a way for us to be able to pull that ID out of the adjacent response and it's going to be then refer ref by the name of thread ID and you'll see how that's used in just a moment when we actually start using this particular API call so that's all that we need to do uh just hit the add call so I think we are good to go so let's now move back over to the uh the actual appc application itself and let's now start setting up the invocation of this particular API okay so here we are with the support assistant page make sure that you got support assistance therefore selected let's move over to the actual actions itself click on the action editor and you can see I've also got one action Block in here to start off with and really all this is doing is just setting uh the dark mode it's just enforcing it if you want to run this application in light mode then just delete this out and of course when you run it up then it will be in the light mode so we're going to hit a little plus here just choose that choose add action and we're going to make that backend call now so just go down to the backend database choose API call and I'm going to click on the group name here and choose the open AI chat GPT and of course the endpoint that's being selected it's the only one that's there at this moment is called threads we want to then add in these variables here so just set say set additional variable and of course I need to pass in the token so this is going to pull this out of the application state so choose App State choose the API key and that's all that we need to do let's just give this one a let's just say API threads result let's just delete that there so we got a very uh clear name there and of course this is where we are at this particular stage now what we're going to do is we need to get that ID that comes back we need to store this with inside our page State variable so that's really super simple just hit the little plus here choose add action let's go up and type in state here and say update page State here go to ad field and we want to set the thread ID so just choose thread ID because we've already got these set up as page State variables we want to select the update and we going to say set value so we're going to choose the selector here we're going to go to the uh the actual action output this here so this is the API response you can see here we've got the API thread result here just choose that on the Json response options choose Jason body and then here we now want to now go to the Json path and if you recall we just set that kind of that Fred ID uh up with inside the actual the settings where we had the dollar. ID and we called it Fred ID so that allows us just to reference it here and that's all that we need to do and that value then will be stored for us to now use at a future time so just hit confirm and we are good to go okay so just to summarize then so when our application actually fires up and the actual uh the actual page loads it's going to make that API call out and then of course is then going to persist that that Fred ID with inside our page State variable for us to then use as we start now sort building out the actual submit here to actually start doing the real meat of the application okay so it's now time to create our second API call which is then going to take the message that the user keys in here and drops it actually onto the thread itself and of course I'm going to apply that message actually with inside the the the kind of the history here the chat history almost instantly and then of course I will then make that API call so let's now move back over to the API call section here let's just expand that out let's now create a brand new API call let's call this one uh message like that now this is going to be a post of course because we're going to be getting some content here and we just need to now just sort of flash out the end point here what we're actually going to be calling so it's got forward slash in there so it's going to be Freds and then we're do forward slash we need to do uh an actual square bracket there and we then need to do a Fred on idid and then just to close the square bracket off do forward slash and here is just going to be messages just like that now we'll create the thread ID variable in just a moment in fact we're going to do that now let's go to variables here let's say add variable let's type in Fred ID and this is going to be passed in as a string I'm going to say add variable again because this is um going to be the most important bit now of course we need to actually put some content this is the actual content that the user has actually typed in we also need to capture that here at this point we need need to pass that actually into this particular API request so we're going to type in content it's going to be a string and of course we now need to go over to the body itself we now need to actually kind of shape up the message that's actually going to be passed in to this particular API request so let's just choose Json now we've got some of these variables here so we can drag those in in just a moment let's just go in between here like that now I'm going to type in roll here and I'm going to do a colon and I'm going do another double set of quotes here and this this is going to be a user okay just do comma and we're going to do this is where we're going to now put the content in just do a colon just do another double quotes there and we now need to just pass this actually into and just between the two quotes that's all that we need to do so that's done um you can see it's automatically forward it so it's pretty formatted it so it's pretty valid for us so that's pretty well much everything set up we can just hit the add call so that's that API call made so let's now go back into the the actual application itself and let's now start setting this up with inside the action flow editor so back within our page then let's go to the action flow editor here let's actually just hit on the submit icon button let's go to the action flow editor hit open and we now got this brand new flow so let's hit the add action so the first thing that we're going to do is make that API call so just choose just do a search API and choose API call here choose the group name we know it's it's the chat GPT one we're just going to change the endpoint now to message and we now need to just configure these particular values that we need to pass in so to hit a little plus here so the first one we're going to select is the Fred ID now of course this was a previously retrieved and stored of inside the page state so just choose that choose thread ID and then we need to set the additional variable just select this one here choose the token go to the value now of course the token with is is inside our app State variable so just go to the and choose the API key there and let's just say one more variable here this is going to be the actual content itself so just choose content and we need to pull the content out actually from the actual text box itself okay that's being keyed in so choose widget State here and choose the question test field here so just select that one and that is all that we need to do so let's just let's just change this here API so I always like to give uh these a name API message result and then that's then represented here so of course the API call is going to be made um we're going to just assume that it's successful at this particular point and we now need to move into this particular direction here because we're going to get a successful result back from the backend API call so I told a little FIB earlier on actually cuz um i' I've realized actually what I'm actually doing is I am actually getting the response back once we actually put the message actually onto the thread I'm going to get a response back from that API request which will be my message itself and then I'm going to add that actually into the chat history which will then be displayed with inside the flood oflow application so um what we need to do there is and the way we need to actually add in into the chat histories we just need to hit the little plus here choose add action we need to go to the actual page State here so let's just update the actual page State we need to set the field and this is where we now need to set or need at least add this value actually into the chat history so just select that go to the select update type choose add to list and this is where we now need to pull out the uh the part of the message that we got coming back from the open API platform and actually add it into the list so the way that we do that we go to action outputs we're going to go and choose the API message result here so the response it comes back just select that choose the API response options choose Json body and the available option we just need to do adjacent path here just select that and now we need to navigate our way down actually into the response back from the message so if you actually go and have a look at the API documentation it gives you some examples there of the response that comes back on this particular API call so this is going to be a Content okay and you'll see that in that in that particular example we're going to grab the very very very first one CU it's going to be an array so it's going to be obviously uh it could have multiple items in there but we just want to pick out the first one which is actually our message itself we're then going to say to the data type and we're going to choose the data type that we created earlier which is content just select that and of course our our chat history is accepting a type content here as well so these two are matching up quite nicely just hit confirm so of course what happens then once the actual uh message is actually been added into the UI we're going to want to clear the text from the actual F below so just hit the little plus here choose add action type in clear here and you got clear text Fields just choose that and we just want to uh just select the little question tech text uh test field there so let's move up here just hit the little plus here the next step that we need to actually do is we then want to actually uh create a delay with inside the UI itself so we just want to give um the UI a little bit of time to catch up so let's just choose the weight delay here so I'm just going to choose a five 500 milliseconds just like that so this is going to allow us to then have the message that we just keyed in added to the list and then there' be a very very small delay and then we can actually then scroll the actual uh the the actual list the actual point in the actual list view to the actual bottom so actually it's actually a scrollable column actually so it's going to move it to the bottom so we get that effect that everything just keeps moving up the actual screen so just choose plus here choose add action type it in scroll to just select that and of course we're going to want to choose the scrolling chat column here because that's one that we've got here and we're going to then scroll to the end and we can keep this as 500 MCS that's fine okay so next up what we're going to do is we're actually going to create then the next API call which will actually then run the assistant if you remember back to the actual flow diagram that we had so we now need to go over we now need to create that API call okay so here we are back with inside the API section let's expand the API Group just select that choose add API call we're going to give this a name we're going to type in run here now this method type is going to be a post request and we just need to now just pad out this URL so it's going to be threads like that forward slash a clo an open square bracket like that type in thread and then ID which just with an uppercase i there just then close that off there and then do forward slash and type in runs and then we need to now create some variables we need two for this particular API call the first one that we're going to do is the one that we just got above is just going to be a thread ID like that with an uppercase eye as I did before type in string there so that's these two are now going to match up here and now we need to add the next one in and this one is going to be a assistant ID like that and we're just going to type that as a select that as a string there that's all that we need to do now we now need to create the body this is what's going to now be passed over into the API with the actual request is going to be the body so just choose a Json body here and we now just need to work on this here so just move that there now just do a double quote a assistant like that with an underscore and then ID just like that do a colon there and then just do some uh two double quotes and then we're just going to drag the assistant ID in there so we're going to pass in our assistant ID that we pass into this API call that is all that we need to do we are good with this particular API call let's just hit the ADD and now that we've done that we can now move over now and start invoking this particular API call let's go and do that now okay back within our page then let's hit the submit button let's move over to the action flow editor let's just move ourselves into a good place right so now after the scroll to let's now add that API call in hit the little plus here add action type in API click on API call here go to the group name as always and then on here we want to select run here now we want to pass in some variables here so let's go and quickly do that let's choose the first which is the thread ID now as we know that is located with inside the actual page State itself so choose that set the next one let's do the assistant ID let's go to the value here now this one of course is in the App State so choose the assistant ID and then down on this one this is going to be obviously our token and of course that is also with inside our app state so just choose the API key let's just make a change here let's just do run assistant result here just to give it a good meaningful name and let's now move up here okay one thing I forgot to do with inside the ACT ual uh the configuration of the API is to actually uh set a value in there for the Run ID so let's quickly go and do that let's just close out of this go back to the API calls open up this particular section here click on the run here go to the response and test and I need to add a Json path in here now the Json response we're going to get back from our API request is going to going to be again an ID that's going to come back and in here we just need to type in run ID just with an uppercase I so we can now reference that back with inside the action flow editor just hit save let's move back over to the uh the widget tree here let's go to the actions let's open that back up again let's go right back to where we were and now we need to set the page State variable so choose the add action we now need to persist the Run ID that's come back from this API call so let's just do a search for page State here just click on the update page State set the ad field choose the Run ID here that we've got and we're going to set this Val Val to be then that value that's come back from our action output so just choose this one here just scroll down and you can see why it's now important of course if you've got a really really complex uh kind of number of action blocks with inside the action flow editor this is why it's really important sometimes to give your API responses um some meaningful names CU I know I know that I've just created this one called API run assistant and I can see it here without it being a bit more sort of random sort of text here to kind of make them unique so um that's makes it just really easy for us to select that one we've inside the API response just choose Json body here select the available options just say to Json path just scroll down here and we're now going to select that name here a run ID and then there's no further changes that's needed just hit confirm okay so now we're going to get to a really interesting bit now with inside this particular action flow where we're now going to implement a loop now the loop is going to be really important to us because we're going to need to make that change just as I was uh sort of discussing during the actual API flows you know we need to go into this Loop now we need to check to see if the assistant has actually completed its task and if it has completed its task we can then carry on and then we can go and get the messages then from the actual uh API and then display them of course on the UI so this is now where we need to now add a loopin so just we inside this page State here just hit the plus here choose the add Loop option here and then the first the loop that we need to have here is we're going to say well I keep looping round until the actual status of the API result is actually set as completed so so what we need to do is we need to go to conditions here choose a single condition choose the first value and then click on here now the it's going to be the page State variable that we actually had here so chuse page State and you can see here we've got this one called status and we're going to say it's not equal to to completed so of course when it comes into this Loop then it's it's not going to have any value at all it's not going to be completed whatsoever so we're going to do the loop and then when we've actually got that um that uh positive result from the API we know that it's completed we'll actually set the page state variable to be completed and of course the loop will then break so let's now choose the value here to be completed we're just going to type that in there just like that so if it's not equal the status is not equal to completed then the loop will just go round in a uh just just a basically a loop right okay so now we've done that um we can now start working on our next bit here now the next bit what we now need to is we now need to invoke this actual API okay so we now need to go and create another API so let's go and do that now okay so let's move over to the API section here let's open up this one now let's add a brand new API call in we're just going to call this one retrieve run like that now this is actually going to be a get request and we now need to fill out the endpoint here so this one is threads and then we just need to do the square bracket open square bracket and type in thread and then uppercase ID just like that the closing square bracket do forward slash we're going to type in runs here forward slash and then of course now we will need to pass in our run ID that we retrieved previously when we executed the actual system so now we now need to uh create some variables for these so as we did previously type in Fred ID like that go to type it's a string add the next one in run ID with uppercase I type in the string there and that's all that we need to do and what we also need to do here though is we need to actually now pick up the status that actually comes back so we're going to uh we're going to fire this off we're going to pass in those particular variables we're then going to get a status back we need and that status we need to capture here so just choose this here and then we're just going to do a status like this and in the name we're going to type in if I just set that going to type in status like that very very simple so we've now got our reference now into the status of the response that comes back choose add call like that and we are set up so now let's move back over to the widget tree let's go back over to the action flow editor so back within the action flow editor of our button let's select the actual action we got here let's type in API let's go to the API call let's choose the group name here as always just change from threads down to retrieve run and then we now need to set our varibles so just as we did before let's set the thread ID of course that's in the page State choose thread ID choose the next one here choose the Run ID again this is in the page State let's grab that there and then let's just move on and add in the token as well which of course is in the App State and that is the API key so they're all set up which is great so let's now just give this a decent name retrieve run result just like that there we go let's just move this up and give us a bit more space okay so on a success of course we now need to set a page State variable now this is going to hold the actual status that comes back from the API so let's just type in state here and let's go to in fact let me just spell it right State there it is let's go to update page State choose the field we're going to choose the status here just select that the states the set value and then we obviously need to set this now to the actual output of the retrieve run result so just select that we're going to choose the API response adjacent body and then we're going to select the adjacent path and obviously here we just want to choose the status option that we set earlier just hit confirm so that's all Now set now what we now need to do we now need to check to see uh the actual condition to see if it's not equal to be completed okay so let's choose a little plus here let's choose add conditional so this condition is going to be a not equal to okay so we're just going to choose the first value here just choose that here and we want to go to the page State let's grab the status and we're going to say is not equal to and then set the value to be completed just like that hit confirm so we're going to move into this particular direction here and what we're going to need to do in this particular situation is we're going to want to wait 3 seconds and I'm just going to set it as 3 seconds here um and then of course um it's thing go back round again it's going to do the API call and as soon as it's completed it'll obviously then break out the actual Loop so just choose a little plus here choose add action type in here weight just select that and we're going to set this as 3,000 which is going to be 3 seconds of course you can increase this a little bit longer if you want to if you want to kind of maybe save uh multiple API calls from being carried out but we're just going to set it at 3 seconds I think that's quite acceptable uh with inside this particular application okay so now that our Loop is a kind of of all created there's nothing further we actually need to do inside this particular Loop we now need to now handle the situation that once the loop is completed so once that status has been marked as completed we then need to then carry on and then the next step that what we need to do is we then actually need to go and retrieve the messages to then display with inside the UI now we're only going to retrieve one message back the very last one that gu uh created and then we're going to then display that with inside the UI so let's now go over and let's create the API call to do that okay so you pleas to know this is the final API call that we need to create so let's now create that now let's add the API call type in messages here as the name this is going to be a get request and we need to add in some endpoint information here so this is going to be uh threads as we did before let's just do a forward slash let's do a square bracket and let's do thread ID as well so let's do that forward slash messages on the end now we need to add in a query parameter here because what we're going to do is we only want to bring back one single message the very very latest message that gets created so let's just type in limit here specific value let's go to the type it's going to be integer and we're just going to put a one here to represent a single message to come back we now need to create some variables as we did before so we need to do the thread ID here so just select that type the string in there that is good and we need to go over to the response and test because this is quite important now because what we now need to do is when we get that response coming back of all the messages we now to really need to drill down into the response and actually pull out that single message so the way that we do that is we say add ad Json path here now I'm going to we know we're going to get a response back uh from data so we need now need to do a square Open Bracket here do a zero which is going to be the very first one in in the actual list do uh period as a full stop and do content and then do another open square bracket zero and then just shut that down then with a closing Square square bracket so that's going to really drill down and I can show you that with inside the API reference because here we got the data that comes back so what we're doing is we're kind of go sort of moving ourselves all the way down in this response moving down with inside the content here is the array here we just want to pull out this single message that comes back so that's what that is exactly doing with inside this adjacent path it's just drilling right down and we just now need to give a name here as well and it's just going to be data so that's all that we need to do I think that's all set up for us yes let's now add the C and we can now move back over to the action flow editor and we can do the uh the final pieces of these action blocks to get this up and running okay then so back in our action flow editor let's add that API call add the action type in API choose API call Select the group as we always do and then set the oh go to the endpoint name of course select messages here and then go to the variables and of course we now need to just fill these in as we did before you should know by now that this one is in the page state and of course you now need to set the API key from which is our token so go to the app state and choose the API key so they're all set now let's give um everything a name here collapse those up let's now call this one API get message result that is good so let's now move that up here and of course we're now going to move into this particular direction so we now need to grab that single message that we've got returned and we need to add this now to our chat history so then it gets displayed with inside the UI so just choose the little plus here go to add action let's type in state here say update page State choose the set fields and we're going to choose our chat history just select that there go to select update type we need to add it to the list so just select that and of course we now need to choose his value to add and we need to go down to the action output and of course it's the API get message result so go to the API response options here choose the Json body of course which is the the response has come back go to the actual Json path and we're just going to choose a Json this is the data that we just created in the API called just choose data and we're going to want to convert this to the actual data type so the data type in our instance is called content so just choose content here and that's all that we need to do hit confirm so hopefully that should all work for us very shortly so as we did previously we need to wait for the UI to kind of uh sort of catch up so let's just put a wait in here put the delay in here let's just choose 500 then that's half a second so that's good on the next one we now then need to add an action of course we now going to scroll to the end now so just choose the scroll to and we're going to choose the scrollable widget which is our scrolling chat column so just choose that uh and we're just going to say scroll to end that is good and so finally just one more thing to do just as a bit of a cleanup thing we need to add another action in here and we're just going to set the status and we're going to set the value of the page State here so type in page update page State here choose set Fields choose the status here and the update type it's going to be a reset value and that is all that we need to do so hopefully fingers crossed and we'll be able to fire this up very very shortly and see if we've made any mistakes there no doubt there might be something that we've uh done wrong along the way but um that's all to do with live building and we'll see um how we can uh sort of fix it together so I think that is good let's just close that down and I think we are now in a position where we perhaps uh although not quite actually there's one thing that we need to do which is super important is we need to actually bind these particular values here to the responses come back with inside the messages so let's do that now so let's now choose the first one here let's go up to the text selector here let's choose chat item so this of course is in our list of view itself so just select that we're going to say data structure field we going to choose the select field which is going to be the text the available option is going to be the data structure field again and of course of inside that we have the value this is the text that's contained with inside okay that's all that we need to do hit confirm I'm just going to select it again and I'm going to go up to the little three dots here let's copy that variable because I'm going to move it over to this one here use the selector move the paste there because it's going to do exactly the same thing on that particular side so we are good I hopefully let's now spin this up and let's see if it works okay so let's see if the application Springs into life come on now it's thinking about it excellent there it goes that's a good start it's fired up so let's now ask it a question my computer keeps making a weird noise hit the send option okay so my uh my message has gone into the chat history very at the first start that's great um okay sounds like you may have hardware issues so we've now got a response back from the open AI platform can you guide me through some options hit the Ascend hopefully I'll get a a more accurate response now there we go okay so that's looking good so looks like we've got the um the it um kind of element is kind of working really good for us let's do the bake cake example let's try and uh uh see if it actually stops from giving me suggestions about how to bake a cake how can I bake a cake put a question mark there hopefully it should give me a response back to say that only handles it related problems there we go which is exactly the response that we're looking for so things are looking super good and our example is up and running and hopefully if you've been following along this is working for you too so I just want to point out in this particular video that um this is obviously a simple example and we're using open AI directly from with inside the flood oflow application now if you're taking these type of steps in your own applications then you need to think longing hard about any potential security risks and there is a security Risk by doing this because what you're actually doing is you are embedding your API key with inside the App State that's your open AI API key and of course there is a risk that your application could then get compromised somebody could then take your API key and then they could then start carrying out all of those requests to the open AI platform now that's not ideal now of course if you are building a web application is really really easy for anybody to inter sort of interpret the actual uh request as being made to the open AI platform and then they can then start carrying out those activities which is not ideal so um one thing that I would suggest that you consider if you are looking at doing this in a more serious way for your own application is that I would look to actually move the the communication that your application does with the open AI platform into some backend Solutions so for example there's plenty out there that you can use such as build chip fast gen um there xano a number of different services are out there that you can actually use where you actually would put all of those out into those services and then all your flood oflow application is then doing is is calling out to those backend Services which will then in turn call out to the open AI platform now the beauty of that is that your API key can be stored securely with inside those backend Services okay so you're not exposing that via your your application so what you'll see on YouTube and other sort of sites and training sites is that there'll be plenty of examples where they're using flood oflow to call out to those services but in in in best practice that is not the best thing to do so for example I'll show you um what this might look like in say build chip for example which I'll show you on my screen now okay so here we are then in build chip and you can see what I'll do is I'll also create a video where we can actually create this um AI assistant application actually using a service such as B build chip and you can see here that what I've got I've got some workflows on the Le hand side which are really just carrying out those activities that we've got so you can see here that we're kind of creating the threads we're adding the message we're then running the assistant we're then checking the actual run and then we're getting the messages back and really these are very very simple kind of build chip nodes that's been created that just really very much do what is actually happening with inside flut flow and of course what I've got here is my actual uh my actual open AI key is stored securely with inside the build platform so um that's great that means that nobody can kind of GRA grab hold of that open API key and I've got full control of anybody who's actually interfacing with the open AI platform so I will do a proper video on this I'll walk you through the steps required to convert the it support assistant to actually use a service such as Bild chip um but I'll walk through that on another video so do look out for that one and I'll do that very very soon okay so that's a wrap for this particular video hopefully you have enjoyed it please do check the link in the description of course because that's got the actual final project which I've kind of done a little bit of additional work in there as well I've actually kind of kind of commented all of the actions and all that kind of stuff so hopefully you should be able to align with what's going on there um just if you're getting stuck um and of course as well I also um try to make the samples a little bit more meaningful by sort of renaming all the widgets all that kind of stuff to have a little bit of a better quality to the actual sample project please do keep uh subscribed to the channel and of course please do like the video as well because that obviously gets out to the flood oflow community of course and uh and I'll be covering a lot more about AI as well on my channel so if that's a topic that you love and you're interested in then please do stick as a subscriber so until the next video I'll see you [Music] soon

Channel: The Digital Pro's NoCode Academy

Views: 13,018

Keywords: android app development, flutterflow, flutterflow crashcourse, flutterflow training, flutterflow tutorial, flutterflow tutorial for beginners, flutterflow tutorial playlist, ios app development, learn flutterflow, no code tutorial, nocode tutorial, nocode tutorial for beginners, chatgpt, openai, openai dev day, artificial intelligence, openai assistant api, virtual assistant

Id: rWArVlymIPw

Length: 46min 43sec (2803 seconds)

Published: Thu Nov 09 2023