AI Assistant Streaming with #BuildShip + #FlutterFlow - Full Example

so in this particular video we use the power of build chip and flood oflow together to create a fantastic little chat application with streaming capabilities now that means as content is coming from the open AI platform is being delivered through the workflow of Bill chip through to your flood ofl application that is what this video is all about this is what we're going to walk through and build together now just one thing to note is that this is a module with inside my my build chip course which is part of the noode academy but I thought ah because this is such a an important topic because it's something you guys have wanted I wanted to get that out there into the community so without further Ado let's get into the video and let's get [Music] cracking okay so that in this particular video then we are going to build this particular application so I'm going to provide you with kind of the foundation project for flut oflow which you can follow along if you use flut oflow as a front- facing application and we're going to build out the workflow and then we're going to come back here and we're going to put all of the meat on the bones and once you understand this you'll be able to take this into your own projects as well so here it is it's running it's the final application it's a little chatbot application I've got running inside flut oflow I'm going to hit my little chat window here I'm just going to come here I'm just going to paste in a quick kind of message I got in the clipboard here say you watching me type hit the send my question is up the top and then of course streaming is now going to kick on now this is all coming from the build chip workflow itself it's kind of opened up that stream all of that data is kind of are gradually being delivered to my front-facing application of course until it is then complete and then of course it allows me then to carry on the conversation so I'm going to ask it to kind of tell me more about to so it kind of knows about the context the assistant is geared up to solve my it problems and of course way it goes is now streaming data back from the workflow and of course I can now carry on having that particular conversation so that is streaming in a quick nutshell as a sample we're going to head over to now build chip we're going to build that workflow out and then in part two we're then going to add the functionality into a kind of a half-built starter project for you to follow along in this particular series as well so uh let's head over to build chip now okay then so before we get our hands dirty with building our workflow with inside build ship let's talk a little bit about the steps that we are going to take on this journey so on the left hand side there you can see my front end application which in this particular video is going to be a flood oflow application but of course it could be any kind of front-end application and what we're going to do is we're going to initiate that chat conversation now what's going to happen is we're going to make an API call there we're going to pass in the prompt which is just going to be the simple prompt that the user will key in but the key thing is is we're not going to pass in a thread ID at this particular point because it's a brand new conversation now that is then in turn going to then uh invoke um a build chip workflow and of course it's that workflow which will now kind of do all of the crazy stuff for us so we're going to get hold of those input parameters this going to be passed into our rest API trigger and then the magic really does happen with inside the open AI assistant streaming node where what we'll do is we'll build up all of the values that we need inside that particular node itself then at runtime it's then going to invoke the open AI services and then what's going to happen is is then we're going to kind of gradually return all of that data back into the workflow which we're going to pass on to our client application as it gets delivered but along the way what's really important as well is that um when invoke that open AI system we are going to get back a thread ID now that is the conversation ID that we're pretty well much going to have here we need to find a way to pass that back to our client application I'll show you how we'll do that when we start building out the workflow itself and then finally of course you've got the return node which is really just going to be returning back this streamed respon response from the open AI sort of streaming node so in a nutshell that's how that bit works and then of course on the result that comes back you can see here that we got the workflow there on the left hand side the stream comes in as a response uh from our actual API itself we've got the thread ID included we got the stream and of course naturally that will then be presented with inside the front end application so that sounds a lot that sounds quite complicated but actually is really quite straightforward when you follow the steps through which is what we're going to do in this particular video so let's now move on and let's start building out the build chip workflow okay so back in build chip let's create our workflow let's move over to our workflows here hit the plus let's give this a name so I've called my streaming assistant hit create there like that new workflows created now of course the first thing we need to do is add a trigger in so let's add the trigger now this is just going to be the rest API call trigger that's what we're going to invoke from our client application hereit add trigger here let's give our path now this is the name the endpoint name that we need for our uh rest API so I've called this one assistant stream like that now this is going to be a post from request because we're now going to add in a series of input parameters into our body we're going to want to pass over the prompt from our front facing application and also as well if we have the thread ID we want to be able to pass that into this particular request as well so hit the Plus on the Body Hit to rename let's do the prompt first like that so going to give this a name like that now this is going to be a string now let's just create a new one here click on rename now this is going to be thread ID we're an uppercase eye by the way so just make sure youve got the uppercase ey in here as well let's give this a name of thread ID as well now I notice that sometimes it doesn't kind of update you here and you kind of have to like go back and then do that like that so you have that little Quirk with inside build I'm sure they'll fix that at some particular point so there we go so prompt and thread ID are all perfectly placed so hit the save that is our rest trigger setup now hit the plus is where get a little bit more interested this is where we now need to add the open AI node in here of course just do a search open AI you can see a wealth of kind of different nodes that the uh build chip supports now this is one that you might have used up until this point of course we've now got the stream response one so that's the one that we need so just hit stream response now this allow us of course now set up all of the particular values that we need so let's now start filling in these details here so the API key we need to go to the platform website we need to grab that so I'm just going to move over here now this is my kind of my platform so I've logged in and here I'm using the user the actual Legacy API Keys here I'm going to create a brand BR new secret so I'm just going to do uh one here streaming assistance something like that hit create secret key and in just a moment there is my key I'm just going to copy that to the clipboard move back into build chip and of course I can now go to the API key here and go to secrets and I'm going to add a brand new secret choose add secret uh add secret there and we can give our secret name so I'm just going to call this one open AI because I'm I might want to use this for another sort of workflow just hit save like that and of course that should then now be persisted with inside the kind of the secret manager with inside uh build chip we can use that again so of course I can now just select that there it is and just click away so we got our first uh sort of parameter set now we need to get our assistant ID so I'm just going to move back over again into the platform and I'm going to move over here to the assistance option this is on the platform site and you can see here I've got my it support technician here you can see here I've got this assistant ID so I'm just going to kind of grab hold of that just there I'm just going to copy that into the clipboard and you can see here this is just a a really basic assistant I've gave it some basic instructions here right off the backat I'm not going to override these with inside my workflow but I've got them with inside this here and of course I can change these that at any particular Point um so it's really quite straightforward so I can just move back now over to build chip and go here with my assistant ID I'm just going to Simply kind of paste that value in there so I've got my system Now instructions I'm going to keep clear because I don't need to override or add any sort of additional instruction into this particular open AI system and my user prompt is going to come from the parameter the trigger parameter that I've got here so of course we just simply just come in here we can go to the variables we go to the request and of course in the body just select that and of course there is the prompt there straight forward string value is going to be there and now of course we've got the thread ID as well so just select that and go to the variables go to the request go to the body and there is our thread ID as well so we quite simply pass that in and that is all that we need to do from a very very simple setup perspective now of course I'm not adding any additional nodes here of course there's plenty of videos to go and have a look on how to kind of extend out this particular section here and of course if you're not familiar with this bit and you're watching this as a course of inside the academy then I'll be adding more videos in there which we'll talk about adding nodes in and kind of using the power of the open AI assistance but um that is for another video but of course there's plenty of resources out there to and documentation that kind of shows you how to kind of use that that so we're just going to keep this really really simple right now it's going to ask a it's going to respond with simple questions and of course we now need to return back now the result from the actual stream itself now we're just going to select a regular kind of flow node here so just to hit return here now we are only going to just click on the little pen here go to the variables and we are going to go straight to the open AI assistant stream just select that and then go to the response stream itself so that is it from a nutshell there is one little thing that we need to do and I wanted to keep this to last I want to explain a little bit more about this but we also need to um associate with the responses coming back in the return we need to associate the thread ID that's going to be produced from the open AI assistant now when you come in here for the very very first time it's a brand new conversation there is no thread but we need to pick that thread ID up and we need to somehow pass that back to our client application we're returning back the stream here so kind of the data as it's being produced juice is being returned back to our client application but of course we need to return the thread ID so how do we do that well there's a very convenient node with inside a build chip that allow us to set a header a response header that we can pick up with inside our client facing code which will be our thread ID and we can add that just in between here so just with the little plus hit that we now can do a a little uh search here let's see if I can find it I'm just going to put header there we go set response header so select that now here is talking about a header key and a value so the header key is what we're going to reference with inside our client application to say right go and grab that header value and we're going to reference it by a key and of course the value we're going to sort of pop in here okay so the head of Val the head of key that we're going to put in let's give this a name so I'm going to call this x- thread ID in fact I'm going to do the ID like that so there it is I've just kind of given it a name there now what happen is is that when you pick this up within your Cloe it's going to kind of be lowercase any any way but um I've put it in there as that now the head of value will come from this particular node here as well so we can reference this node up here so just go to header value go to the variables go to the stream just select that and of course there is the Fred ID so you can see here that this is kind of like the the object that is returned as a result from the open AI uh assistant uh kind of uh service and you can see here that we're getting back the stream which we've already handled and there is the thread ID itself so just select that uh just click away and you can see that we've now got those Associated so we don't need to worry in this particular video about what this one kind of represents I'm just going to select that to be false um I'd likely cover that in other parts of the actual course as well if I feel that that's applicable but for us we just want a straight header that's going to be returned back that we just hook on to with inside our code so I'm just going to keep that as false there so that is pretty well much it our workflow is complete that's all that we need to do so let's give our workflow a quick test just to see if it um kind of works for us now we're going to kind of see the streaming capability here but at least we should be able to test our workflow so just go up to the test here now I'm going to go to the body and I'm going to put some body in here this will kind of simulate what's going to kind of come from our kind of front-facing application so I'm just going to put in here um I have a computer problem something like that no worries and then in the thread I'm just going to put the thread ID in there and I'll just going to keep this there as an empty string I'm going to hit test workflow now fingers crossed hopefully that will uh go to open Ai and then we should get a response back but again remember we're not going to see the streaming here because that's something that we are going to manage with inside the actual client itself so you can see here I've got a response back that's all looking pretty good I've got to State that's okay back that's pretty well much all I need here we don't need to worry about the detail here but we know that that is all pretty well much set up for us so we're good so we just hit the simply hit the ship here that should all be nicely set up for us and there is our endpoint URL just make sure you kind of got this uh copied endpoint to the clipboard because we're going to need to use that very very shortly so that's it that's the uh workflow all set up let's now move over to the client facing application which is a flood of flow and let's Now work on the second part and let's get all of this kind of working with inside our application excuse the interruption in your learning but I just wanted to reach out to you to let you know about the digital pros at no code academy this particular private Community is fantastic it's got all of my training content there lots of written articles question and answers a code Library lots of topics around the no code space and a fantastic Community please do check the link in the description it'd be great to have you part of the community so in these courses is always great to be able to follow along with a particular example now the link in the description contains a starter flut flow project which you are very very welcome to clone and follow along in this particular video but as I like to do with most of these particular videos i' like to give you a little walk through in terms of the actual flut oflow application itself because I've already kind of like pre- loaded this application with kind of The Styling the widgets and some kind of really basic functionality and of course we're going to do all of the key stuff within this particular video but it's just nice to walk through so you can kind of get orientated with the startup project so on the left hand side then inside flut oflow you can see here I've got my homepage just a single page inside this particular application I've got a series of components these two components are really quite simple it's just kind of a little empty list message and I got a little indicator little animated indicator that appear in the bot right hand corner of the main kind of chat window then i' got then I've got the AI chat component which looks a little bit more complex in nature but really all this is doing is kind of presenting to the user the kind of the conversation um we have a list view in this particular kind of uh this this component which is kind of has a a series of children that's kind of boun to up here on the up the top here you got the generated Dynamic children you can see here that each one of these represents a chat and this is coming from a component State variable called the chat history now the chat history is kind of just located here we got a number of kind of component State variables got the chat history here which has a type of data type content which I'll show you in just a moment and then we' got the thread ID here this is that thread ID I was talking about previously now what we're going to do is we're going to kind of set this so we can track this with inside the component so as soon as the chat um starts we get that first respon response back we're going to persist the thread ID with inside the component State variable and we going to keep passing that back into build chip as the kind of the conversation continues so that's there as well and this little AI responding is just a little booing indicator which is currently set to false by default and it's this little thing here it's a little visibility behind it some conditional visibility that kind of says if that is true then show the little animation when it is false then we can switch that off and we can handle that with inside our actual custom action which I'm going to introduce you to very very short shortly where it's going to kind of some callbacks and we can kind of activate these things and we can turn these things off when we need to of inside this particular project so that is the AI chat component we'll come back to that very shortly and we kind of hook up all of the actions that sit underneath this particular send button elsewhere in the project we don't have anything in the app values here other than the stream response and this is going to be quite essential this one is here because as the data is being delivered back from the build chip workflow we're going to kind of load up this appstate variable which is going to be the streamed response and ultimately that's going to make its way then into the actual chat itself and we'll kind of walk through a little bit more about that at the moment but just remember that there is a kind of a holding App State variable there that will take receipt of all of that information that comes back and then of course we'll clear that down once that's kind of been delivered but I'll I'll kind of go through and walk through that very very shortly the is dark mode thing just completely ignore that if you click on the little logo in the application it will toggle it between light and dark motor you get the best of both worlds depending on how you like to uh sort of use your applications and what else have we got here then so there's nothing special going on here we don't have any kind of any API calls or anything like that because they are handled with inside the custom action that I'm going to introduce you to very very shortly because just one thing to note here that with inside flood oflow streaming is not supported out of the box so we have to kind of uh use some custom action code there in order to kind of make all of this kind of stuff happen but you don't need to write any code in this particular uh kind of video because I'll just walk you through very briefly over what that code is doing just to kind of orientate you with kind of the the the kind of the features of the code um elsewhere there's nothing more to kind of mention about other than these data types here so these data types here I've kind of kept them here because this is the kind of the shape of if you weren't using streaming you were using regular kind of chat completions API with inside the open AI platform then you can use the same kind of structure here and I'm just going to really just hook on to these for this particular example so we're going to kind of load these up with data we're going to add that to our component State variable and of course ultimately it's then going to be presented with inside this chat kind of uh list of you that we've got here so the rest of it we've got some animations um we got some kind of conditional visibility going on here you can see here we got some kind of code expressions and we got some uh uh you know bits and Bobs that's going on here on the right hand side you got a conditional code expression that we got there so there is a couple of different things kind of going on here but again um take the sample delve a little bit deeper into these and then kind you'll get an idea of kind of how this works and of course there's nothing stopping you at all from kind of copying the kind of the the all of the widgets you got here into your own project to kind of have the same kind of feature set as a very lastly then we just got this custom action just to mention to you about this custom code here so you can see here I've got this custom action it's called a stream response I've got some code in here again you don't need to type anything here I've got everything set up here but let me just kind of walk you through it a a little bit just so you can kind of understand it so here we've got some arguments that we've kind of got which is which we're going to set when we add this custom action into our action flow editor so we got the Callback itself the onstream Callback so as you as you recall previously when we're talking about the bill chip workflow as we start receiving back the data from the build chip workflow we have this call back and this is where we're going to do uh the kind of the activity I spoke about just a moment ago where we've got the appstate variable which we're going to kind of load up with this data as it comes in so that's what the onstream Callback will do for us the onerror Callback of course if we get an error comeback then we can do something with it we're not really doing much with it with inside this application but of course we need to handle the error situation and when we complete so when all of the data the stream is complete and we have all of our data come back then we just can have the uncomplete Callback where we can carry out a number of different actions once the data is all done so for example you know the little loading indicator we got there we can just switch that off and um you can see here that's what the oncomplete Callback will do for us we need to pass in the URL so this is your build chip workflow URL we need to pass that in there is the prompt of course that is just the text we've inside that text field and the thread ID we're just passing in of course once we have that we can then pass it through so just walk through a little bit in the code here um just to kind of set the scene so here is our kind of request this is our kind of setting up our API request here where we're kind of setting what the prompt is and what the thread ID is so that is the the kind of the body that um I demonstrated earlier in the workflow that we're going to pass in then of course we're going to have the kind of the stream response we're going to kind of Klick this off and then we're going to kind of then perform the send so we're going to invoke that kind of request into the Bild chip workflow now of course when that request comes back we're just going to grab hold of that X thread ID so do you remember we set it as a header with inside the workflow itself well this is just a way for us to be able to retrieve that back here you can see I've got the stream response. headers and we're going to put that into a variable called response uh thread ID so once we've got that then of course we can use that a little bit later and then this is the bit that kind of is is the key bit here and I'm not going to kind of delve too much into this but really we kind of got this Stream So as the values are coming in you can see here that we're setting the App State variable the stream response App State variable with every value so we're just going to keep adding on that's what that plus equals is it's kind of it's getting the stream response at State variable and it keeps adding on adding on every single value that just keeps coming back from that build chip workflow and then of course we're then going to invoke the actual call back so that call back is going to be important to us we're going to call each time we get a value call back call back call back call back and then we're going to do something with inside that callback and I'll I'll talk you through that in just a moment here is the on eror situation of course if we have a an on eror callback to find then we we can then call it and of course here is the onone so once we've received all of that data back then of course we're just going to then sort of invoke the the Callback itself but we're going to pass in the thread ID this is really really important so we got the thread ID up here we're going to pass this back on the complete and with' inside the action in a moment what we're going to do is we're going to then persist that to the component State variable called thread ID so that's really important don't don't don't uh if we don't have that we're not going to be able to keep that conversation going and of course we every time we do a chat we're going to keep getting a new conversation it won't remember anything at all about what we previously said so that is the code I just want to quickly walk through that with you of course if you're not a coder hopefully that just gives you a little bit of an ins sight to kind of how the code works with inside the custom code section so this is a custom action and we're going to add that very shortly into our application okay so we have our startup project all cloned let's now start making this project do something so let's get straight into the action choose the AI chat component this is where most of the work is going to happen go down here to then the send button and this is where we're now going to kind of start and initiate that particular conversation so the first thing that we need to do though is we need to validate has the user actually click key in any details now I actually have a form widget with inside the page itself so I'm going to validate that first cuz I got a rule on it to say anything more than five characters then it must be valid the user has typed something in and I can now move on and carry on with these actions so long as the form is valid so with this first one selected let's just do a search for a validate form just select that and they select the form to validate is called prompt form we know that we're past that if we valid so let's hit plus add action so now what we need to do is we now need to uh set the component State now what we need to do here is we need to add our prompt that we just typed in to the very first entry with inside the list itself so we do that and just say set Fields here and we're going to select our chat history so this is what we're going to pop into that chat history select the update data type and we're going to add to the list choose the value to add now if you remember um I showed you just on the preview of the startup project is we had some data types selected so what we're going to do is we are going to create a content data type object then we've inside that we're then going to create a text uh data type object inside that and then we're going to set the value of that because that's what's going to be displayed with inside the user interface now of course if you decide to not do streaming or you want to go back to regular kind of chat GPT style chat then that means this project can remain true because you can use reuse these particular data types if you so wish so I'm going to create a new a new data type here of the content I'm going to add a field now I'm going to go down here now I'm going to select the text I'm going to choose the value and I'm going to create the data type object of text and then now I'm going to set the value of inside that because we have a we have this uh this field called value and we just need to grab hold of then the widget State now this is the content that's typed into the actual text box itself so choose promp text fied and then we know that we've got that hit confirm hit confirm and we now know that we're going to have that first entry with inside our chat history okay so next up this is where it gets a little bit more interesting because we're going to kind of do the same thing again but I try to explain a little bit about why we're doing it so if you remember what I said previously about the kind of the stream we we're kind of temporarily holding the values that comes back from build chip into the App State variable what we need to do though is once uh every time that those values are added we need to update a new entry within our chat history that contains all of those values as they are coming in so we're going to create a new entry with inside our kind of our our chat history ready for all of those values to go in so it's kind of like simulating the response that kind of comes back um from the uh the build chip workflow um it it represents kind of like the AI entry that's coming back into our chat history that might not make too much sense but really what I'm trying to do is is to say I've got my user one now I've got an empty one ready to take receipt of all of the information that comes back from the build chip workflow so I'm just going to go up here to State like that update component State and I'm going to now go up here set the field go to chat history go up to select update type say add to list choose the value to add I'm going to create a brand new content uh object there I'm going to choose ad field and I'm now going to just then select text and I'm just going to then set a value and here I'm just going to say text and just say confirm so just kind of create ated an empty one ready for us to add in our streamed content so just hit confirm that's all set up for us okay so next up this is where it really does get interest and even more so now because this is where we're going to add our custom action in now this is where we're going to now need to set up a a whole host of different kind of actions and values for our custom actions so hit the plus here add action and you can see here we've got this option for custom actions and this is that stream response custom action the kind of the code that we saw earlier so just select that and this is where it opens up all of these arguments so you remember when I was talking through the code we kind of had all of those arguments there at the top this is where we kind of set them all up so the onstream Callback let's go into their first so choose open and then we're kind of into this whole new uh kind of action kind of flow view now where we can start adding all of the actions that's going to be executed every time we do that callback every time receive a little bit of data then keep executing these AC within here so what are we going to do first let's add an action in and the first thing that we're going to do is we're going to go to State and we're going just going update the App State that's it this is going to force a real a rebuild of all of our app State variables because what'll happen is is in a moment as each of these keep getting called I'm going to want to keep refreshing it keep refreshing it because we inside that code we are adding the values onto appstate variable but we need to kind of rebuild the kind of the user interface okay so that that's really important so we've got that in there we don't need to set any Fields it's not needed this will just force a re a rebuild so next up let's hit the plus hit add action and we need to go to then the state here like that update the uh uh component State now what we're going to do here now is is we're going to kind of grab hold of get a reference to the last chat history item we put in there so we just outside of this if you remember we put that empty one in there now we're now going to get hold of it now we're going to get a reference to it and we can then start adding values into it as the kind of the chunks come in from the actual stream itself the values that come in from the stream so how do we do that we need to get a hold of it first so add the uh we need to set the field and we're going to choose the chat history we going to select update type here and we're going to update an item at the index and now of course we need to the we need to run a code expression now to kind of work out what position where is it in our actual chat history itself we know is right at the end but if you know anything about kind of coding you know that when you deal with list see everything starts with a zero so if you've got 20 items in your list you know that it's 0 to 19 so we just need to get a hold of the value at the index of 19 in our case it's going to be the very last one in the list so item index here what we can do is we can go down here to code expression we need to add an argument so what we're going to do is we're going to set this now as um the length so this is just really going to get the length of the list itself so this is going to be of type integer now the value that we're going to select here we can just go then into to our component State we can go to our chat history choose available options and it's the number of items just hit confirm so we've now got this this kind of argument called length which we can now use in the code expression so all we simply need to do is say length minus one so as I said we've got 20 in there minus one 19 that's great hit check errors and that should all come back good and hit confirm like that and we've now got our value now we now need to select the update type so select that and we're going to update the fields itself now this is where we now need to set the actual field so remember that we got that kind of that that text that value field that's what we now need to get a reference to now so just choose add Fields here go into the text we then select update Fields again and of course we now need to go inside it so choose ad Fields here and it's the value now we need to set the actual value itself now remember at this point we kind of got the appstate variable that stream response is kind of doing all the magic so just click on the the value here we can go into the app State and we can go to the stream response and just hit done so we're setting the stream response inside that text value which obviously is going to be then displayed on the user interface itself hit done and that is it that's going to kind of now start setting those values for us on the very very last entry of inside our chat history okay so next up um because our UI needs to keep up with the content that's coming in we need to make sure our list view is always scroll into the Bottom now there's a bit of a quirking flood oflow at the time of recording this particular video that I'm just going to make you aware of that it may happen to you or it may not what I would typically do now is I would hit on the plus here I would add action and what I would look for is then a scroll and you can see here this scroll two is kind of grayed out which doesn't make any sense because on the actual page itself there is a list view which is scrollable so I don't understand why it's grayed out but I can resolve that quite quickly if I just delete that particular action if I just close out of this I go back into these actions here if I just hit the plus here and hit add action I can then add the uh scroll to here I could just add scroll to and I can choose then the chat list view now what I'm going to do now is I'm just going to select this now and I'm going to cut this I'm going to go back into my onstream callback and I'm just going to paste it in here and of course it's working so I don't understand what's going on there but um try that yourself hopefully it should be resolved at the time of you watching this so it doesn't happen for you but it's certainly happening for me with inside the kind of the the Mac version of of flood oflow it might if you're using the web then it may be fine in that instance so that's all set that's good so that means that our our scroll will now keep up with the content that's coming in so let's just hit close there that's all now done okay so further work that we need to do hit the send button open up the action flow editor one thing I want to quickly do because I forgot to do it earlier on is on the update components day when we thought sort of started kicking off the the chat request one thing we didn't do is toggle the AI respond and we want to kind of show that little loading indicator we didn't do that so with that selected just say a toggle value and that means it will go from false to true so we know it's in play and of course later on we'll on the on complete we'll set we'll toggle that back so it goes back to false right let's move back down to the custom action there's some further work we need to do here I'm not going to worry about the on error callback at this particular point if you look in the final project it's just got a like a little dialogue that comes up and shows the uh the string kind of error responser comes back if there is one so we won't worry about that here but this is where we need to do the oncomplete Callback this is quite important important to us to open up this here the first thing we need to do now is add the action and this is where we now need to do a component State update so what we now need to do is we now need to set the thread ID so we know we got it past at this particular point it's coming back as a callback parameter on the complete so just choose a thread ID here and we can now set the update type want to set the value and the value to set will H will be here it's an action parameter so select that and there is the thread ID so we've now got that persisted with inside our component State now what we can also do here is that we can add another field here and we can go to the AI responding and this is where we now just need to then toggle that value back to fall that means that little loading indicator will now kind of disappear from View and one final thing that we need to do remember we got that temporary stream response here let's just clear that down once we're done we know we don't need any of that content anymore so let's clear that down ready for the next request so let's go here um can we do it here yeah let's go to add action let's go then to state and let's go to update App State set the fields choose the stream response and we just go to select update type let's just clear the value not interested in it anymore so close that down and that is all good so I would say that is pretty well much most of the callbacks now kind of all configured obviously we didn't do that one there but we now need to work on just these more simple ones here so the URL is going to be the build chip URL that we're calling that's our workflow URL let's go and quickly grab that so oh let's move over to another tab so here it is so let's now just grab hold of that again I've probably lost it from my clipboard in fact There's the link sorry click the copy let's go back now and let's now paste that into then the URL there it is just paste that in there so that's all good the prompt now that is going to be quite simply then the uh the kind of the widget State and here's the prompt text Fields that's the the text of the user keys in the box and here is that wonderful thread ID that we're keeping a track of let's now choose the component State and there is the thread ID there so that is all of the configuration to the custom action now all complete and then one final thing that we need to do just down here of course the user just keyed in something in the text box let's now just reset that so go to add action let's go to then a reset form Fields like that and uh let's just go down here say reset form fields and say reset text Fields like that that's now kind of all complete for us now we got a little error that's kind of popping up here what is that talking about um ah there we go I forgot to click the little text box there we go school boy era there we go that's all set on the reset uh form Fields options that error is now gone so good I think we are all good there that's pretty well much that button all set up now I think we might be in a position where we can test this um I'm I'm hoping I've kind of got everything right and set up correctly but the only way we're going to find out is if we Tred running it so let's now load up the local run I'm just going to move up here I'm just going to kind of test this and it's just going to kind of do the build and let's uh see what happens on the the run so let's flick over there now okay so here we are in local run now the reason why I'm using local run of course is because using the iOS simulator we can support streaming as well so we'll see the streaming response now this probably wouldn't work in a web browser well it certainly would work in a web browser because it doesn't support streaming so you need to make sure that you are running this in some kind of local run now whether that's on an Android emulator or in the iOS simulator so right super nervous let's give this a go let's see if we got everything hooked up and working fine so I hit the chat so the chat window pops up let's put the uh the kind of the message in here uh my computer is getting hot let's hit the send let's see what happens okay that's looking good we got our first message up there whoa look at this this is not looking too bad is it we seem to have streaming working quite nicely um now let's hopefully see if does the scroll work no okay we haven't quite scrolled down yet let's uh tell me more about uh two or something let's hit the send let's see if that's working okay so there we go that's looking pretty good so it looks like we're continuing that conversation so our thread ID must be still maintained um let's just just do one more for good measure what's about for something like that and see if it carries on I want to put a maybe a scroll tool or something like that once we hit the send just to kind of make sure that we move it down once the user actually keyed in that particular message but of course there's all tweaks along the way so this is looking really good that is working perfectly so we know our workflow is working perfectly we know we got streaming working with inside this particular sample application I would say that's a a pretty good test uh right off the bat there so there you go that's one technique of adding streaming to your flut oflow application using build chip as the back end hopefully you enjoyed this particular video please do hit the like button of course please do subscribe to the channel if you love the content I produce certainly all this sort of full walkthrough content that I produce um if you want a little bit more please do check out the links in the description because of course you got the digital Pros no code academy if you love build chip if you love flood oflow please do head over to the community it'd be great to see you there there's more content there and there's evolving build chip course there as well um so I'll be gradually adding to that over the weeks and the months in 2024 so until the next video I'll see you soon [Music] oh yeah

Channel: The Digital Pro's NoCode Academy

Views: 3,128

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, flutterflow streaming, assistant streaming

Id: HVWWEaWRgo8

Length: 38min 30sec (2310 seconds)

Published: Tue May 07 2024