How to create your own chatGPT in Flutterflow (updated version)

hi my name is Liam mcmillion and in this video I'm going to show you how you can build your own shat spot inside of an app called flut flow and for those of you who don't know flat flow flut flow excuse me is a app that you can build softwares in and that basically allows you to drag and drop and build your own software connected to third party Library such as chat stripe and much more and that's why I'm using it and I've used it in a almost all my videos in the past so yeah that's why I'm using flood flow but in this video I'm to show you how you can set up an own shat bot inside a flut flow so you can connect it to shat TBT get responses store the conversation and basically build an own shbt inside of your app so let's get started just imagine there was some cool intro there just now with some using and that stuff but for the video I've actually made a video in the past showing you how to set up the API call between flutter flow or in flutter flow with shat so you can get responses but in this video I want to show you how you can store the conversation and build out the module so it's a bit more comp or not complex but more solid and a complete picture of how to set it up so when you as you can see on my screen that you need to be inside of flutter flow and you need to go here down to API calls and press add and then you just need you can name it whatever so for example H AI or yeah AI response is good response the same thing I had before and then press post before we do anything else now we actually need need to check the API URL what header we need and we need to check in the shtm documentation to actually see what values we need to set for these so let's go over here to our browser and you can just go into your openm API account so currently I'm logged into lecm gmail.com or something you can see I've got some H API Keys all created so you need to create an own API key that you can use in this video as you can you can see I will delete this tutorial key of course after this video so you guys don't uh abuse my API keys and charge me a lot of money H and you can see up here a stored API key here or many people in my old school actually took notes in the browser that was quite funny but let's keep going so after getting your API key just going in here and store it somewhere probably in the browser or no taking app or something just for the moment then just click here on documentation so you can come up to the open a documentation because this will allow us actually read what data we need to set here in flut flow to actually make those requests to open AI so once you're in here the only thing you need to do is just click here on the API reference up here then you can just click on endpoint chat and here you can actually create or see how we can actually get a or create a chat with an AI and get responses so you can see it's a post request that we set up before and we we're going to copy this URL here and just paste this in flat flow so API URL just paste it in there great uh before oh did I put a space there oh perfect header going to check what header we need so we need a content type application Json so just copy this here cont type perfect now we actually got the header so now we need now we can check what variables or what parameters we can send to it so we need so we can know kind of what to store inside of our flat FL app so we can actually just add this API call for now so it stores so we don't go out of it and it's deleted so if we go in here into the uh documentations again we can see what we need to send so we need to send a okay we need to set up this authentication be as well so we can just go into flat plugin add a new header authentication beor so to actually set our API key here since we don't want to hardcode our API key here since that will expose it we can actually set up a variable here that's called API key and that will be a string and the default value you can actually uh use the use the API key that you stored in the browser or uh probably somewhere safer than I did but this is just for the tutorial so that's why I'm not super careful with this API key and then I can just paste it in here as default value and save and now we can actually use this API ke in header here so you can just use the M square bracket and you say API key there so now that's done so now we actually pass the header API URL the methot type and the API key so the only thing we need to do now left is just check what do we need to send in the body to actually use this m API so we need to send this model here so we can actually just copy this and just so you know chat 3.5 turbo is actually now routed to the newer model that's a bit cheaper that's called GP PT 3.5 turbo H 01 125 or something I don't remember but just so be aware you don't need to be Super H pointy with this module right now because it actually points to the most recent one the best one but if you want to use chpt 4 you can change the model here but I will just use CHT 3.5 turbo for now so let's just paste it in here so go to variables and we can actually just say model string just paste it in default value and one more thing now we actually need to pass in h wait where is it here we actually need to P pass in some Mees so here um we come to the part where we can actually send the conversation that we had with AI before today again so it knows the context of the question so you can see that the messages is a list of these kind of objects that have a role and a Content um field so the only thing we can actually do here to actually represent this in flat flow is actually to just um send in the list inside of flut flow but instead of having this kind of Json objects we're actually going to create a data type inside of flutter flow called what we call this H message with that has a role and a Content field so let's do that now so going into FL flow H which going to check so I saved great then we can just go here to data type we can oh here's a GF that's for another tutorial that I recorded in the past H so we can message awesome then we have the role that's a string create and then we also have the was it was it the message yeah no content content right content string create okay perfect now we actually created a new data type that will represent uh these uh objects here that can store this value so um every time we get the new response from the AI inside of our chat we just create one of those new data types in a list that we can store in the App State inside of flood flow and you just pause that into the API call so great that actually that's actually it so messages is there anything more here no we will need to look at this response later because we need to see the response or the answer that the AI gives to our conversation so you can choices message H this isn't super important now but this will be useful later just so you have you're aware that you need to have this browse tab open still so now if we go into flat flow after creating this message and actually setting up the API call you can actually also set up a new variable called uh messages and that will be a Json and that will be a list true perfect and save great now we can just go in here to the body and inside the body here the only thing you need to do is just press Json and then we will set up the uh model which will be just the model that we PA with is CHT 3.5 turbo whatever and then the rest would be messages great and now we just post it in there uh perfect yeah that should be it and then you save great so now we actually done the most important part with the API call let's now go into the flat flow widget Builder and actually build our um shat DBT module component or whatever so let's get that get to that so to build the actual shat widget or module let's just go into the widget tree as you can see I've already created a page called AI page and I've also added this AI page to be the normal logged in page for this app just so it's easier to test later so in here you can see I've already added a CO a container for with a background color just so it looks a bit better so here I will build the M AI shat so to actually build kind of the shat the you can build whatever look you want but I will just show you the kind of General structure on how we can actually um show our messages and the as messages in different ways so I thought that we could actually set up so we will have our messages from the right and with the text and some icon and then when the AI write something we have the icon on the left and then some message on the right so basically like a normal message app that you would have on your phone so in order to do that we will actually create an app state for our um AI page here so if we go to App State you can see I've already create on a local variable State variable here uh but let's just go in here and see how it's defined so we just named it the messages and it's a data type uh type h it's a list and the type of data type is message and that is just the same data type that we defined over here so the idea here is that every time that uh we we write something in some input field and press send we will create a new message um data type object we create one of these a new object of these uh type and then you store that in that page date list and then just Loop through that list and show the messages inside of that column that will create shortly and every time we prend we'll also create an API call or make the API call and to the chbt get an answer create another message with the role assistant instead of user and the content will just use the content from they response so and then because then it's super easy inside of our column to just check if the role is used there display the text in this way if the role is assistant display the text in this way so let's actually set that up now so first let's just create a row for kind of displaying all the messages and then inside of the parent column we can also Define our row and which will kind of hold the input field and the send the button so the column can actually just be expanded and has some margin so it doesn't look horrible and it should also be scrollable so we can scroll through all of our H messages so instead of the row let's just um use a text field for kind of prompting our questions so let's just name this guy input that's good enough and inside of this row let's also add a button that's called or not called but has a text send great that's actually it so inside of this column that we just to finded that will store not this column but this other column so to actually make so we can actually kind of see all the messages in this column we will just press up here on gener children have a a message and for the value we'll just use the page date messages list that we just to finded save and now comes the cool part we can actually you can style your own messages depending on the role and do whatever so yes and Define a column inside of here H we can actually add some margin so maybe 30 and inside of this column let's just add a row H and let just add another row so these rows will contain the content that will be displayed either when a user writes something or when an AI write something so for example this row could we could set a conditional that set a condition and we can say if the current message items roll so if the uh what is it data structure field roll is equal to user then we should show this row and inside of this row we might might want to have the first the text and then on the to the right there we have the icon so we can actually set it up like this we can actually set up the row to have on this side and and we can just set up the icon so icon where is it there and then maybe set the margin here here to 20 or something so the icon could be maybe what icon should we use maybe a a user icon so uh oh that person for that he had some cool hair that's that's good enough and let me assume in so you don't so you can actually see what I'm doing H and ion color is good enough so the text here should be the text of the current message so we can actually set this to message item uh data structure field and then content and now we can do the exact same thing as we just did but in this other row H but we will show this role instead of when the role is user we will show this role H when the role is assistant so we just press this row a conditional and just add the same thing but instead of user we just say assistant confirm and in here we can basically do the exact same thing as we just did with the icon and the text but just use a different icon and have the content on the left side instead so the icon here could just be a robot do we have any cool robots here not really font awesome oh that yeah that wouldn't good enough pretty boring but good enough for now and actually let's just make this a bit bigger so it matches the size of robot and then we can actually just add the text here just going to set some margin I know I don't why I don't know why I'm focusing on styling right now since I'm only trying to show concept but this is pretty ugly anyways so doesn't matter so for the text let's just set us before to be the uh content great okay now we actually set up the structure for displaying all the messages from you can see the user robot user robot whatever so now let's actually show how we can create these message them object document when we actually chat with the AI so to do that before we actually use the API call here let's just actually make a test um call for on this API call just to see so it works and actually so we can Define these um Json pffs for the response because I I find it to be not hard but it's much easier to Define it here than to go inside of the bra or you know the documentation and try to kind of read it exactly how the response is um structured and just uh kind of have this because we could Define the Json puff here like you know dot uh messages for you know the response data but it's much easier to just make a test request and then just press M add for the data that we want you will see what I mean so for the messages we just have a list of uh so let's just say here role which will be a user and then we will have a Content which will be maybe hello yeah that's good enough perfect DK uh D perfect so let's now make the test API call and see if if this works okay there now after some debugging I finally found the um issue on what was that what that is and basically if you see here that we set the data type to Json at least is true for some reason floppy flow when we test the response handles this as a string so you can see that we actually have the normal M list and then a j s format that with different fields as we should if I test the API call you can see if you go to body that we actually pass this as a list with a string and then we pass the object inside and this is not what we want so to actually get just test the response quickly to actually you know get the right Json PA for the response just do this just press on Json to FSE for now save go to body and just WRA inside around a list yourself just wrapped around the list because this will make so this is p Json instead of a string this is nothing that we have done wrong this is just something that flut flow needs to fix so when when someone sets the data type for something to be Json list it shouldn't be passed as a a string list instead of a Json list so if we go in here and now we pass this but we can just remove the wrapper for the list if you just go here and now with test APLE you can see that we actually got the response as we wanted so now we can see that the body actually passed the object as we want so now we can actually set check on what H response we got and kind of you can see here that we got these ades and pffs variables that want to grab so we can actually grab the ai's uh response text so let's just go down here so choices messages so you can see Ro assistant content H you can see choices message content perfect so we can just press add Json puff so now we actually added we can add this as response great and now just scroll down and press save so the only thing you need to do now is basically just go here to call Definition h change this back to be list true save and go to body and remove this uh list here because hopefully this that string list error was only something part of this response test part and not when we actually use the app so that's it now we actually got the response back from the AI let's Now set up the logic for the input field and this button here so we can actually send our text to the API or to the AI and get the response and actually show it in our app so the first thing is just go into the button here open and then just say so the first thing we need to do is just add another of those messages items depending on our text so let's just go here to page date add another message object so we can say add to least and then create another message so the first role should of course be user since it's the user that's writing something and the content should just be the content of this input field so we can say input confirm now we actually make the API call so now we can say that the add action now we can say API API call group should be or like API call should be a response then additional we don't need to set the API key model since those already have default values when we Define the API call but you can see here for messages here we just pause the uh page date where is it messages and then we can just say map list items and mapping a list is basically just applying a function to each item in the Leist so we get the new list and we want to make each of these items to be to Json since we want to post the that data type with the role and the content to be a Json since this API call requires this to be a list of Json so you can see here that now we pause and a list of Json to the API call but when we tested it it was something wrong as I mentioned where it was a list of strings but hopefully this will be posted as a list of Json down here we can say that if API call succeeded and by the way when actually I recorded this tutorial once before or this specific part part I'm doing now and when I came here my app crashed I need to re-record this but hopefully it doesn't crash now so let's just say add API call and here we can just say that that we add another message to the update so messages let's just say um at least and now we're actually going to create a new message and the role is going to be assistant great and now the content now we're going to grab that predefined Json path that I that we grabbed from the testing of our API call so now we just goe into action output API call and now we can say JS somebody predefined path and here is the Json path that we named so a response that's the one we named so we can press response confirm confirm so that's actually it I think it's going to double check uh so we take the response that we or the prompt that we sent create a new message object with the role make the API call H get the response back create a new message item and those will be shown up here since these are dynamically generated form messages so let's now go into our test mode and check if this actually works so see you there finally after all that work and all that debugging we've actually come to this stage let's now check if this actually works and I Haven this is the first time for me testing as well so let's just see for example hey what can I write there okay let's say hey send pretty cool we actually got the response there so let's add something else uh my name is Leo send nice to meet you Leo is there anything I can help you with h yeah um I forgot my name what is it let's now see if the M AI actually remembers what we said to it because we said that my name is Leo let's now shake that yeah I forgot my name what it was it what is it so let's now see if it actually can see the previous messages and actually answer this question let's now see your name is Leo great so that's the entire video so you can see that my chat isn't looking too well but you got I just showed you kind of how you can use the concept of a API shat and the page State the data type in the flutter flow and combine these to actually create this functionality so I don't remember exactly who made it request but this was a great video idea so thanks again hope this helped you and and uh yeah this is basically how you set it up if you want to make it look nicer that's all up to you I think that just going to think one second is there anything more I need to go through about this no not really you can train your own M A in open as well those gpts and just implement the H their using their API documentation to implement the same thing but the main things to take from away from this video is just creating a data type message storing a Leist paing the least to the API call and actually test API to define the Json path for the kind of response and creating those messages whenever I typ site um send something and also when I receive something to display those dynamically here so hope that helped you and that was the entire video have a great day and see you

Channel: Leo McMillion

Views: 343

Keywords:

Id: ny4hlizNNPs

Length: 23min 44sec (1424 seconds)

Published: Tue Feb 20 2024