How to use Gemini Ai with Flutterflow | @FlutterFlow

okay generating an API key is fairly simple you just go to ai. gooogle dodev and here you will have two options get Gemini API key or read Gemini docs I will go with the first one and that that will take me to Google AI studio and this is very similar to open a playground where you can test out different a Gemini models get the code set temperatures and anything else and but our focus is generating an API key so we'll go here and get get an API key I already have one created for our Cloud project that Google creates it for you which generative language client so let's create a new one and I will go here search it and this will be generative language client and this will create a new API key for us I'm going to copy it and close so here you can see it says this is a post request and this is the end point and in the end which says the query parameters takes the API key and then we have a post request with is a Json format and then we have a content type application Json so we are going to use use all of these into our flutter flow API call and let's go to flutter flow project I will create a new API call so let's test it out Gemini AI text and I will first copy the endpoint and here I will copy it here and in the end it says your API key I will create a new variable for that same purpose I will make it a post request go to variable and say your API key and let's call it a apore key and do it the same thing here and to set a variable from here you create a square packet and add a variable name here and now I will copy the API key here and make it a string and save it let's go and let's go back and see this is the header let's copy the header it says application Json and I'm going to go to the body set the Json type go to headers set the application Json go to body and now let's copy the Json input which is this one I'm going to copy it and paste it here and let's format it and you can see it just formated it and this is a text input that we will use to test the API so let's save it and test it first to see if it works and I'm going to test the API call okay it works and we will have a response like this it says candidates do content pass. text and this is the text we are going to use in our app so let's create a endpoint which is going to be a Json path and this one dollar. candidates let's add a Json path name it text response text response like this save it and let's go to our flutter flow UI and create a button that calls this API key and response in a UI widget which is going to to be a markdown widget so what markdown widget does it it formates the layout for us so we don't have to do anything it will just uh set the layout automatically for us so let's call the API key on actions API call which will be API and this will be Gemini AI text we will set the first variable which is going to be uh used as a user prompt let's go to variables get a variable prompt is going to be a string type and we will set it in the body like this we will remove this static test and set it with Dynamic variable which is going to be a prompt we are going to save it let's go back and call the API again like this and now we will have this variable and this will set from a widget on the front end let's create a text field that will take this as an input and I will say promp field okay and enter text here anything and then markdown wiet will have the response let's create a variable that will set the response from and it will be very simple like this API response make it a string type and we can make it null by default we can say unset and then set the widget with this one and go to the paste State set the API response and now we can even name this call gini and I guess we are good to go or we have to oh yes we have to update the past it first so here once we have the response we will update the past it and we will update the API response with the action output of the API call so we go to API call Action output Jon body predefined path and predefined path will be text response if there's nothing just just say unset and that's about it it will rebuild the page and let's test it out so what error it is variable value in configured incorrectly for APA call let's see what it says okay we haven't set this one this will come from the viget state it's going to be from The Prompt field which is the text field okay we are good to go let's test it out let's do it in run mode because it takes less time okay the project is loaded let's test it out currently the variable is API response which is set so let's give a user prompt anything like give me the name of 10 fastest cards in the word call the API key and okay we got the response as you can see we got 10 different names of cards and they are already formated for us because we use a markdown widget so this is a great widget to formate text like this okay that's it for this video I hope you like this one and stay tuned for the next one

Channel: Muhammad Junaid

Views: 1,042

Keywords: google gemini flutterflow integration, how to use gemini with flutterflow, flutterflow tutorial ai, flutter flow gemini ai, flutterflow ai app, google gemini integration, flutterflow api call, flutterflow, flutterflow gemini, flutter flow integration rest api gemini ai, gemini pro, google gemini, how to api call flutterflow, flutter gemini, flutter x gemini ai

Id: ysChx494UD4

Length: 5min 58sec (358 seconds)

Published: Wed Mar 06 2024