Creating Your Own AI ChatBot Flutter App with Google's Gemini AI API

hey guys so in this tutorial let's check out how to implement Gemini AI in our flutter application so let's get started so here I have created a demo application for you so let's check it out so here I have created flutter chatbot application by making use of Gemini AI at the back end so if you ask anything to this chat B it will just response you whatever you ask okay so I will just ask something and it will just response me so let me check write code for software developer so now if I submit this okay so it will just process and it will just respond me in quick time so you can see it give me some response so let me ask some other thing okay like write a code to add two numbers okay so I'm just asking simple thing okay so you can see it Go gave me a python code to add two numbers so like this we can ask anything to this chatbot Gemini chatbot and you can just get the response and build your own chatbot application in flutter so let's check out how we can build this so please know that I'm not going to to cover each and everything in the front end thing because I will just provide this source code on my website protocol desp point.com so you can get the source code complete source code from there okay so to communicate with jini AI we need a API key so let's check out how we can get a API key for that okay so just visit Google and search for jini AI API key and you will get this website build with gini API okay so just visit that okay so now over here just click on the button that says get API key in Google AI studio so just visit again here so you are you can get it from here get API key and here just create a new API key so I have already created that so just click over here and you can just select any of this project so if you have created your project in Google Cloud you will get the your project over here and you can just select any uh projects over here and just create a API key in your existing project so you can just get it from here and just copy this thing and now let's go to our flutter application and store it in some variable okay so what I will do I will just create a variable and I will just store it over here okay you cannot copy this API key because I'm going to delete it after this video tutorial okay so I have just copied this API key so I can just make use of it to communicate with our uh jinii AI okay so now let's check out what I have done in this flutter code so I have created a new flutter project and named it as chat Ai and then here I have just created a scaffold widget which simply contain a container so inside this container I have just created a decoration so that I can just create this background images over here okay and then down somewhere over here I have create I made use of column widget and inside this column widget at the end of this I have just showed a text form fil and then I have created a button so that the user can type a message over here and then submit and that message will be shown over here okay so I'm not going to cover as I said each and everything okay so this is the basic thing I have just coded and kept okay so now when I press on this button I need to communicate with our jini AI to get the data okay so what I will do I just create a function over here and I'll just name it as uh talk with gini okay so this is the function name so I will just create this function somewhere over here okay so I will just create this fure function which will return nothing okay and let me make this a so to communicate with our gini AI there is a dependency called as generative gini AI so we need to just add it in our for specification. y file so just open specification. yl file and under dependency section over here just add it generate you okay so it is Google generative a okay so Google generative and with this we also need intel so just add this two dependencies and hit this pubg button okay so now we can just import it and make use of it so let me import import Google generative AP here okay so now we can make use of this Google generative AI package to communicate with our jini AI so let's check out how so for this I have created a button so when this button is been pressed I'm just simply calling a function talk with jini and inside this function I'm going to communicate with our jini AI okay so let's check out how we can do that so first of all we must create a model so we can just name it anything so model okay so I will just generative model I will just make use of so here inside this model we must pass which model of Gemini AI we must use so I'm just making use of Gemini pro model okay so you can you just need to Define this thing and here we just need to pass this API key just pass this API key we can just make use of this model to communicate with our jini AI so let's check out how so here final response so I'll just name it as response okay so we have created this function as a sync we can make use of await over here so model do generate content okay so here we can just pass a message okay so here we must pass a message so if we check the data type that this accept uh that is of type list okay so iterable context of type list okay so here we must pass pass a list something like this okay so for this we are going to take a input from this text field so for now what I will do I will just create a dummy uh data for a string so here I will just create a message and I will just keep it hello okay and this message I need to pass it over here so I want to just convert this uh um simple text or a string into a list format so for this we can make use of context. text and convert it so here final content equal to so here we can make use of content. text. text and here we can just pass our message and then we can just pass this content over here okay and once we get the response from our jini we can just print it and show you the response so just printing the response over here okay so let me run this application or restart this application again okay so the app got restarted so now let me press on this button and get the response from my jini AI so you can see I'm just passing this message that is hello and I will get the get the response over here so if I press on this button so let's wait so you can see I got response over here okay but it is not in the readable form so we need it is an object or instance of a class so we must uh get the text over here so I just forgot about that okay so let me refresh this application so I have just printed the text response from here so response. text so app got restarted so let me press on this button and you will get the response over here so let's wait I'm just printing it so you can see it is saying how can I assist you so if I change this message to some other message like write a cot for me okay so if I do this refresh okay so this message will be passed to our Gemini AI by making use of this model and our API key and I will get response over here so I just press on this button wait now okay so you can see I got the response about this gini AI write a code for me okay so this is how you can Implement Gemini AI in your application so now let's work with the UI thing so I will just fast forward this thing you can you can get the source source code from my website protocol point.com so it is just a UI thing to show this messages whatever you have typed over here okay so I will just fast forward this UI [Music] thing [Music] hey [Music] [Music] a [Music] [Music] [Music] [Music] [Music] all

Channel: Proto Coders Point

Views: 2,395

Keywords: flutter, flutter tutorial, android, android tutorial, gemini ai, gemini ai contro, flutter developers, gemini pro api, how to get gemini ai api key, flutter gemini, flutter gemini app, flutter gemini ai, flutter gemini chatbot, build chatbot app in flutter, ai gemini, google gemini ai, google generative ai, flutter ai, ai in flutter, flutter chat bot, chatbot flutter, how to build chatbot in flutter

Id: MybAkHL-WEg

Length: 12min 18sec (738 seconds)

Published: Mon Mar 11 2024