#BuildShip New OpenAI Assistant is Here! #FlutterFlow App Build

so welcome to another video with inside the no code academy and in this particular video super excited about this one because we've got the bill chip open AI assistant node that is landed that's going to simplify all of your interactions to the open AI assistant now this particular video we're going to create a chat bot that you can easily introduce into your own application to basically provide your users the ability to have context Focus support for your particular application and you'll be able to walk through and you'll be able to create exactly the same thing for your own applications so we're going to use build chip and we're going to use flutter flow let's get into the video and let's get [Music] cracking okay then so this is the official page that talks about the AI system node with inside the build chip website what we're going to do though is we're going to focus our attention on building something very very similar to this we're can to use the power of this new particular node to kind of produce kind of like a context Focus Chat bar for your particular app application your flutter flow application we're going to break it down into two parts we're going to first focus on the build chip kind of workflow and then of course we're going to take everything we learned there into flood oflow and then we'll start creating something from scratch that you can then lift and shift or at least apply in your own flood oflow projects as well so let's go over to the demo let's have a look at the application and then we're going to get building okay so here is the final application which will be available as a link in the description so please do grab that um there's also start a project in there as well to kind of get you to kind of the foundation where we can use this particular series and we can start building on everything we learn and of course you can walk through together so I'm just going to click on the little Fab icon that appears out from the bottom here now this AI kind of window kind of pops up our component that pops up inside flood oflow and I can just say uh my computer is overheating something like that hit the send option and of course the way this is called out to build chip now is passing in that particular question to our context Focus assistent and of course it's just going to have a little to think about it and then of course it's then going to come back hopefully with a response so there is a response and of course we can now carry on this particular conversation and let's say um tell me more about the uh GPU something like that hit the little send option has a little think about it and of course it will then go away and hopefully get a response and there it is so it's gone away it's kind of carried on the conversation it's carried on the thread all via Bill chip all via the kind of the my assistant sort of node that they've created so that's what we're going to build in this particular episode so let's get into it okay so here we are within my project with inside build chip itself now if we were trying to create this functionality with inside build chip by using the kind of the old method and that is creating a number of different workflows to kind of like create the thread we then add the message to the thread we then have to then run the assistant and of course we then need to check those runs has the assistant finished has it done its thing and then of course we can then return back the messages once that assistant has completed you can see here that there's a number of different kind of steps that we have to kind of walk through well then this all now changes because the AI system with inside build chip itself is so much more compact it does all of the hard work for us and that is what we're now going to get building with inside this particular section okay before we get started there is two things that we need before we build out our workflow the first thing is we need to make sure that we've got an account on the open.com website here I am all signed in I have my assistant created make sure you got that created as well with the instructions that we're going to need for our chat bot and here you can see here the main thing is we've got our assistant ID you going need to make sure you have that to hand because we're going to put that into Bill chip very shortly and the final thing we're going to need is an API key as well just hit on the API key here get one generated and of course make sure you got some credit in the system as well if you're trying to do it on a free account you're going to get no response backs and make sure that you put a little bit of credit in the system ready to use your API key once You' got two of those things let's now move back over to build chip and let's start building the workflow okay so let's start now creating the workflow so I'm going to go into build chip I'm going to hit the little plus here I'm going to give it a name I'm going to just call this one assistant chat something like that hit create and we'll should have a nice brand new one that's created let's now add a trigger now we're going to invoke this by flood oflow by using an rest API call so choose add trigger let's choose rest API call add the trigger itself and we need to give our path a name so let's just call this one uh chatbot something like that there now this the post is going to be the request in so we're going to need we need to configure that here we need to configure that in flood oflow as well once we've got that selected as a post hit on the three dots at the top here edit because we are going to pass in two parameters we're going to pass in the prompt this is the bit of text that we're going to be passing into the open Ai and we also going to be passing in the thread now on the first run of this we're not going to have a thread we're going to be passing in but what's going to happen is it's going to determine that and then it's going to it's then going to create a thread for it to then be return back to flood flow we need to store that within flood flow so we can keep the conversation going we can we can keep passing in that thread with every additional prompt so with the body selected hit plus and let's go to the first one here and let's give this one a name so I'm just going to call this one a thread ID this will have a label and I'm just going to call this one Fred ID like that and then in the in the type it's going to remain there as a string and let's add a brand new one in let's choose on the rename there The Prompt as well so there it is as a key let's give this a name of prompt like that and of course that is going to be a string as well once that's all set up hit the save and that is all ready to go so next up we're going to then use a convenience uh node with inside uh sort of build ship itself and this is just going to be like a trim so choose the do a search for trim choose a trim string and what's going to happen here is we're going to pass in kind of like a like an an empty string it's going to have like a space in it and we just need to trim that down to just be an empty string to represent that there's no thread that's going to be passing if we don't do this what will happen is is that when we call out to the open Ai and we pass in like a null or something like that then the open AI is going to return back in error response we got to prevent that from happening so let's just select now the the the kind of the the the actual value that's going to come in so we just choose on the variables here go to the request and we're going to choose the body and then here you can see that we've got the Fred ID so just choose that and that's going to be passed in itself and then what will happen is is this trim string will then return back that thread ID so I can just click on this here and I'm just going to going to call this one thread ID like that so we can reference it by name uh very very shortly so once we've got that the next one we want to add then of course is the magic this is where all of the work happens and that's in this open AI assistance so just choose that and then we need to put some details in here so first thing we're going to want to do is go over to to the Cog here and we're going to go down to our secret Keys now I've already got one called open AI you need to add to your secret key and this is where you're going to get your API key that you would have had with inside the platform open ai.com webbsite so have that long string create one called open AI or whatever you would like it to be and then we can then now use that back with inside our assistant uh sort of workflow so where it says API key hit the pen and we're going to go to the variables here in fact we're going to go to the secrets I get the right place and choose open open API just select that and that's all that you need to do is going to pull in that obviously that secret into that particular field now here is where we need to get the assistant ID so of course if you copied this um and you could then make that available here or one alternative that you can do is you can go up to the uh the actual system here just choose this and go to where it says variables you can choose this environment variables option so just select environment variables you can say add actual environment variable here so what this is going to kind of do is if you are using this assist in a number of different workflows with inside your project then you can either create a kind of a a project level environment variable that we can use in a number of different places or you can use it just with inside this particular workflow so this is really great that if you had multiple callouts of the open AI then you can all be using the same assistant ID that's going to be pulled from an environment variable which means you've only got to change it in one place and it' be then obviously reflected across the rest of your your your projects or your workflows what whatever so what we're going to do going to a brand new one and we're just going to call this one assistant uh sort of likeor ID like that now we're going to go and quickly grab our value from the open AI website just paste that in there there it is all saved and I'm just I can say here the scope all workflows on this project or just to this workflow only well I'm only going to use it in this particular workflow so I'm just going to say this workflow only and hit save that's all there and what I can do if you can see here just click on the little toggle there and you can see that that is now there so we can just close that down and of course I can now choose the assistant ID uh sort of uh environment available there and that's now going to be now available to the open AI assistant now the instructions we don't need to pass in any kind of instructions into this particular one you can see here the little popup is talking about kind of modifying the behavior we don't need to change the system message because that is pass part of our assistant now the user prompt of course that is the question that's going to be passed in so just choose the little pen here go to the variables go to the request and it's the body that need and we're going to pick out the prompts this is the kind of the body parameter that we created earlier so just choose prompts that's all that we need to do and here is the thread ID now you can see here that we've called it thread ID up here we've trimmed it down to an empty kind of string we can choose this option here we can go to the variables and of course we can just choose the thread ID just like that and that will be then a string now that's all that we need to do and of course if you are researching this uh particular node with inside the build chit website I highly encourage you to to kind of read their document ation because it can create it's demonstrating lots of different examples where you can use the AP AI assistant so for example you can be uploading kind of your more documents and all that kind of stuff to your open AI assistant and of course that could then use that um information and all that kind of stuff so I recommend that you kind of look at all the different options that you've got here for uh sort of extending the power of the openai system and we're just using in a in a more chat and a more refined way but please do sort of have a look at the documentation because of course you can now add additional nodes here where the kind of the open AI assistant can kind of think okay well I I can see what you're trying to say here but actually I'm going to go out and I'm going to go and do some additional kind of steps with inside the actual workflow I can go and kind of read a CSV or I can go to a Google Docs or whatever it needs to be there's lots of different kind of activities that can happen down here but we're just going to keep it really really simple for now we're just going to kind of do what we're asking it to do and then we're going to return that information back to flood oflow okay so let's just add our kind of our return in now so hit the plus here here we're just going to then return back here so if I can just hit the little return option and of course we're going to return back a status I okay we're going to make a little assumptions here that everything is gone according to plan but of course if you are building this out in a more Production Way you're going to want to make sure you put all the checks in there of course you don't get the quite the right response back from the open AI you might want to handle that a little bit more grace gracefully but we're just going to kind of handle the return back uh whatever the open AI system returns we're going to pass that back to our flood oflow application but you can either handle that inside flood oflow or you can handle that with inside build chip So within the value just hit the little pen here now I'm just going to change this to a JavaScript response now I'm just going to put some details in here so um if if you've been watching any of my other kind of sort of videos with inside uh the sort of the channel and all that kind of stuff then you would know that um I quite like to kind of return back here a kind of a happy day kind of okay message on the status I might want to use that for any particular reason inside flood oflow what I'm also going to turn sort return here is actually a result and that result is quite simply going to be everything that is going to be returned from the actual open AI response so just choose variables here I'm going to go to open AI assistant just select that and I'm just going to choose the open AI assistant here at the top you can narrow it down a little bit if you would like just kind of for a more convenience to kind of drill down to various sort of parts of the response but we're going to kind of return everything back um to our flood oflow application and let our FL flood oflow application kind of determine what it's going to display with inside the actual chat window itself but of course you can adjust this however you would like I'm going to choose the open AI assistant object and everything is going to be return back that is pretty well much all that we need to do but the good thing is about build chip of course is we can test this particular workflow so let's now head over and give this a test okay so before we actually ship this and make this workflow available let's give it a quick test hit the little test option up here and we're going to want to pass in a body so we're just going to kind of simulate kind of what flood oflow is going to be doing on an API request so if inside the body let's now open that up with the curly braces let's first pass in the Fred idid like that that is going to be how it's going to be with a colon we're going to put in a space in here because of course we're going to trim that down and then here we're going to pass in the actual prompt itself so that and we're just going to put a just a a test here so let's put do the same thing as similar to what I did before I am having over heating issues with my computer something like that let's test the workflow so we'll take a moment on first run of course it's doing the building and now it's doing the execution as well if we've made any mistakes we'll go and correct those but let's see what it comes back where it's executing now okay you can start seeing it now kind of going through the various stages and here we are looks like we've got a positive response back have you checked to see if there any dust clogging blah blah blah blah blah there's all of our details there's all of the kind of the the Deep dive kind of response object that we got coming back so we're going to kind of hook on to these you can see here the the kind of the content here the text we're going to create a data type with inside flood oflow to grab hold of the content and we're kind of we're going to map the Json response here that you're getting into those data types with inside flood oflow itself but that looks like everything is working for us we can just hit the little ship okay so that's now shipping for us now there it goes it's all available to us we now got an endpoint that we can now hook on to so I'm just going to copy that endpoint URL um and then we can now then now move over to flood flow and let's start now getting to the meat of building the actual front end okay then here we are then in flood oflow this is the starter project please do clone this link in the description and this is what you be presented with this is a real vanilla flut oflow application so this is no different for you having your own project and you also carrying out the same steps so on the homepage what I'm going to do is First add a Fab button into the bottom we're going to activate that kind of that chat window type in Fab I'm just going to scroll to the bottom and I'm going to choose the Fab option just here now let's just style this up a little bit let's change the icon so let's do a search for this particular icon question this one here on the right hand side question answer outline just select that let's select the color icon color let's give this an alternative color like that it'd be nice and white there let's just increase the size to 30 so now that is all in place we can now move over to now a bit of a Helper because what we're going to do is we're going to add a brand new page into this particular project that's going to kind of bring in a lot of boiler plate that we get we can then style and use with Insider application now thankfully the flood oflow team have already created a template which we can customize for this particular project so let's move up to the plus up the top here we can go to then the flows now the flood flow team are doing a fantastic job of creating these kind of flows that we can kind of bring into our application that contains not only functionality but a lot of screen designs as well we're just going to choose a very simple one here this chant GPT component you add to project this is going to bring in some components um and it's going to set up an API for us we're going to strip out all the stuff that we're not interested in hit add to project and let's give this let's call this chat GPT component that's fine hit create and what we can do is we can see here on the left hand side that we've got this component folder created and you can see here that we've got a screen sorry we've got a component we got a screen here we don't actually need the screen so let's just get rid of that just delete that page out just hit yes so we just left with our component that is fine we're going to kind of Tinker this very very shortly going to kind of customize this a little bit um but other than that what we need to do is we're going to very simply just activate this particular component with inside our UI so go back to the homepage let's go to the actual Fab button itself move over to the action float editor so just make sure you kind of got the floating action button selected there open up the action flow editor and let's add in an action so on the top here we're going to kind of load up this kind of like custom sort of dialog so just choose the custom dialog option after I done the search here select the component now the one that we need to select is the AI chat component just select that and of course we can now set some kind of parameters here for the dimensions so this is going to be 360 by 680 in height like that everything else is going to remain the same you of course we can come back and we can change some of these parameters if we like but that is pretty good hit the close option there so we now know that if we run this project up if we did do that hit that button and we'll kind of get that component kind of displayed kind of nice and centrally with inside the UI so just very quickly they're back in build chip just to set a little bit of context of what we're next going to do in flood oflow if you remember when we did this test we had the response coming back from the open AI platform if I just scroll down here you'll see here I've just clapped some messages this is the section that we're going to kind of drill into with inside our flood for application we're going to get that response back and what we're going to do is we're going to kind of grab hold of the kind of the very very the top level message and what we can see with inside this top level message here we can see some content and we can see a type now the cont content is just simply kind of like holding our our our type which is going to be the text there and the actual result that comes back here so this is the text and then the value so what we're going to do is we're going to create a data type called content and that is going to contain a data type called text and that text is going to have a value in it okay so we're going to kind of map this Json response of course then to our flood oflow objects with inside the application so now we got that let's move back over to flood oflow and let's start now creating those data types okay so back with in flood oflow then move over to the data types option on the left hand side let's create our first data types the first one they're going to create is actually the text one so this is the one that's with inside the content so let's just call this one a text like this hit create now our text is going to have then a value so just choose value the data type is going to be a string that's going to contain the kind of the the chat value that comes back the kind of the chat text that comes back from open AI hit create so the next one they're going to create then is going to be then the content hit create on the content add the field now what we're going to do is add the text one in we can choose the data type itself so just go to the data type option here and here just choose then the text so we're going to kind of say well hereit this is going to be cool text but it's going to have a type of text hit create one more that we just need then to add in and this is just the type there that was uh a string value which will just map anyway so just hit create so that is all created we have our content that can CH our text which is our data type and then we are now good to go with our data types okay so now that we've got our data types set up we now need to put them into action and what we're going to do is we're going to create some State variables with inside our component to kind of keep track of the chat history so just make sure you got the AI chat component selected here on the right hand side we can remove some of this stuff out we don't actually need the chat history let's remove that we're going to create our own implementation of that the input string what we'll do we actually rename it I think we're going to call this one thread ID with inside this particular component we're going to track the thread that comes back from the open AI on the first response so then we can keep passing that back in and keep the conversation going that's going to be needed so we're going to keep that there like that uh that is it we're just going to put a space in here actually and because we don't want it to be nullable we don't want to be selling sending null to the actual uh to build ship itself so just put a space in it that's that's going to be super super important and of course we're going to trim that out within the billit work workflow which you've you've already seen in part one so with that selected now we need to go to ad field here let's create a brand new chat history like that and then our type is going to be our data type that we just created here we're going to say it's a list we choose the type and this is going to be the content because as you remember the text is with inside the content itself hit confirm like that and that is fine with the AI responding we're going to keep that available to us because that is kind of like determine whether this little indicator gets displayed with inside the UI so next we're going to move over to then the actions let's have a look then at this little send action down here this is the the the user going to invoke this going to type their message in they're going to hit the send and of course some actions are going to play out now let's bring up the op let's bring up the action flow editor now all of this kind of stuff I'm not interested in actually we're going to rebuild all of this from scratch it's probably better to do that than try to rework that we got here so I'm just going to delete all of these so they're all now gone so I'm going to close that for now we're going to come back to that very very shortly now if we scroll up here you can see we've got this list View and at the moment this is now up here you can see that we've because we've removed out the old chat history we kind of got this chat variable so every single instance here of the chat is going to be this chat here now of course the value is unknown so we're now going to want to select the actual uh component State uh kind of variable that we've created so just choose a component State here and choose the chat history and hit the confirm that's what we're going to and hit save that's what we're now going to use with inside this list view so once we've done that of course we've got kind of in here we've got content here that is currently mapped to a kind of like an old variable that we're not interested in so we can now change this now we can map this actually to the equivalent with inside our actual kind of data type now with inside that chat history so with each one of these selects we just choose the first one here move up to the text let's just change that let's edit that and we're going to go to the chat item we then going to choose the available option we're going to choose the data structure field we're then going to select the field this is going to be the text now I'm going to choose the available options here I'm going to say data structure field and now we've inside that we're going to choose the values we' kind of got the content here we've gone into the text and now we're going to pull out the value of that so just hit confirm once we've got that I'm going to select the little three selectors here again and I'm just going to select the three dots copy the variable because we're going to do the same thing just over here as well just slate up here let's just remove move that out just select it again and then just paste that in and just hit confirm and that's going to get the same equivalent behavior on that particular side now one thing we got here as well is we've got this kind of like this copy sort of response now we've inside this particular kind of container here you can see we've got an action and that action is really just kind of grabbing hold of that value and and and grabbing that inside the actual clipboard itself so with that select with that container selector move over to the actions bring up the action flow editor we've got the copy to clipboard and this is showing an error right now so we can just just select this little selector again and then we can just click here and say paste variable like that and say confirm and it's going to do exactly the same thing as well as we just did just a moment ago just hit close like that so that is good to go for now okay so just while we're here then let's just clear out some of this nasty looking UI presentation so um it's obvious gone a little bit wrong because we kind of brought this kind of flow actually into our application so we don't want to kind of make it look like it is um right off the flow itself so with the container selected here just under the blur let's get rid of this gray background with the field color just select that here move down to primary background like that now within each of these particular containers here so just with those selected the first one here just moved down here to the fill color just select that and we're going to choose a secondary background we're just going to do the same thing here as well with that one selected and just choose this to also be then the secondary background itself and then what we can do is we want to just adjust this little uh this kind of little uh sort of writing indicator here so just with this one selected choose the container and let's just move down here to the fill color and let's do the same oh do the same thing as well let's choose the secondary color as well that looks a little bit better so go back to the homepage and sorry go back to the the actual chat component and you'll see now that that's looking just a little bit nicer of course please go ahead and kind of stall this up however you need uh that should be good oh in fact I think there's a couple little adjustments we need to make this is quite a responsive kind of chat window actually but we're just in this particular example we're going to keep it constrained to a mobile as well so what will happen is if we fire this up chances are that these particular chat windows are going to kind of get overflow errors they they're going to kind of appear outside of the boundaries of a mobile device so we've actually these containers selected so let's just choose the first chat container there let's move down here you can see there's some responsive kind of properties that's kind of selected here just with this selected just move down here let's just change this one here to then 260 like that and hit confirm we also want to do the same for this particular container just here as well just scroll down here move down to the max width here just scroll down here and adjust that then to 260 that will just kind of make it a little bit more narrower with inside the actual UI itself but feel free to have a play with those depending on how you are implementing this inside your own application okay then so it's time to configure our API call that's going to connect to the build chip endpoint our workflow so on the left hand side choose the a API call section you can see here that when we introduced the flood oflow flow it created an open AI chat GPT group and API end point we're not interested in the these so just hit delete on the group and they should be all gone let's add a brand new group in here now of course I'm not on the free plan here with FL is on the free plan that you can only add in an API call but here I'm just going to create a group and I'm going to call this group then build chip like that base API URL is going to be the full URL I'm just going to delete off the for/ chatbox because we're going to add that into the API call itself so that's a group level that's all configured for us hit add the group now I'm going to move down here into the add API call here and I'm just going to give our uh API caller name I'm just going to call this chat like that choose the method type here of a post and here the endpoint the rest endpoint was called a chatbot like that now we need to create some variables now if you recall that we had the thread ID and the prompt we now need to create these so thread and then uppercase ID like that then with a type I'm going to choose string add a a brand new variable here call this one prompt it's going to take in our text for our API call and then it's going to be string this is going to kind of be the the the kind of the the text we put into that send box there that's all added now create a body inside our body we're just going to now choose the Json option and of course in here just like what we did when we were testing the actual sample itself let's now just create um the same body that we had there so we got our first one which was prompt like that and this is going to I'm going to pass in the prompt for this here and just a little of comma let's add another one in here and this is going to be the thread itself I keep doing that sorry my keyboard's run the wrong way around thread ID like that and then we are going to then do a uh just going to drag the thread ID actually into that one there and that should be all good we can just hit format we didn't get any errors come up so everything's looking pretty good for us so I think we're all good to go just hit the add call and that's all our API created for this particular sample so we can now carry on Okay so now it's time to put some interactivity into our application we're now going to configure the actions for the uh the actual send button down the bottom here so let's just with that selected open up the action flow editor and here we go so the first thing that we need to do is create an instance of our content object and apply that to our chat history so when we type that first thing in on the keyboard and hit send we want to add that to the chat history that's going to be the first one that's going to appear in the list so the way that we do that is with the first action added we just type in state here and we can update the component state choose the ad Fields here and we are going to choose a chat history because we're now going to kind of add that item in there now with the select update type we're now going to add to the list choose the value to add and this time we're going to choose the content option here so choose content and now we're going to set the fields of that content before we add it to the chat history so say add Fields we're going to move to text choose the text option here we're going to now choose the text uh data type choose text and we're going to set the fields on that so the value is going to be the text that's being keyed in um on the actual uh kind of um on the actual UI itself so just select that we can move to the the widget State and we're going to pick up the text field the widget state of that text field is going to be the text that it contains so just confirm that that's all there and then confirm that again and we've now got this created content object okay and we can now and we can see here that we're now adding that to the list that's the first thing that we're going to to do the next thing that we're going to do is we're going to then uh kind of make the little uh kind of animated kind of text uh kind of little circles there kind of do its its things we're going to we're going to basically show the visibility of that so on the ad field now we're going to go to then the API respond the AI responding and we're going to just set the set we're going to toggle the value sorry and that of course at the moment is false we're going to toggle that to true and then at the end of this particular action flow we're then going to toggle that again and of course it will just set it back to false again so next what we're going to do is hit the plus here we're now going to add the action and this is where we're now going to call the API so just choose API here just do a search API and then select that now the group here is going to be build ship and of course the endpoint is then going to be chat that's already selected for us because it's the only one that we've got in the list here we can now set those variables so now we're setting the variables we're now going to set the thread ID now if you remember we're storing this currently in the page state so we can go here sorry the component State go to component State here and it's here as a thread ID and once that's set we can pass that back in and of course and in the very first instance this is not going to be set but of course at the end of this workflow once the result has come back from the uh from build chip we're then going to then up uh sort of update the frad ID with then the latest thread that comes back so then we can always be keep using that while we're using this particular instance of the actual component itself choose the set additional variables as well go to the variable name here and the prompt itself so this again is just going to be the text that we're going to pass in so just choose the value and this time we can just really go straight to the widget State here and just pull that text out so we've got that that's good we just want to give this a bit more of a a better name here I always recommend API to always recommend to kind of uh sort of give this a good name API chat result that's good so of course the API result and with it succeeds we get a kind of an okay back we're going to head in this particular direction so we would have got a response back there from uh build ship at this point okay so next up what we're going to do is now we're going to update the component state so the first thing that we're going to do is just go to state here and do an update component State and then add the fields this is what we're going to do we're going to set the thread ID now so this is obviously the result has come back at this particular state so just choose a thread ID and we're going to go to select the type here it's going to be set value and the value that we want to select is going to be now as a response from the action output so just choose that here is the chat result that's come back and the API response now this is going to be really just a Jason body now we're going to now navigate our way down into the particular result that comes back so we're going to choose Json path and this time we're going to go to the result that's come back so if you remember the the result is kind of what is the from the actual Json response it comes back at the very top level we got the result that's we had a build ship right down at the bottom on that apri response so we got result and of course as part of the result the f one of the very high level items that's in that is then actually the thread ID like that so the result. Fred ID so we're going to now literally just save that into then that particular uh kind of value that we're tracking with inside the component state so now that's all set we can also now just set the actual chat history now so this is we're going to navigate our way now down into the precise area that we need to pull out the latest message that's come back in you kind of got like an array of message that come back we want the very very first one every single time so what we can do is we go to select update type here we're going to say add to list choose the value to add so move down here into then the action outputs and here's the the API chat result again just select this option here we're going to say the Json body this time would now going to kind of set the Json path and if we now work our way down to the precise point in that API kind of result where we kind of got the content and then the text so that's exactly what we're going to do now is we're going to just select this and say result do messages and then we're going to open up our messages it's the very very first one that we would like so we put it in sort of square brackets in the zero full stop and then content oh then content and then zero again the very very first one like that and then we're going to kind of automatically map it to our data typ case we're going to let kind of flood tolow do its work under the covers and then of course here we're just going to choose then the content data type so everything with inside that particular path is then going to be converted to the data type of of type content and just hit confirm like that and that is all set so just to summarize then so here is the result that's coming back then from that we're actually taking receipt off of inside flood flow and what we're doing we're kind of navigating our way down here so here's the the kind of the result here so we're going to navigate our way down into then the the messages itself here it is and when we put the square bracket zero we're going to say right we want this very very first one here so we've got that and then we start working our way down and then we move then down into the content and then with inside that this is of course this is an array so we just want to pick up the very very first one which is this one here so pick that one up and of course now you can see that this is kind of the object that we've got at this particular point and so then we're really just converting that then into then a content type and the text and the value is already included into it so that's what's going to kind of get mapped back to our our data type okay so of course if things go sort of not very well for us let's just put a snack bar message on the screen so just hit the plus add action just do a search for snack bar here I'm just going to put a message in here just to kind of say that they can't do the chat this particular time I'm just going to change the background color to be the kind of the tertiary just red at the moment that's good so we just got a bit of an error handling condition there oh open up the action FL right so let's now move now down into this particular one here so we just need to hit the plus add the action and this again is going to be a stage change to update the component State and all we're simply doing here is kind of then now toggling the response the actual kind of little little animation that we got down the bottom there so just choose that and say toggle value so at the top here we've kind of marked it as true and then here we're going to mark it as false because we're back with our response and everything is good just one of little thing that I just want to add in here one thing that I kind of me I sort of missed is um once we've kind of updated the component State here and we're making the API call we're probably going to want to clear out the text from the actual text field itself so just press plus here at the action so if we if I just do a search for form here and we can say reset form Fields just choose that one there and we can choose then the text field is the one that we've kind of got with inside the UI actually I'll tell you what we probably need to move that down one actually because what's going to end up happening is is we're going to end up wiping out the text field before we've actually added into the API call so just make sure that that one comes after there we go so that's all good now we just need to carry on doing a little bit of work down here so we just need to hit the plus we need to give our our time for our kind of our UI to kind of update so let's just put a a little weight here so let's just put a weight delay here we're just going to put the uh 800 in here which will give give it a little delay and then plus we then can then scroll to then the bottom of the actual list view itself so you can here we got a list view so we're just going to scroll to the end that's good so that's just means it gives our a little bit of our UI time to update and then we're going to kind of scroll to the bottom of the list view so I think we are good I don't think we've made any mistakes there we'll soon find out when we try running this up so hit close Okay so I think we're in a position where we can quickly try this now it'll probably go horribly wrong and we'll probably have to come a fix something but uh let's move over to test mode and let's spin this up and let's see what happens okay so here we are then the application's all loaded up I'm feeling a bit nervous about this because we've done that at a million miles an hour let's hit the little chat option oh there we go we got our kind of our window up which is really nice so let's try putting a prompt in so let's just going to do the uh yeah my computer is overheating something like that and then hit the send okay that's looking good we got a message at the top here wow look we' got a response back that's not bad going for a a very very quick run through on that so that's looking good um let's see if it um can tell me a little bit more say my CPU my CPU is getting too hot just hit the send there thinking about it there we go so you can just see that little bit of a delay there before the UI Scrolls up that's that's quite nice we kind of need that we might want to reduce it a little bit 800 you could drop it down to 500 maybe 400 might just speed things up a little bit but it's looking like we're kind of maintaining a conversation here which is fantastic um so brilliant let's just move over to flood oflow now just a couple of kind of wrapup thoughts for you as well on this particular sample so firstly please do check the link in the description for um a slightly bolstered version of this particular sample a little bit of Animation in there that type of thing I'm just a couple little wrap-up thoughts because I know we're probably going to get some questions about this as you probably saw what I've done is I've created all of the kind of component state with inside the component itself now what that naturally means is that as soon as I close down that chat window by clicking away then what will happen is obviously I'll then lose all of my previous history and stuff like that so feel free to instead of using component State you can use application state if you would like to maintain the history of the conversation um you'll obviously have to make sure that you kind of provide options for the user to kind of like reset the thread um and you know reset the chat history back to or kind of all in everything being removed from the list so there's lots of enhancements you can make to this but it's a great starter if trying to implement something like that into your own projects you've also probably noticed as well that on the floating action button if I bring up the actions here and look at this here you can see that I didn't kind of put any of these particular options on like non dismissible I could have toggled that on which would have meant that I could have clicked anywhere outside of this and the chat window would have remained but of course I didn't have a close option with inside the actual uh component self so feel free to kind of add a kind of a close action on that if you would like to keep the non- dismissible here so just prevents the user from accidentally clicking away outside of the kind of the boundary to then then lose that particular chat there as well so again there's lots of little enhancements that you can make with inside this particular sample um so that's pretty well much hopefully you enjoyed that that was just like a million miles an hour at introducing the build chip AI kind of assistant nodes with inside flut of floats you can just see now that it just makes your life so much easier I when working with the open AI platform certainly assistants themselves but remember with inside build chip that particular node is so much more powerful and I kind of urge you to kind of have a look at the build chip documentation because they could some really really good samples there's probably about five kind of examples actually of different ways that you can actually use that particular assistant so I encourage you to go and have a look at that have a look at some of the templates as well this is really just a very very simple kind of chatbot example that I thought I'll bring to your attention just as the bill ship team have released this particular node um recently so thank you for watching if you've been watching this with inside the no code academy thank you for being there of course if you would like to join and become a member of that Academy the link is in the description of course and if you watch this on YouTube thank you for being a subscriber and um I really do encourage you to like the videos I really do appreciate all of your likes on my videos so until the next video until the next walk through video thank you for joining and I'll see you soon [Music] w

Channel: The Digital Pro's NoCode Academy

Views: 2,004

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, BuildShip, buildship flutterflow, BuildShip Tutorial, buildship rowy, Firebase, BuildShip Firebase, chatgpt, openai, assistant, openai assistant

Id: 9GGpOooWwIU

Length: 41min 3sec (2463 seconds)

Published: Fri Mar 01 2024