Flutter ChatGPT Chat App Tutorial | Build Open AI Powered Chat App In Flutter

hello everybody in today's video I'm going to be showing you how you can harness the power of open as chat GPT within your player application we are going to be taking a look at how to communicate with open ai's API for chat gbt and then have a conversation with Chad gbt in which we preserve the conversations history as well and then derive responses from that API so to give you a quick example of how our application is going to look in its final State we're basically going to have a UI where we'll be able to write some messages to chat GPT let's just say for example I write to chat GPT who was the first president of the USA and then if I send this as a question then Chad GPT will let me know what the answer of this was so with this said let's get into the video and let's get going so the first thing that you can do is make sure that you and I are at the same starting position for that just initialize an empty flutter project and after that we're going to be installing two dependencies into our application the first is going to be a UI kit that is going to allow us to create a chat like UI with within our application and that is going to be called Dash chat 2 um and let me show you how Dash chat 2 is available on pub. dev just as a quick note if you're interested in the source code for this project or any of the resources that I use in this project a link to them will be down in the description below as well as the first link comment so take a look at them if you're interested Dash chat is basically going to allow us to create a UI whereby we'll have a chat UI that we can interact with and send messages from and the next package that we're going to be import is going to be the Chad GPT SDK which is an unofficial Community maintained API wrapper for open AI apis That's written in Dart so we're basically going to be using these two within our application so I'll copy this dependency as well come back and add these two in and with this done I'm going to let flutter pop get to its magic and while this happens what I'm going to do is that I'm going to go to the lip folder create a new file within this which is going to be called cons. Dart and then from here I'm going to be showing you you how you can get your open AI API key so that you can interact with the API of open AI so to do that what you can do is basically open up a web browser and then from there navigate to platform. open.com account ai- keys and then from here you're going to come to the API key section um and then you can click on create a new secret key then basically type in a name for that in this case I'm going to call this flutter tutorial create the secret key then once it's created for you it's basically going to give it to you so copy it do done and then you can just close down the browser come back to cons and then here you're basically going to be creating a variable that is going to store a reference to this so I'm going to say const open aior API uncore key is equals to A men string where I'll paste it and do command save with this done we can come back to the main. file and I'm just going to be cleaning it up quickly um and removing most of the boilerplate code so I'll remove the my homepage class as well as the state class corresponding to that in my lip folder I'll create a new folder I'm going to call this um pages and then within this I'm going to create a new file which I'm going to call chatore page. with this done I'm going to create a stateful WID it within this and I'm going to call it chat page then for the build method I will return a scaffold like so and after this I will come back to main. do and for the home property I'll change that to be our chat page now with this done I'm going to start debugging my application make sure that everything is working welcome back everybody so I got an error while I was building the application for Android and it says that the app needs multi-deck support so the easiest way you could fix this even though this might not be the most recommended way of going about it would be to come to app and then from there build.gradle and then go to the section where it says minimum SDK version set that to 21 and after that Rerun your application start debugging it again and hopefully this time that multitext error should be gone welcome back everybody so now that the application is running we can actually get get going with how we're going to work with using Chad GPT within our flutter application so the first thing that I'm going to do is basically set up the UI a little bit so for that what I'll do is that for the scaffold I'm going to create the app bar and then for the app bar I'm just basically going to be copying this code in because it's very simple it's just an AB bar object with some specific color and styling applied to it and then after this the next thing that I'm going to be doing is that I'm going to be creating the body attribute for my scaffold and I'm going to set this to be an instance of the dash chat object so the dash Chad object requires us to pass it a bunch of different arguments the first is the current user so whoever the actual user is that we are that's logged into device the function that's going to be called whenever we send a message and then the actual list of messages that are within the chat so let's tackle these each one at a time so to create the current User it's going to be very simple all I'm going to do is go to my chat page State class at the top I'm going to create a variable called final and I'm going to say that it's going to be of type chat user I'm going to say that it's going to be current user and then I'm going to be setting this to chat user like so here we have to give it an ID I'm going to give it one and then after this I'll also give it a first name which is going to be Hussein and then a last name which will be Mustafa like so and then with this done I'm going to do command save then what I'll do is that I'm basically going to be copying this code pasting it again and this time I'm going to say that this is going to be the GPT chat user so um GPT chat user and for this I'll change the ID to two and here I'm going to say the name for this is going to be Chad GPT like so once this is done I'll take the current user variable and I'll set that to be the current user for dash chat once this is done I'm also going to define the on send function and what's going to happen on send so on send what's basically going to happen is that we'll get a chat message that's going to be passed to us and then I'm what I'm going to do is that I'm going to call a function that I'm going to Define within this class which I'm going to call Future void get chat response like so and within this I'm going to say that we're going to get a chat message like so and and I will mark this function as asynchronous then within the on send functions call back I'm going to say that here I'm going to call get chat response and then pass the message to it like so which this done the last thing that we have to do is Define a list of messages that are basically going to be displayed so for that what I'll do is that again I'll go to the top of my class and here I'm going to say that I'm going to create a list of chat message and I'm going to say it's going to be called underscore messages and I'm going to set that to be a empty list of chat message like so um and square brackets actually do command save then I'll just copy this and then I'm going to paste this in messages like so with this done I'm going to reload my application make sure that everything works we do not get any errors and now you can see that we have write a message that's appearing at the bottom of my screen if I click on it it's going to open up the keyboard we can write any messages here and then our get chat response is going to be called which if I do a print M do um M do I believe it's text you are going to see that is going to give me an output when I say this is a message and I send it you're going to see that we get a output on our debug console this is a message and if we added this actual chat message to our messages list then it would have displayed on screen as well so let's tackle that thing first is how we can display the messages that we are sending on screen so what I'm going to do in get chat response is that I'm going to call set State and within this I'm going to say that I'm going to do messages do insert and I'm going to say that at the zeroth index every time we get a new message I'm going to add it to the first element of our list because that's how actual Dash chat shows our messages and then the actual element is just going to be our message like so and to command save with this done if I restart my application and I go to the write a message section and I say test message you are going to see that now if I send it that it's displayed like so so so the next thing that I'm going to be doing is that I'm just going to be quickly changing some of the options for dash Chad so that the styling actually matches with what I showed you so for that I'm going to come to the dash chat object that we are setting up and then for that I'm going to basically set up the message options section and I'm going to say that this time our message options is just going to be a new instance of message options and within this I'm going to set the current color or the current user container color I believe that's what it's called to be black this changes the color for the messages we sent to Black and then the container color for all of the other messages that we get so from all of the other users that's going to be this color so this is like a chat GPT greenish color um and then after this for the actual text color of our messages I'm going to set that to be text color color. white like so and that's pretty much it all we're going to be doing so with this done we are now ready to integrate the Chad API into our application and then get responses from it and then display them on the screen so to do that the first thing that I need to do is that I need to initialize the actual open AI object that is going to allow us to interact with the actual API so for that I'll go to the top of my class and here I'm going to say that I'm going to create a final variable that's going to be open Ai and it's going to be equal to open AI do instance and then from here I'm going to do build and within build we need to pass in our open API key which is passed to the Token parameter so here I'm going to say open AI API key like so and then after this I'm going to define the base options property and I'm going to say that this is going to be HTTP setup and here I'm going to say that we are going to have a timeout a strict Timeout on how long our request can take and that's going to be equal to const duration and SP seconds like so so this is important so that we have a hard limit on how long our actual request can run before we actually produce a response or fail and this will basically allow us to avoid incurring a lot of costs in the case that our request is taking too long and then I'll set the unable log property to two for now so that we can see an output from this actual plugin for what's going on once this is done the next thing that we have to do is basically take this and then send messages to a specific endpoint so for all of the functionality that this actual package has you can again take a look at the actual pubd page for the chat GPT SDK package this actual package can do a lot more than just do chat you can also complete text you can generate images with prompt I think you can also translate uh languages from one thing to another the specific example that we're going to be taking a look at is how to complete a chat using the chat GPT 3.5 model you can change that to GPT 4 model as well whatever you fancy and how it basically works so what we are going to be doing is that we are going to be going to our get chat response function and here is where all of the magic is going to happen so the first thing that I need to do is that in order for me to actually let Chad GPT know not only what the current message is but what all of the previous messages in our conversation were so that it has context of the whole conversation so that it can generate more accurate response responses is that I need to generate a specific list of messages that I can pass to chat GPT so to do that what I'm going to do is that I'm going to say that I'm going to create a list of messages and this is going to beore messages history then for each of our messages that we have which is in our messages I'm going to go through them and I'm going to Loop over them so I'm going to map over them and I'm going to change them to something else and what am I going to change them into while this is going to be a bit different we are firstly going to determine where are we getting this message from so if the message. user is equals to our current user then we are going to basically return messages like so and here we're going to say that this message came from r. user and the message is actually or the content for this message is m. text like so and and in the case so let me do else if m. user is equals toore chat GPT user GPT chat user then I'm going to return the same thing but I'm going to say that this time the role is assistant and the content is the same and then after this that's pretty much all we have to do and at the end I'm going to add a two list to this I just realized that I need to remove this else block here we don't need this and then this pretty much fix the error for us so what we're basically doing here is going through each of the messages that we have and then mapping over them we're checking if the current user is us if that's the case then we create a new messages object and we return that where the role is the ro. user so so that chat GPT can differentiate between which messages were sent by the user and which were by the actual agent or chat GPT by itself and then the last thing that I'm going to be doing is I'm basically going to be reversing the contents within our messages so I'm going to do do reversed like so and then mapping over them and this is why because the actual order in which our messages need to be sent to Chad GPT is in the reverse order than what is actually being displayed on screen so just add the reversed and then it should work so now that we've generated an actual messages history we can send this messages history to chat GPT and then actually get a response from it so what we're basically doing up till now is that in our get chat response we get the message we add it to our messages list so now our m messages list has all of the previous messages plus the new message that we just asked we then create a messages history and after that what we basically do is create a request and the request is created by doing chat complete text object here we give it a model in my case I'm going to do the GPT turbo 301 chat model because I believe this is one of the cheapest one and then for the messages what I'm going to do is that I'm going to pass this the messages history and then the the last thing that I'm going to do is that I'm going to set the max tokens to be 200 this is so that we can actually limit how long of a response we get from chat GPT to a maximum of 200 tokens it's just a cost-saving meor but if you C want it to increase the amount of text that CH gbt produces for a certain prompt you can actually change the max token property here then after this is done what I'm going to do is that I'm going to create another variable I'm going to call this response and here I'm going to do a waitor open do on chat completion like so I'm going to say that we are going to pass it our request like so and that's pretty much it then whatever is the output from our request we're going to save that within response so now the next thing that I'm going to do is that I'm going to have a for Loop where I'm going to say for element in and then I'm going to do response. choices then I'm going to do if our element Dot and from here I'm going to check if we actually have a message so our message is not equals to null so if in the case that we actually did get a response from chat GPT and that the message wasn't null then I'm going to call set State and within set state I'm going to do messages. insert I'm going to again insert the message that we get from chat GPT at the start of our messages list so the zeroth index and this time I'm going to create a new instance of our chat message the user is going to be the GPT chat user and then the created at time is going going to be date time do now like so and then the final thing is going to be the actual content or I believe the text for this which is going to be the actual element. message. content like so um and that's pretty much it after this I believe I need to add another um bracket and then I'm going to add a semicolon here to command save and that's pretty much it so now all of the logic for actually sending a message to chat GPT then getting a response from it and then displaying it on our screen should be done so I'm going to reload my application and let's see if it works so now I'm going to write a message and this time I'm going to say who was the founder of Apple let's just say and if I send this question Chad GPT is going to give us the response that the co-founders of Apple are Steve Jobs Steve bosnak and Ronald Wayne so now what I want to do is whenever we send a message and before we actually receive a response I want to show some kind of an activity indicator letting the user know that their request is being processed for this we are going to be using Dash chats very useful feature which is the ability for it to display the users that are typing in a chat so for that what I'll do is that I'm going to go to the top of my chat page State and I'm going to say that here I'm going to create a a list a list of chat user and I'm going to say that this is going to be typing users and it's going to be an empty list of chat user like so so this list is basically going to keep a track of all of the users that are typing in our chat then what I'll do is that I'm going to go to the very bottom of my actual get chat response function here I'm going to say that whenever we actually send a request then what we do is that to our typing users we add and what do we add we add our GPT chat user like so and then I'm going to come back to where my actual set State function is and once we've actually received a response after everything is done outside of the actual for Loop so let me see what I'm going to do is that at the end of this function I'm going to call set State again and this time I'm going to do typing users. remove and I'm going to remove the GPT chat user from here then I'll do command save I'll restart my application and then and I'm going to write a message so this time I will ask who was the founder of Google like so and then send and as you can see it says the founders of Google are Larry Page and sergy Brin and still it didn't show us the actual typing users and the reason for that is because we're not letting Dash chat know what the typing users are so here I'm going to set the typing user property to be theore typing users do command save and then I'm going to say what year was Larry Page born like so and then send it and this time you can see it says Chad gbt is typing and then it says Larry Page was born on 20 March 26 1973 so now you know how to implement Chad GPT within your flut application and harness the power of AI as always if you enjoyed the tutorial then please don't forget to leave a like on the video as well as subscribe to my channel so that you get notified every time I upload a new video if you have any question comments or conc concerns then do leave them down in the comments below and I'll try my best to answer them for you and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 16,933

Keywords: chatgpt flutter app, chatgpt flutter api, chatgpt flutter code, chatgpt tutorial, flutter openai api, flutter openai, flutter ai chatbot, flutter ai chat app, dart openai, flutter chatgpt chatbot, flutter chatgpt integration, chatgpt mobile app, flutter tutorial chat app, flutter chatbot tutorial, flutter dall-e, flutter virtual assistant, chatgpt api, openai api, openai api tutorial, flutter llm, flutter tutorial chatbot, chatgpt sdk flutter, chatgpt api flutter, chatgpt

Id: 2Dea-jJ1SmA

Length: 20min 29sec (1229 seconds)

Published: Sat Oct 14 2023