How to Build Your Own Chatbot App on Any Platform with OpenAI and Flutter (Easy Step-by-Step Guide)

[Applause] foreign welcome back to another episode of tech with such my name is Sachin a Google developer expert and in this episode we will learn how to build your own multi-platform chatbots using open Ai and flutter so without further Ado let's get started so in today's session the aim is to cover a lot of topics and hopefully these contents are useful for you the first thing that we'll be doing today is to go through these topics so again we won't be dwelling more into some of these which is basically how to use chat GPT I will show you how to basically get started with chat chip here doing this for the very first time and from there we will learn how to use open ai's API in the previous tutorial that we did which was again I had a huge reception huge uh huge positive feedback on a lot of feedback from you guys on how good that tutorial was which was how to use uh Sab GP to to build a chatbot right so in this episode and I've also had a lot of requests from you all to see how you can actually use chat GPT API or open AIS API to build your own chatbots so today's session is for all of you out there who wanted this specific content in the previous tutorial we actually use dialogflow and use chat GPT to accelerate the development of creating a chatbot from scratch so with that with that we will then move on to introduction to flutter so again we will see why we are choosing flutter today and into how we can integrate with open AI so we'll also learn how to build your own plotter application from scratch so that involves setting up the development environment building an AI chatbot with open AI API then we will create a chat interface or chat UI in flutter because the main purpose over here is you're gonna build our own chatbots so of course we are going to do that and finally what we'll do is for us to use the chat GPT API we will need to generate an API key I will also show you how to do that once the API key is generated we will integrate that chat GPT API or open AI API to the flood wrap and finally we will build and deploy our application across multiple platforms so the beauty of flutter is once you build it you can deploy it in your iOS Android windows Mac OS web so by writing a single Source from a single source code you can actually build and deploy across multiple platforms so I thought this would be especially useful for everyone who's who wants to build chatbots and how you can deploy across multiple channels so with that being said thank you all once again for joining me today we will basically start with Chachi PT and before we begin a huge shout out to all of my subscribers I know it's been a while thank you for constantly viewing the contents and getting back to me with a lot of queries I've been active in the uh by making sure that I answer to all the queries that you guys have so once again thank you from the bottom of my heart and uh there's a lot lot of changes that has happened in the past few months I was traveling a lot of work shifted my house so you'll probably see a new studio over here so hopefully we have back-to-back contents moving forward so with all that aside I'm also having the live stream over here so please let me know your name and where you're joining from if you have any questions or queries feel free to leave them in the comment section or the live chat section okay so thank you so much I can see the chats are coming through so thank you so let's begin so the first thing is chat topt so if you are new to chat GPD I'm sure like a lot of you guys have already would have tried about open AI chat GPT you would have heard about this um for sure now one of the ways to actually use it is for multiple use cases I can see a lot of people using chat TPT in for getting their tasks done in very creative ways so I'm not going to go deep into how you can use this again this is very straightforward for those who are very new to it or seeing this for the first time you can go to chat.openai.com you can actually create an account or sign up with one of your accounts and once you've signed up you would basically find an interface similar to this now keep in mind at the time of this recording I am a chat GPT plus subscriber so I have gpt4 as well okay so just so that if you find any differences in the screen that you're seeing versus what I am having it's just that I have subscribed to the chat GPT Plus subscription okay so I can see a lot of people Cowboy medley medley Nabil asabal mohand thank you all for joining today super excited I've seen some of you guys during the recent events so thank you all for joining today Okay so with that being said very simple thing what does chat GPT do it basically generates content for you we're gonna make this as simple as possible for everyone to understand it's generating new contents in the form of text or images or whatever it is it is generating content for you through by using open ai's large language model okay so a simple thing is for example over here rtpt by itself gives us few examples to try out so thing is explain Nostalgia to a kindergarten so let's try that so here the chat GPT is automatically generating the responses for US based on the input that we have given now some of the concepts that we'll be going through in this tutorial is prompt so what we've done over here so when you type something like this in the current generative AI or gen AI or language large language models we actually call this as a prompt so you're giving a prompt to the llm or large language model and it is generating the output for you Okay so if you then look at it chat GPT was immediately giving us a response absolutely he has a simple explanation suitable for a kindergarten and then it gives you all the responses over here okay now you can also ask other creative things like you know write us [Music] okay and it can also generate code for you okay so you guys have a basic understanding of what chat GPD does now the reason why we are going to use the Open ai's chat GPT to build our chatbots is one if you've gone through like our previous tutorials we use different tools like dialogflow and where we we actually go and Design how our chatbot should respond how it should understand the intents of the user how it should give the response everything is designed the conversation design is actually coming from you now the aim by using open AI is API is we're gonna tap into some of the power of chat GPT over here and the way how it it generates content we are then going to use that and build our own chatbots Okay so I hope by now you have a basic understanding of what chat dpd does again if you want to create a new chat you can do that all your previous chats will be over here you can also go ahead and ask follow-up questions over here and it will still understand the context and generate more contents okay so by now we've completed the first one which is how to use chat GPT now the next thing that I want to do is move into open ai's API so if you go to platform Dot openai.com and upon signing up you will see a screen similar to this let me zoom in at any point if you think that your audio is not coming through again once this is a brand new setup I had to reconfigure the whole studio again let me know if everything is clear the voice everything is coming through clearly okay and appreciate all your support guys and I can see one of the users saying my custom prompt includes uh personality scores so it better reflects my individuality perfect amazing so the next thing that we'll do is coming back to open ai's API or open AI platform now once you sign up so you can see that I'm already logged into my account let us understand what open ai's API is all about so it basically allows developers to tap into the power of gpt3 or GPT depending on the different models and this is one of the most advanced or large language model developed by openai the model can generate text answer questions summarize content for you and also translate languages and do much more so it is a very powerful language model and by using open ai's API you are tapping into some of those features so what you can do with the platform you can actually build an application you have some of these basic understanding and I would highly recommend that you go through some of these topics but what we are going to do today is go directly and go into the documentation now if you go into the documentation again let me zoom in you'll basically understand some key Concepts right so which is open AIS GPT which is generator pre-trained Transformer models have been trained to understand natural language and code so this is again a very important aspect why because in all of our previous tutorials where we were building with dialogflow and other tools you can clearly see that we were all using building chatbots based on nlu or natural language understanding right so it works on a similar concept and especially over here the gpts provide text outputs in response to their inputs the inputs to gpts are also referred to as prompts so this is what we did what we gave over here is a very simple prompt and we got the response for it now one of the things that I want to also introduce to all of you while we are building this is I would highly recommend that you go and explore in detail about prompt engineering and prompt design okay so it is a very important concept basically in very layman terms from design or prompt engineering is all about the quality of the input is directly reflected on the quality of the output so the way how you are select large language model or llms to Define uh what the problem is or what you exactly want to create or generate the quality of the output will depend on how detailed your input is simply but that's what it all relates to right so then what we will do is go back over here under the platform.openai.com you can also go and look at tokens so tokens is another important concept basically the idea is whenever you're using the API for example the string so before that tokens represent commonly occurring sequence of characters so basically GPT models process text and chunks call token so what it basically does is anything that you're inputting all of those texts are actually considered as chunks of text are actually considered as tokens now in theory tokens represent like common occurring sequence of characters for example the string tokenization here is decomposed as token and ication while a short and common word like the is represented as a single token now the reason why we are talking about tokens and other things is open ai's apis also have limitations into the number of tokens that is allowed based on the API request so it is important you it is important for you as developers to have a very basic understanding of the limitations of the apis as well okay so as a rule of thumb you can always keep as one token is approximately four characters or 0.75 words for English text so you can always use that as a rule of thumb so we had have a very basic understanding of what open ai's API does key Concepts like what is the GPT what is prompts what a prompt design and then tokens now with this basic understanding what you can then do is once you've created your account under view API Keys you'll be able to go and generate a new API key and this API key is used for you to actually access open AIS API so this is like your secret key now I trust you guys I'll be showing you my API keys do not use this for any of your applications okay I'm for sure I will remove that API key once the session is completed but I just want to make sure that you guys have a complete understanding from end to end so for that reason I will be exposing my API keys but in theory General best practice never expose your API keys to anyone anywhere it should be your secret it should be stored securely and within your application or in your backend okay using the best practices of course okay so with that being said we have some basic understanding of this you also know where to go and generate your keys so over here you can see that I have an API key section under if you click on the top under view API Keys you have already created a API key over here now this secret API keys do not share as I said you can see over here or expose it in the browser or any client-side code in order to protect the security of your account fine now with that being said let's just move forward you you guys know how to go to the open AIS apis so platform.openair.com create an account or sign up for an account and use the API Keys also make sure that you understand the rate limits okay so I would advise you to go through these but in general we are just getting started all of these you can actually see do this once you've got the application up and running but it is important that you understand all of these limitations and quotas that's associated with it in certain cases you do also have access as a trial access and after that depending on the amount of usage you will also be charged so also please keep that in mind okay so I can see some comments coming through we'll definitely go through that once it is done once we cover some of the concepts I think by now what we will do is move on to the next one so we have a basic understanding of open ai's API now what I'm gonna do right now if you go into the API reference it will actually give you how to interact with the API so you can interact with the API through HTTP request from any language and then you can see over here if you're even using your API key this is where you would use it now for everyone who is watching over here don't get too bogged on by all of these codes over here I'll break it down but the whole idea is if you're gonna make a very simple girl request these are the necessary parameters that you need to pass for the API to start working so what is that first one is you can basically paste this command and as a call request you can call this and replace this with your API key and it should start working but you can also see what are the different structures or header and the body that open AI is expecting as part of its request so as part of this what I did is to demonstrate this what exactly you guys will receive as part of the API we're gonna do this so I have Postman over here so again if you've if you're new to postman you can download it it's a tool where you can easily try out some of these apis and which will also help you clearly understand how the API calls are done what is the request what is the response and based on that you can basically uh write your application so if I come back here so this is a new API request that I'm doing so if under um inside the postman you can create a new request and then over here you can then put api.openai.com chat completions so this is the request URL this is gonna be a post request so you can do it as a post request for example I can just replicate this for you so that if you guys are trying this for the very first time this is what you can do so copy this so this is going to be your url okay so this is the API URL right now once that is done this is also supposed to be a post request okay so we made sure these two are done next if you look at the API or the documentation we have some header content so the content is basically it says its application Json content type is application Json authorization you have the better followed by the open AI API key so that's what we're gonna do right now we're gonna go back under the header we are going to create a key we're going to call it content type and you can see that it's already providing and I'm just gonna copy paste some of these okay so application Json the next one what do we have we have authorization so I'm gonna copy that go back to postman authorization now for the authorization what you will do is copy this we have it over here now instead of this Dollar open AI API key you will be pasting your actual API key that you get from open AI okay so again this Postman tool is just for you to actually test the application okay this is you won't be using this for any of the production thing this is just a tool for you to actually understand how the API Works whether the API call is successful what is the response and all of that before you actually start programming right so here this is my API key I'm gonna paste this so we are done with two and along with this you also have another key which is open a organization you can leave that empty or you can fill it in also basically we've covered all the Header information right now coming back to the body now as you can see from this API it is also request expecting an input request right so this is how the structures so what we'll do is I'm gonna pass in the same values you can choose Raw paste it so we are basically what we are doing is we are recreating that curl request over here in the form of API and then once all of this information is done you can see that if I hit send and if everything works fine you will get a response now this is also very important because by having this response you can clearly see that what is the response that you get back from the API okay so I hope by now you have some idea about how the API works right now within this API we'll go detail on what exactly did we send and why we have sent that and we'll also explore what the response is now they're in the request okay so this is part of the request and if you're wondering what happens if you if I just turn this into like a get request it will throw an error okay so you can clearly see that the API is saying only post requests are accepted so let's change it back to post and over here in the API which is api.openai.com chat completions we are defining what is a model so here we are saying that our model is going to be GPT 3.5 Turbo and then under the messages we're gonna Define a role saying that this user and the content is hello how are you I can also have the same content so for example in the earlier thing we had something like this right and if I go back or let's just create a new chat uh plan and I3 or write a thank you note okay so if I take the same thing so this is my input or this is gonna be my prompt if I take the same thing come here and paste this over here and send a request this will automatically give the same response or similar responses what we get in chat GPT so here you can see that I'm saying the role over here is the user because there are multiple roles over that's a as part of the API so role over here is user user is basically like us who's gonna interact with the chatbot now the content is basically the message that we are gonna provide or this is gonna be a prompt so what what we are saying here is write two to three sentences to thank my interviewer reiterate my excitement for the job opportunity while keeping it cool don't make it too formal and immediately over here at the bottom we are making sure that once all of this is done temperature is also uh a key feature and I'll explain about this think about temperature as more about from a creativity standpoint right so the more from zero to one the more the higher the temperature the more creative it is the lesser the temperature more formal a simple it is so depending on the kind of chatbot that you're building you can play around with the temperature okay so that's just a feature or a knob you can think of it like a knob depending on how a creative you want the response to be or house you know formal you need it to be so depending on the use case and immediately let's also go back and explore our response now within our response you can see that we have ID object created model so yes it's giving back the model that we have chosen and you can see it is under choices and these are very important keep note of this because we will be using this to extract the information uh into our chatbot so under choices index 0 we have a message and here the under the message the role is actually assistant so the assistant is actually giving us back a response with a Content saying that a interviewer's name I just wanted to take a moment to thank you for the opportunity to interview with company name I'm genuinely thrilled about the possibility of joining the team and can't wait to see this exact exciting Adventure leads where this exciting Adventure leads okay so you have again usage from tokens 39 completion tokens 57 total tokens 96 based on this whole request and response now I hope you guys have a very basic understanding of how the open AI API works okay if not just let me know in the chat section if you have any queries very specific too these apis so we have a basic request you provide call the API endpoint you pass in the header contents along with the API key and the request body should contain the specific structure based on that we get the response back very similar to what's actually happening in chap gbt so here you can see it's a similar response with a similar content so whatever is happening behind the scenes is happening over here for us through the API okay now with that being said let's actually move on to the next section so to kind of summarize up till this point we learn how what is stat GPD how how to generate chat GPT we learned the fundamentals of tokens uh generative AI prom design and then we learned how to call the chat CPT API even before that we learned how to create the API key how to use Postman to call the chat CPT API and after calling the chat CPT API we've also understood understood the different responses that it provides okay now moving on to the next section so we have a basic idea right now on how to build or how to call their gpt's API so the next section or the next part of the tutorial will be how to actually use this API and integrate it into our application and to build a chat application or a chatbot application one of the most important things is you would then be deciding should I build it for my website should I build it for my uh mobile application or what if I want to actually have a desktop application instead of a mobile application and then you'll then start to think that for each and every platform you might have to go and write your own code for each of those platforms so for those people who don't like that who love a single platform single code base to generate uh generate build and deploy across multiple platforms platter is an XML tool so let's actually dive deep into flutter right now let me know in the chat section how many of you actually have an understanding of flutter of or use flutter before if not no problems no issues we're just gonna go in straight into some of the basics of flutter and how to get started okay so I'm just gonna go back to flutter and for people who are wondering what is flutter plotter is actually an open source framework by Google for building beautiful native compiled multi-platform applications from a single code based okay you have a lot of companies right now building on flutter and most of the applications that you're seeing right now on the Play Store and App Store are all built using plot as well so there's a huge adoption the flutter Community is huge so you guys can actually learn a lot more about flutter if you're interested in that but the key component when I was thinking about building this tutorial was what can we do to build something that are developers can easily deploy across multiple platforms so that's when flutter came into the picture as you can see you can deploy it in Mobile iOS Android web desktop even embedded devices okay so with that having a basic understanding of what flutter is think about flutter as a a framework where you can actually write your code once and deploy it across all of these platforms that you mentioned so how do we get started you can actually go and install flutter so if you go search for and again depending on your operating system I would highly recommend that you choose your operating system and get flutter installed for the sake of time I'm not gonna go into like how to get clutter installed it's very simple make sure that you follow the documentation and the steps and you should have flutter installed now once flutter is installed the next thing that we are going to do is make making sure that we're gonna go and test whether flutter is actually installed properly in our system so one of the ways that you can actually do that is through the command line so assuming that you guys go ahead and install flutter and after installation we are gonna The Next Step that we are gonna do is to actually go and create a first flutter application okay so what I'm gonna do right now is create a folder over here I'm just gonna call it live stream because today we're gonna do this under this and over here you can create any project folder that you need okay now I'm gonna right click over here and again this depends on the operating system I'm using Windows over here I'm just going to open up my command line or Powershell over here and I'm just gonna do code dot so what this does is if you have Visual Studio installed it will automatically open up a project which is linked to this specific folder so now you can see that it's opening up my visual studio code and it is setting up the project location to this I'm gonna expand this hopefully it is clear to all of you so assuming that we've installed flutter one of the best ways to actually test it is through the terminal so on the top click on new terminal and we're gonna check whether our application is installed or flutter is installed so we're going to say flutter [Music] or we can even say flutter help if it is installed properly you should see something like this yes otherwise you will just see something like cannot find Pluto command something like that so here you can see that the flutter is installed which is great and we are also gonna type in the next command which is to check the flutter version now these are some of the important commands for you to have a general idea of what versions that I'm using at the time of this tutorial but as long as everything that we are doing today is concerned it should it shouldn't matter as you're building the application right so make sure that your when you're installing it you'll already be on the latest version of flutter and you have all all of the setup done Okay so we have flutter installed we can see that flutter version is uh mentioned over here now the next thing that we're gonna do is start building out our application so if I go back to a this thing so right now we are in this setup setting up the development environment is done now we've also learned how to build an AI chatbot with open AIS API so that's part of this whole section that we're currently doing now we are going to do how to create a chat UI in flutter now even before I start into how to build a chat UI it is important how to actually build a flutter application so for those who are actually wondering how we can actually do this it's very simple over here you can see that within the visual studio code you can actually use Ctrl shift p okay which is the command palette and you can actually start typing plotter new plot a new project and by doing that it will automatically create Ask you uh for the application name now once the application name is done it will automatically generate the base code for you right so it's very simple so let's do that first gonna go back to my application Visual Studio code and over here I'm gonna Ctrl shift p you can also do this by the command line so you can say like flutter create new app you can basically do that as well so over here plot a new project I'm gonna give it so this is gonna be an application I'm going to choose the folder at which I need this to create the project in so I'm gonna go back to our live stream project and it's gonna ask me the flutter application name so let's call this llm chatbot [Music] open AI oh thank you so much for highlighting that if I go back to my screen so we have just to kind of go back now okay so since we didn't capture that properly thank you so much possible for letting me know I hope it was not a lot that we missed out but the basic idea over here is let me reiterate we are in Visual Studio code we are inside a folder that we just created any directory now what you can do is click on Ctrl shift p this is gonna bring this over here you can type flutter new project so you're gonna execute this command and we're gonna say this is gonna be our application so you click on application and I'm gonna choose the folder where I want this project to be in so I'm already under live stream llm chatbots so this is the folder that I created in your case it could be any folder doesn't matter and then the most important thing is giving a name to your application so let me actually call this llm [Music] open AI chatbot I'll just put it LV chatbot this is going to be live stream uh chatbot so just something for me to identify the project and you don't have to worry about this the complete source code will also be provided after the live stream so that you guys can actually go through it but for me it is important that you guys understand how you can actually build this on your own from scratch only then you have a better understanding of how you can actually build this so I'm gonna go ahead and enter so now you can see what's gonna happen is it's gonna create the entire project structure for you [Music] you see over here it's executing commands behind the scene and then without with just that simple Technique we have created a very first letter application okay how cool is that now if you look at the code and if you look at the structure of this we are in this main dot dot file so this is like the main file and one of the key files that you need to also look into is the pub spec.tml5 we'll come down to that before we do any of these one of the things that you can do is go to terminal okay and over here we are just gonna say letter run and without command you can see that the possible options or the target devices that it's providing one is Windows second is Chrome third is Edge if I have my phone connected right now it would also detect my phone and give that as a fourth option okay so let's just do Chrome for now so I'm gonna choose two and this is gonna generate and we should have the flutter application running okay so let me know if you guys understood this clearly it's very simple once you install flutter go to visual studio code create a brand new flutter application and then you all you would automatically have a boilerplate application prepared for you without any comments so over here you can see that we have a very simple plotter application over here what it does is if you click on this you can see that it increments and you can see the values over here very basic but one of the things about plutter is also for example you go into the main.dot file which is under the library you can also understand the source code over here okay I don't know how how much we should go or 12 over here but let me actually take this step by step so that if you're getting started with flutter you can actually understand at least the basic high level okay so behind the scene it's using dot flutter actually uses dot to actually build the application so you can see that all the files that you're gonna work on is gonna be dot dot right so this is our application my app is the main class and within that you're gonna have a widget so in flutter everything is built as widgets and within this widget you can see this widget is the root of your application okay so the title is flutter demo so if you come back okay so the title is flutter demo and this is the theme of your application so within this theme file that you can see under the theme data we are saying that we have color scheme and we are also using material 3. so one of the things that you can actually do is to change the color and see if it is reflecting in your application right so I can see some questions pop up here what if I want to connect to my bank via API to get my balance for example you can do that we will go through some of those scenarios later on once we have connected the API and flutter together okay so uh I'm just going to change this from colors.you can see you have different colors over here I can say something like blue and flutter also has something called as hot reload which should automatically apply these changes whenever you save or you can also do hot restart so if I type are it will restart and it will basically load up the whole data so without you actually running commands over and over again so now you can see that we are able to change or see the reflected color now this is again the main title so you can say plotter demo to just so that you understand how this whole thing works so this whole widget which is on the top this is your root widget and you can see that the title has changed right so similarly you have my home page the increment counter all of this build over here in the form of widgets and each widget you can see that it's like you have an app bar you have the Body Center the child and within the child you are actually building up your UI so if if you're used to like UI prototyping and stuff like that plutter is an excellent tool to prototype uis quickly as well and bring your uh creativity from design to an actual application so what I'm gonna do next is we have a basic understanding of flutter right now we've created our very first flutter application and after creating the flutter application what we'll do next is to understand some of the things now if I go into pubspec.yaml file so you'd be wondering what this is so here you'll find some very important information so the pubspect.yaml file in this you can see that the name of our application is defined here so this is what we created the flutter project the name of the project right and you can provide your own description for this under the environments you can see the SDK it dependencies so dependencies specify other packages that your package needs in order to work so the way how it works is in the actual production application we will be using other packages to actually build our application so there will be a lot of packages that we can actually use to access some of the features so you don't have to write everything by yourself plotter has a very extensive library of packages I will show you what that website is you can look for that if there is a package already available you can utilize that package and then build your application you also have Dev dependencies so only that is required when you're during your development time and then under the flutter you have things like for example you have uh you have some assets or images that you want to access you can do that over here by uncommenting this line and pointing out where that is okay so these are pubspect.yaml file and I'll also explain how this works so let's move on to the next part of the tutorial which is to actually move from creating your first plotter application or creating your sample flutter project to creating the chat application or the chatbot application that we are looking to build now for that what I was thinking is let me actually go to if you search for flutter Pub Dev so you'll see this pub.dev so here you will find all the packages that you can think of um that you can actually install or utilize in your flutter application okay so one of the things is you can let's say search for a flutter native Splash you click on it it will then give you a package it will also give you all the information and so so I was actually thinking what's the best way to actually create a flutter application especially a chatbot application so because when you look at a chatbot you have a lot of UI elements that's associated with it right so if you look at open AI for example here's a very basic interface right you have the user's input and you have the the Bots response all in the same similar fashion but if we are looking at things like our WhatsApp or any chat application you have the left right concept so whatever you've typed in is on the right and whatever the response coming from the chatbot is on the left so if we have to create a similar interface we have to write code for that so I was thinking what was the best way that we can use to build something like a chat interface then I stumbled upon this wonderful package so which is called plutter underscore chat underscore UI which is flutter chat UI so have a look at this and these guys have built an amazing a package over here which you can readily use okay so what I did is I've come to this package I've explored this now what you can do is as part of the next steps is install this right so one of the ways that you can install a package in flutter is by running the flutter Pub ad so let me show you what exactly happens when you do this so I'm gonna copy this flutter Pub ad flutter chat UI and before I run this command one of the things that I'm also gonna show you guys is what exactly is happening behind the scenes right so if I come back to our pub spec.yaml file which I said it's like one of the most important files uh that you need to keep note of under dependencies right now we have only flutter right so the only thing that we have right now is under the dependencies is flutter what we are gonna do next is we're just gonna write let me exit out of this we are gonna run a command which is plutter Pub add okay so Pub ad is basically like installing a package and then we are gonna give the name of the package so in this case the name of the package is plutter underscore chat underscore UI you'll find this under the installation steps that's what I'm gonna do right now I'm gonna go back type in the package name so flutter Pub add flutter chat UI enter by doing this it will install this package into flutter foreign L file you don't see yeah you'll start seeing this over here you see here now it has understood that flutter chat UI we've added that package over here and this is the package that we need to import into our application right so this is automatically done just because we did that command data Pub add plutter underscore chat underscore UI this is basically the name of the the package so the other thing that you can do right now is now you understood how to add a package one of the other commands that I would highly encourage you to keep note of is flutter doctor so flutter doctor is also what it does is it actually goes through scans your entire project and the flutter packages and make sure that everything your development environment everything is all proper and if you have everything picked over here with no issues found that means your setup and everything is perfect you don't have to worry about anything okay so just some tips on some of the comments so we learned about flutter version to know the version we learned about flutter Pub ad with the package name we'll also see flutter Pub get okay so we'll see that later now one of the things that we've done is just add the package so that was step number one so you will see that by doing that it will add a line to the dependencies this is this is also done now to import this into your package you can basically copy this and import this into the code and just like that we have basically imported the package now you can slowly start modifying your application to start building out based on flutter chat UI now again for the sake of time what we can do is go back here and I'm gonna show you the exact steps that I did so that you don't have to uh keep drink tinkering with a lot of things so here's an example main.dot file that is part of this package that they have provided I'm just gonna copy this whole thing and since this is gonna be the main.dot file I'm just gonna come back over here change this entire file and replace it that with that code now don't worry you will see a lot of um errors that pops up because you don't have some of these packages installed now the way how you do that is very similar so just in case in the future you're copying contents and pasting and you're having these errors the easiest way to do is go through this I'm gonna pick each one each package and I'm gonna type in the same command flutter up add file picker and I think I'll have to accelerate a bit over here as we are moving more as we are already past the time but still I want to make sure that I cover this in detail so bear with me guys and I hope this will be useful for you when you're trying this on your own because you know exactly the steps that I am doing so for each one we're just gonna do the same thing so as you keep adding each of these packages you will see that the errors start to go away so next is HTTP so I'm gonna add that package as well and all of these packages if you want to learn more about it you can go to pub.dev and you can find these packages over there right so if you go back over here and search for it you will find the package you'll see how many likes how many points the popularity of it who is the publisher So based on that you know how genuine it is and uh how popular it is and based on that you can utilize it okay so let's go back into our code [Music] foreign so I have some questions over here while these are going through also I'm going to show how to run the code on gcp servers please we can definitely do that we have a lot more contents coming up in the next tutorials especially on generative Ai and some of the amazing tools and features that's announced by Google so stay tuned for that if you're new to this channel guys make sure to hit that subscribe Button as well as the bell icon so that you can be notified for future videos Okay so again some of the concepts that we are covering today it really depends on how your environment is set up but this would actually give you a high level overview of how to get started even the apis instead of like the way how we are calling it you can actually call it in your own serverless environment as an API expose it as an API and then call it as well so so over here I'm just importing the wrong package so I have to Pub add intl and the next one is the package name is mime so I'm gonna copy that and install that as well as I'm doing these things you'll see behind the scene what it's doing is adding all of those dependencies or the packages with its with its latest version right so that's what is happening behind the scene foreign [Music] and finally with the uuid and we'll also understand why we are using some of these why what is the need for this all of that okay so I think we've imported all the packages and by doing that flutter Pub ad with the package name with behind the scenes we have automatically defined our dependencies as well declared it over here automatically with its latest version number okay perfect now we have this main dot dot okay which we the code that we took from the chat UI flutter chat UI package now by running this how can you run this by using the flutter run command let us see what happens you might see an error but let's actually run this application to see what we need to do next again just gonna choose Chrome here so let me know if you're not able to understand some Concepts over here so far if it is clear please let me know in the chat section as well so that I know that I'm on the right path and I'm not moving fast okay so I want to make sure that it doesn't matter if the video is a little bit longer as long as you guys understand the concept that's what is most important aspect okay now this is the reason why I wanted to use this package you can see that we have a very basic chat interface already it says no messages here yet we have something here we also have the ability to send media and all of those things we are not gonna tap all into that right now but if you just type in hi you see your messages over here okay so I hope this was useful but if you actually look into the terminal we do have an error right so you can see that error while trying to load an asset a lot of web engine failed so we have messages.json something is not working why because if you actually go down into this code there is a place where and again there are different functions that does different things over here so this is like a boilerplate code so you have to actually go and understand so this is for like what happens when you click on the file selection right what should it do this is for image selection message tab handle message tab so it's doing certain under each function it does certain things now here what I'm gonna show you is the reason why it is failing here it's saying that it cannot find this asset messages.json so if you come here search for messages dot Json file here you can see under load messages function we are actually loading these messages.json file from the Assets Now if you also look on the left side we don't have an assets folder okay and we don't have a messages.json file so that is the reason why it is not able to colon so let's do that first thing and also remember Under Pub spec we are not we have not yet defined any assets these are all commented right now okay so I hope I have a question over here why do you have to specify the platform again so I hope you are referring to when I click on flutter when I type in flutter run so flutter run once it is done you have to test it on again as I said flutter is a frame web framework where you can deploy your application into multiple platforms be it Chrome be it Windows I'll also show you how the same thing can be run in Windows and then later on in the mobile as well okay so that's the basic reason that's why we are choosing the option okay okay great awesome so I hope that's clear um so coming back over here just gonna create a new folder we're gonna call it assets and under the assets we need to have a we need to create a file and we're gonna call this messages dot Json and over here I'll just copy some contents over here okay from my actual folder so this is a project that I've already created uh let's go and search [Music] I think for this I have not used that specific thing but let's actually go back over here under that same project okay and if you come down look at their example project you can find that there's an assets folder under the assets folder they're loading some Json data so and the reason why they are doing that is to also show you like what happens when you initiate the chat you you would typically have the previous conversation uh show up on your chat right so for example let's say uh in WhatsApp you're creating uh you're having a chat conversation in WhatsApp when you go back to that chat you also have the previous history similarly we are just trying to replicate that experience over here so the idea is in your real production application you will save some of these chat somewhere depending on your use case and whenever you're loading that content you will load that information back right so I'm just gonna copy this go back into a code and I'm gonna paste this so we just created an assets folder we're gonna have messages.json okay and under our pups spec.gml file so now that we have the file we need we need to also Define that we have an assets folder so uncomment this and we're gonna call this the directory is assets messages Dot Json I'm Gonna Save this so what we've done right now is we have created a folder called assets we have defined a Json file we created a Json file and within the Json file let me quickly walk you through what are the contents that it has right it has the author first name ID the author ID the last name created at ID status with a scene text type all of those things so you have different contents for each thing so the next author is Janus so Janus also has like you know here the type is not text the type is image let's see another user over here type is text over here over here you can see the type is file so it's just giving you example structures if you're building your own application it's actually going to give you like example structures on what format that you can follow right so now with that being done let's go back to our terminal we're gonna run flutter run again this time [Music] let's say let's choose Windows now I'm choosing one so what we're gonna build right now we are building a desktop application which is running this chat UI interface with our flutter application is now being bundled and deployed compiled and deployed into a Windows desktop application so hopefully this shouldn't take much time but again it depends on from system to system if everything goes well we should see this up and running if you have any questions while this is going on do let me know let me see if I can answer some of the questions over here is it possible to make a chatbot with open Ai and train the model to use my customer data yes absolutely you can do that so there are different techniques to do that we'll be covering that in some of our tutorials you can also do a lot of depend depending on your use case you can just with prompt design and prompt engineering you can try and cover most of the aspects but again so uh it also depends on your use case there are other techniques that you can do like embedding and fine tuning we will cover that as part of a different tutorial because it needs more time and I want to make sure that we go through it one by one so here you can see we have a simple desktop application with all of these data already loaded in and the way how this data is coming through is it is pulling the contents from messages.json and this message dot Json file is being loaded over here you can see over here load messages and after that once the messages are loaded it is and yeah it the data is extracted and then the messages are set okay so each of this again you'll have to go through the code in detail but just if you have high level overview it is self-explanatory so now we have a basic Windows application now we we've seen Chrome web application we've seen the same application in Windows I can type in something right now so your messages are on the right all the others are on the left so all of that is great now we basically handle this whole scenario so we have a chat interface going in fact you can click on some of these images and also expand you can see there's like a PDF uh option you can click on it and again I'm not here to actually show you how to do all of these together but you have an idea that this chat UI package provides you with all of these details so it's easy for you to actually get started with okay perfect now going back to our list of things to do today we've come to the point where we have created our application we've generated a API key we learn how to build a basic flutter application and also create a chat UI interface and flutter easily so all this is done now the the most important The crucial aspect of where this whole tutorial comes to fruition is how to integrate the chat GPT API or open AI API API to the flutter application so for that what we can do is I'll show you the code in fact I will actually walk you through that step by step okay so you have the main dot dot file over here you can actually go ahead and create another file let's call this just want to make sure I copy the codes from here [Music] this is my actual project I will make this live after the session you'll find it in GitHub as a repo so you can actually Fork it and then you use it for your purpose so just gonna create a new file I'm gonna call this open AI underscore service again it's a DOT file so once that is done I'm gonna paste this code over here and I'll walk you through this code okay it's very simple imagine once whatever we did over here with the open AI API we're gonna do the same concept and flutter okay so going back thank you once again for letting me know uh so going back to the code okay so if I was not sharing let me actually go back and quickly reiterate what we did right now is under Library let me actually delete this so that you I'll do this again okay so I'm gonna create a new file under Library I'm gonna call this open AI underscore service Dot Dot okay and once that is done over here we're gonna copy the whole code okay so what this code does is exactly what we did by calling our API in the postman so we understand the concepts right for calling the API we have this URL we have this content type we have to pass these Header information and then we get the response now the same thing if we go back into our application the code basically does the same thing so we have a class which says open AI service okay we have a messages then under messages after that we are defining the API endpoint in this case it's the same URL chat completions we are defining the API key so this is going to be the API key you have to replace this with the API key that you generate okay so that's important and once the API key is generated once the API key is embedded here again this is just for your understanding in production do not use your API Keys directly like this you have to follow the best practices so this is just for you guys to understand the concepts Okay so the next thing is when we are calling the chat GPD API as part of the request you remember that we had role which we are saying the user and the content your banking so in this case I've given it a con input or a prompt okay and I'm giving it more Concepts right so I I believe there was someone who was asking about Banking and other things let me actually show you with the banking example so you are running a banking bot called Bank bot so I'm saying this and you're supposed to talk only about banking okay so this is what I have mentioned so what this basically means is I'm giving it some con context to the large language model right and then whatever the input that the user is typing is then added on top of this context okay and basically a typical API a request so it's a post request just like how we did in the postman it's a post request and the content type is application Json authorization is better API key and this API key is coming from here where we have defined the API key and then under our body just like how we have over here right under our body we are defining the request a message or the payload so if you go back into our code we have the same thing we are saying that the model is GPT 3.5 turbo messages is actually coming from here so the it will basically copy this whole thing into this object and then the temperature we are defining the temperature over here so depending on your use case you can play around with this and if the request is successful once we get the response we have to decode or pass the response now how do we pass the response you know that this entire response dot body will have this whole string right it's going to have this entire string we don't want all of this information what we are more keen on is this the response so what you can do is come here you are defining under choices the index 0 message content so if you go back check about this choices index 0 message content you can also pull this up if you want to display this somewhere in your in your UI right so you can actually have this entire thing so what we are doing that specific code is doing is basically extracting or passing the contents and extracting this data by passing through this structure I hope that was clear and once that is done I'm adding this as role as assistant and under the messages the content is this and returning that content okay now we have two files main dot dot and openai service dot dot so the service file is basically making the API call which is great now we need to connect both together right so the main dot dot and open AI service dot dot the way how we do that is let me actually go back to the original project and if you search for open AI service what I would suggest is I'll copy this and I'll tell you why I'm copying this one as well this was added so this is one of the IDS that represents one of the user uh so I'm creating a new user over here which says underscore bot and is data loading I'm having a flag by default nothing is happening it's false and I'm instantiating the open AI service over here okay pretty standard stuff so I'm gonna do the same thing in our new project that we have over here come here and I'm gonna paste it so immediately it's not able to identify because we haven't declared the package over here you can also do that by importing the library which will basically import the library automatically and we have that service so now we've instantiated the open AI service so we've connected both the two files together now the next thing is how do we get the information from here right so what we'll then do is if you go back to the original project and search for open AI I'll just copy this whole thing and this is under handle send pressed function so if you go back to the original project search for handle centrest okay so you're gonna add some contents over here so the best thing that I would do is it's much more easier if I copy the whole thing and I'll explain to you what's happening okay so basically over here we have a text message the author is the user so whatever you type in over here okay whatever you type in over here you're the user the it's gonna create the Creator that field based on the date time okay and then it's gonna get generate the uuid a unique ID over here and the text is message.txt now what we are doing is if you remember the the Boolean that we had a flag is data loading false in the beginning of the project here we are saying that okay something is going to happen right now because the user has just entered a text so sale loading is true AI response over here is calling the open AI service dot chatgpt API so if you go over here this is a function that is defined under the open AI service right so it's going to call this function it's gonna call this API which is this HTTP request and it's gonna get the response and it's gonna pass all this information and then it's gonna return back the content and the content over here we'll get it in the form of message.txt and this AI response what we're gonna do is similar to how we are creating a text message object we are going to create a bot message object over here with all the the same things so here the author is going to be the bot and created as is going to be again the current time the ID the unique ID and then the text AI response okay and add message over here so so the text message from the user and I'm just saying that okay everything is done set is data loading set it back to false and add message from the bot message so this bot message is containing the response of the user and this add message text message is the actual message from the uh user and this is from the response from open AI so I hope this is uh hope this is clear and the reason why I've done it in this way is so that you clearly understand what is happening you can definitely rewrite this code to make it little more uh better but just by breaking it down into these different uh modules I hope it was clear so now if you run the application so I have another comment over here which says mobile version how would you get the option to run it on iOS right now I'm running it on Windows if you're using Mac OS you will have the option to just like how we have Windows Chrome and Edge you will have the option to run it on Mac OS as well and at the same time you'll also have the option to run it on iOS as well Okay so using the same command so let's see how our application is done so you get you guys I hope that you guys actually got the whole idea behind this we used a package called chat flutter chat UI the package has all the components to quickly build up a chat interface the main important aspect is using open AI service file so the whole Magic that's happening is in this specific file once that is done we are extracting the messages and then you can pass that message into your application so here you can see that we have all the previous messages loaded in from the messages.json file now if I say hi you can see that we're getting a response now beautiful so you can see hello I'm Bank bot a virtual assistant designed to assist you with all your banking needs how can I assist you today so the reason why you're getting this message is because in R prompt in our API we've said you are a banking bot called Bank bot and you're supposed to talk only about Banking and then whatever the prompt that we've given it says Hi in this case the open AI API has understood the context as well as passed in the prompt very simple stuff again using prompt engineering and prompt design you can take it to a different level but I wanted to make sure that you guys have a basic API and basic application up and running now within the same thing I can say how can I start uh savings account so what's happening behind the scenes it's going calling the API and fetching that information back into our application okay so I can see that can you please show how to put the API in a different file and reference it within the code for some reason not working for me so that's exactly what I did the API is actually in a different file we are calling that file from the main dot so there's two files one is the main dot dot file with all the UI elements and then we've created a separate file called openai service dot dot file so this is calling the API key and this function is then being called in your main dot dot file okay so if I search for open AI service your declaring declaring the service over here and then you're then calling it over here right so you're calling that same function that we had created over here extracting the response and then we are adding it as a bot message very simple now if you look at the response also starting a savings account is simple and easy to open a savings account you can follow these steps so everything about like banking is now your Bot is able to uh talk about it right so I can actually show you if you actually change this and say instead of your uh real estate virtual bot called it estate bot and you're supposed to only talk about real estate okay you can keep it you can even say like you're a real estate expert talk about only real estate things right and by creating giving this prompt and running the application so you can see I did the hot restart over here I'm gonna say hi and hopefully this time it gives a different response so hello I am estate board your virtual assistant for all things real estate how can I assist you today so I can say what is the best uh what are the key factors that I should consider to get the best Roi on real estate Investments okay so this is a topic that we've not trained the bot on we've not done any kind of designing or implementation on any of these topics if all thing goes well it should give us some high-level information based on that so I have another question over here can it pull live data for example from stock market you can try it out you can also call what I would suggest is use the large language model along with existing apis to kind of create that seamless Synergy and extract the information for the user okay we will see some of these in the upcoming tutorials because it's there's a lot of important Concepts that we need to do in production applications depending on certain chat Bots like very generic chatbots you can just use prompt design and the open AI API or you know uh other large language models apis that's available for that so in in our next tutorials we'll start to see about Palm to apis and how you can use generative AI on the whole but you get the overall idea that it's just not about using the large language models it also depends on your use case and how you can do certain specific actions or tasks associated with it okay so now you can see that when it comes to maximizing your Roi in real estate Investments there are several key factors location property condition rental demand so it's able to give me all the information in the form of chatbot like a chat conversation so what we've done right now is very specifically create like your own chatbot using chatbot open ai's API as well as flutter so depending on how you take care of your prompt over here and by making more modifications to this you can kind of create a very simple chatbot of your use case and again you can add more things you can refer the API you can also go ahead and build chat interfaces around this so in the future for some reason you want to upload an image and then call some apis and understand uh some information on top of that you can actually use this framework or this package as a building block so that it's easier for you don't have to write too much of code you're more focused on the logic of your application of course you need to tweak the code here and there depending on your use case for example I'll show you uh an application that's already done so I will make this source code available for you guys after the session I hope so far things were clear let me actually move on to the actual project over here so in this actual project I'm not focused more on loading the previous conversations and stuff like that you can see the code is still there but I've just I'm not using it you can see it's declared but it's never used okay so this is cleaned up it's a very simple a project and it's gonna use the same API over here okay now what I want to show you next is building so we built it on Android sorry we built it for the web we built it on desktop now let's also try it on the mobile so I have my pixel 7 Pro over here I'm connecting to my phone make sure everything is done gonna connect it to the computer and over here I'll try and cast my screen so that you guys exactly see what's happening as well Preeti says yes service about us about the previous con conversation now got my answer awesome so I'm happy that uh guys are able to get the information again feel free to let me know if you have any questions and again the building blocks are all here within this uh long video that you guys are watching right now I hope this is this shows you how to actually build everything from scratch even though we are using packages the basic building blocks you guys should have an idea for that I'm gonna cast my device at the same time while I'm doing that let me also run this project okay gonna do the same thing flutter run and if everything works fine this should launch it directly on my pixel 7 Pro [Music] and as it's building you can actually go through some of these code over here and especially in the main.tart file go through some of the concepts some of the files and if you're looking to see what happens every time you run a flutter project you'll also see for each of the projects you have IOS you have Android basically it's building up an entire project over here right if you're creating a flood Android project for the first time whatever hit generates it will have the same thing over here as well now even for web let's say that you want to once you've done uh with testing your applications you do flutter bill for web and then whatever is there under the web folder you can copy this entire thing post it onto your server or deploy it on Firebase and you can have this chat application hosted online for anyone to use okay so now I have my app which is running and if I you can even change some of these ask me about so all of this it can be done through the package I can say what is your name foreign you can see here it's calling the openai API and it's fetching back the response now I'm using my phone over here I'm not sure whether you guys can see it on the screen I'm gonna ask more information how do I open a savings account [Music] and behind the scenes it's calling up the open AI API fetching all the information and you can see it's got a detailed information on how to all the information that's required so anything to do with okay um let me ask it something else can you talk about real estate foreign focus is on banking related topics I can provide some general information about real estate as it often intersects with Banking and finance please keep in mind that for specific real estate advice it's always best to consult with the real estate so it still had that initial prompt where we are saying you're only supposed to talk about Banking and it gave the cues to that right so I hope guys this entire project or this tutorial was helpful for you all to actually understand how to build an entire multi-platform chatbot using open Ai and flutter so I hope this tutorial was useful for each and every one I know it's been a long time that we had a content on the channel now we are back with more contents and if you're tuning in for the first time if you like what you see please make sure to hit that like button subscribe to the channel so that you can be notified for future videos and also hit that Bell icon if you haven't already so uh any new questions let me know if nothing else thank you all I can see a lot of chat thank you all for joining today it was an absolute pleasure to have you all on the channel once again and looking forward to seeing you all in the future episodes so with that being said today we built a multi-platform chatbot using open ai's apis as well as flutter deployed it in web desktop and mobile hope you guys enjoyed this video and see you all in the next one

Channel: TECH WITH SACH

Views: 30,805

Keywords: ChatGPT, what is chatgpt, how to use chatgpt, using chatgpt to build a chatbot, chatbot business ideas, chat gpt coding tutorial, what is chat gpt and how to use it, how to create a chatbot using chatgpt, chatgpt tutorial, how to use chat gpt, how to make money using chatgpt, create an app using chatgpt, openai api, open ai chatbot tutorials, chatgpt chatbot flutter, chatgpt chatbot ios, chatgpt chatbot android, openAI, flutter, flutter chatbot, create a flutter chatbot, genAI

Id: 9m-HK9SiZoA

Length: 108min 20sec (6500 seconds)

Published: Tue Sep 05 2023