1 HOUR - Learn the Gemini API and build a multi-turn chat bot!

if you want to learn how to use Gemini's API in order to build your own AI apps this is the video for you we're going to be building this AI chatboard that will allow us to have multi- conversational chat all thanks to Google's large language model meaning we'll be able to build on the question that was asked before by feeding in the whole history of the conversation for context pretty cool right but what even is Gemini in the least amount of words Gemini is a series of multimodal generative AI models developed by Google Gemini models can accept text and image in prompts depending on what model variation you choose what this means is that we can feed in text prompts such as what day of the week is it and it will return back a day such as Wednesday and not only that we can feed in images as prompts too so I can feed in a picture of a cat and a hat and we can ask what is in the photo and we should receive a text response back if at the end you want to take your app to the next level and even start building inapp video or audio capabilities such as video conference calls that perhaps take the audio of what is being said and Trigger the AI to answer questions when initialize for example you can do so with the stream SDK and API this API is super easy to use and you can get the code for it simply by following these six steps right here of course this is for a react app as that is what we will be building today but you can also get the code for react native flutter and so many more seam also integrates seamlessly with gbt and Gemini make sure to click on the link in the video description below to get the code to do this and the six steps necessary okay so what are we waiting for let's build out a simple multi-turn conversation chatbot using react for the front end and no JS for the back end okay so let's do it I'm just going to go ahead and create a new project so let's go ahead and select new project and this is going to be a react app so this will essentially spin up a react app for for me thanks to the MPX create react app commat so let's go ahead and call this something I'm just going to call this Gemini app maybe let's stick react to the front Okay so this is essentially going to be stored in my webstorm project directory on my computer I'm just going to click create and wait for that to spin up the app along with all the preconfigured files that we need so this is wonderful this going to save us a bunch of time let's just wait for the to do its thing in the meantime I'm just going to go to the Gemini documentation so here we are here is the URL if you need it and we're just going to work on getting our API key so let's go ahead and build with Gemini and let's click on this link right here AI Google Dev and it should take us to our dashboard of course please do make sure that you are signed in so I'm just going to go ahead and sign in here and I'm just signing in with my Google account so please go ahead and do the same and now we are free to get our API key so that is something we're going to do as a reminder I'm just going to go to the API docs here what we're going to be doing is creating an app that uses the Gemini pro model and now we're going to just go to no JS as we are going to be building a node.js for this project and we're going to build a multi- turn conversation chat so if you click on here here is build multi-turn conversation chat we're going to use the Gemini pro model for this allow us to do so and essentially we're going to be taking this code from here so if you get stuck please refer to the documentation for now however we also need to get our API key so let's go ahead and do it you scroll down here and click on get an API key just click on here and it should get a key for you so that you can communicate with the API however make sure to keep this safe you don't want someone seeing in your key and racking up loads and loads on your credit card if you choose to attach a credit card to this eventually so let's go ahead and do this I'm going to head over to Google AI Studio get API key in Google AI studio and you should be able to get the API key now if you can't it could be because it is not available in your region so just keep that in mind great okay let's go back to our app so once this is done you will see all the node modules that you need as well as a source directory of all the files that have been added as well as a package Json along with all the dependencies that we will be using so far so these are the latest dependencies and the versions of them that we are using for this project please make sure to always keep the dependencies the same version okay just just in case you're doing this in the future and you know something's changed and you want to still build this app just revert back to these versions that you see here as well as the versions that we will be installing so first off however I'm just going to clean this up a little bit so on the index GS file I'm just going to delete the report web vitals from here as we will not be doing that we also won't be doing any testing and I'm going to get rid of the semicolon just because that is my personal preference so that is all that should be in the index JS file just save that like I said I'm just going to delete these three files right here so the logo the report where vitals and the setup tests so just do the same delete anyway now in the index CSS we're going to start from scratch I'm going to delete everything from this file the app test JS is also going to be deleted as I don't want to do any test so no test for you today let's also get rid of the app CSS files this is a small app so I'm just going to keep all the styling in the index CSS file and now the appjs file once again I'm just going to essentially delete all of this from it and let's delete all of that so we can start fresh so that should be in here I'm going to make this a functional expression as well just because that is my preference okay great so all you should have in the source directory is this appjs file that looks like this the index CSS file that is empty and the index JS file should look like this wonderful let's move on now let's go ahead and store our secret somewhere so I'm going to create a new file it's a EnV file and we're going to add our API key in here so our Google generative AI key so let's go ahead and call this Google gen AI key you can call it whatever you wish and I'm just going to paste in my unique key like so great and that's it so now we are ready to continue we essentially can start building I'm just going to build out a simple front and forther so we can get started with the meteor stuff soon so let's go ahead and do it let's go ahead and create a simple chat so in here what I'm going to do is let's create a wrapping div let's give it the class name app let's also have a section in here this is going to be the search section so I'm going to give it the class name of you guessed it search section just going to minimize that for now and I'm just going to have a paragraph element what do you want to no okay and then let's have a button that says surprise me in case in case we you know want to be surprised with something so surprise me just like that uh let's maybe also give this a class name I'm going to give the class name of [Music] surprise and in fact what I am going to do is actually put this in the paragraph element you will see why so in fact maybe let's run this I'm going to get up my terminal and I'm just going to do npm Run start and in facts because we're going to have a front end a b a backend I'm going to get that script I'm just going to Define it as the front end script and we're also going to have a backend script okay so backend and this is going to be no Deon so that's a package that we're going to have to install to listen up for constant changes on the server JS file which we are yet to write that's going to hold that whole backend so maybe let's go ahead and create that file new file it's a JavaScript script file I'm going to call it server JS okay cool and let's continue so before we forget let's actually install that package so maybe let's go ahead and do that now npmi noemon and that will essentially install it so it will just add to these dependencies right here noemon has just been added along with its version so okay let's start our front end I'm going to do npm Run start front end again making sure you're just in that app and TDA it's spun up our front end along with the elements that we've essentially added I'm just going to inspect this so we can work with it a little bit better great this is looking good let's move on so let's just minimize that for now and let's continue adding elements so we've got that P element next I'm going to have a div and this is actually going to be a container so I'm going to to wrap let's call this the input container as this container is going to wrap an input element so here is my input element and as all input it's going to have a value at the moment I'm just going to leave it like so let's also have a placeholder for it uh maybe let's have something like when is Christmas okay very simple question um we'll have an onchange which will essentially change the value for us and save it in the state of this app but for now I'm just going to keep it empty of course we haven't written that function yet cool I'm also going to do something and I'm going to have a button here it's going to say ask me and then another button so we're going to have two buttons but we're going to show them conditionally so ask me or clear so at the moment you can see see both buttons but I want to be able to only show the ask me button if there's no error then show this button so if this is true show this element however if there is an error then we show this button which means we need to save that error and I'm going to save it to state so we might as well just go ahead and import use state from react we're not going to be using use effect so let's get rid of that and now I can set the error so that is the Syntax for saving state to the app okay at the moment there is no error or we can actually just keep this as null for now or in fact this is going to be a string so I'm going to just save it as that at the moment this has been assigned to the value of error and if we want to change it we use set error so if there is an error at the moment there isn't we should see this because there is no error right so let's have a look and the ask me button is showing however if I change this to something when is wrong and save it then it will say clear because an error does exist okay so hopefully that makes sense so we have those two buttons and now outside of this div let's also show the error if one exists so if an error does exist I'm going to show this P element that shows the error otherwise if it doesn't exist this won't show at all cool now we're also going to have a div and this is actually going to show the search results so you know whatever comes back from the API but of course it's going to be multiple it's going to be a history so there going to be multiple chance so class name search result I will call it and here we're going to essentially map items onto something it's going to be a div and this div is going to hold a p element that is just going to be the answer so let's go ahead and give this the class name of answer okay and this div will have a key because when you map onto things you need a key so I'm just going to leave that blank for now great and that really is it okay I hopefully was painless of course it doesn't look very nice for now the magic of styling will literally transform this so let's go ahead and do it I'm just going to go ahead and get my index CS file so let's get into the source let's get an index CSS file and now all I'm going to do it's going to say that all the fonts so font family is going to be sand serif no backup okay s serif being really basic here really kind of streamlining this project margin zero padding is going to be zero let's make the whole width of this 100 of the viewport width the height of this 100 of the viewport height and then the background color is just going to be like this off white that I picked out earlier and then the text color again it's not going to be black it's going to be a gray so that's the short hand for writing seven s s s six sevens display Flex we're going to initial Flex box just so we can make sure that everything is in the center from like to left great all P elements in here are again I'm just going to change the font weight to be 200 and I'm going to change the font size as well so I want the font size of all the elements the P elements to be exactly 14 pixels now the app itself so the element with the class name of app so this one right here I'm going to go ahead and make sure that it's width is smaller okay 80 viewport width uh and I'm actually going to give it a margin of 10 viewport width again to make up to that 100 and the height is going to be 80 viewport height okay great and that's going to contain everything in it um I think what shall we do let's have the search section so that is the first element in there I'm just going to make sure that it's 100% of the element with the class name of app the height of it is again going to be 100% uh let's use this place flex and Direction column to make sure everything goes from top to bottom and that's really it okay so that section essentially is the same as the app so perhaps we can even go ahead and just give this the class name of app and just make this a div so I'm just going to delete that for now okay we're really streamlining things here so there we go and this just means that I can let's go ahead and add this like that and get rid of the search section completely great now let's go ahead and get the search results so the search results is here it lives inside the app let's maybe format this a little bit better so I'm just going to use webstorm to code format code and that is much better so the search result singular make sure that is singular I'm going to do margin top to space it out from the element above 10 pixels and I'm going to do overflow scroll so we can scroll through all the results and we don't have to scroll the actual page okay great now let's pick out the little things so I'm going to pick out this button by the class name of surprise so do surprise let's give it a background color I'm going to go ahead and use another color that I have pre-picked out EC EC F1 I'm also going to change the color of the text to be black and then let's add a border radius of five pixels to round it off this should be that and let's also add a font weight to this text uh let's go ahead with 600 and the padding four pixels on the top and bottom and 12 pixels on the left and right the margin of this again this I'm going zero at the top zero on the right two pixels on the bottom and five pixels on the left and the border of this is going to be none okay so if you're interested in how this is looking so far here we go this is looking good let's carry on so now I'm going to style the input container so I'm going to find the element with a class name of iton container the width of this is going to be 100% uh and now I'm going to add a border to this it's going to be a solid border 0.5 pixels in width and again ca ca ca is the color I have picked out for it the Box sizing of this is going to be border box so that the border is actually on the inside and let's round it off so border radius maybe let's make it six pixel this time and the Box Shadow I'm going to give it is going to be rgba for transparent see 0 0 82 with 0.15 opacity okay and once again we're going to a blur a spread and great now inside the input container I want to grab the input that lives in it uh I'm just going to get the rid of the border the padding for this let's go ahead with 13 pixels on the top and bottom and 14 pixels on the left and right once again box side sizing I'm going to go with border box the font size I'm going to go with 15 pixels outline none this will just get rid of the blue outline when you interact with the input and the width of this is going to be 90% of the parent with a font weight of this being 200 okay so now the input looks like this I'm going to use display Flex on this input container so that each item is kind of next to each other the rather than stacked and there we go let's do the button next so in fact maybe let's also work on the placeholder text so I can do this by grabbing the input that lives inside the input holder and then if I want to get the placeholder text I can change it like so uh yeah let's go with this color and let's just make this a little bit like that so there we go much better in my opinion okay now let's do the button that lives inside the input container so any button that is inside the input container is going to have this styling I'm going to give it a minwidth of 10% uh border of course it's going to be none and let's also just add a border on the left side okay to differentiate from the input let's give it one pixel solid and Y I'm happy with that gray let's also make sure the background color is white and the text color is going to be this one that I used before the font weight I'm going to go with bold and cursor I'm going to add a cursor that is a pointer just for fun okay just make sure that that is like that and let's see what it looks like so I love this so much let's move on I think maybe let's add overflow hidden to the input so once again let's go maybe to the input container this time I'm just going to go with overflow hidden just so that this is a bit more rounded off at the edges wonderful okay that's nearly finished so I'm also going to add some styling to any button that lives inside the input container and if it's active so this is how you grab an active button that lives inside the input container make sure that space is there I'm going to just change the background color to be ca ca ca so kind of grade out when it's active and finally let's also style anything with the class of answer and for us that is these P elements so I'm just going to go ahead and add a padding to each one of 13 pixels at the top and bottom 14 pixels on the left and right let's also add a border of solid 0.5 pixels uh ca ca see it okay so kind of similar styling repeating I'm also going to give them a background color let's make it white so # FFF a margin of five pixels a font size of 15 pixels a font weight of 200 and a border radius of six so wonderful I'm really happy with how this is looking so far okay let's work on linking up the surprise me button first so let's get rid of this for now and up here I essentially want to get a random value to work with so we've saved errors another thing I want to save is the value and the value is simply going to be the text that we are writing in here but we also want to generate some randomly so this is super simple to do all I'm going to do is Define our surprise options like so and it is going to be an array so that is good for us to use and I'm just going to put in some random options so who won the latest [Music] Noel piece prize can be one question we can also have where does pizza come from let's that's a great question uh and how do you make a BLT sandwich I'm clearly very hungry CU these are all very food focused pretty much apart from the first one so once we have our surprise options I'm just going to write a super simple function con surprise and all it's going to do is get a random value from this array so in order to get a random value yes Thank You tab 9 we get the surprise options we open up the array we then get math floor which will round down to the nearest integer and we simply get the surprise options length and multiply it by math random and math random will return back a uh number from zero to just under one so if you multiply it by the length it will always be just under three and we round it down so it could be either zero one or two and if we pass through zero into the array we'll get about this if you pass through one we'll get this and if you pass through two we will get that so that is how we get a random value and then I'm going to get random value and I'm going to pass it through to set value so we're essentially at the beginning setting value to be this however we call this function we will get a random value from here and reset this value using set value to be one of these three so now where should we do this well I think if we press the surprise button right so on click of this I just want to call that function okay wonderful so maybe we should also add an option to disable this and I think this should be disabled if a chat history already exists right so maybe let's set const chat history set chat history and this will be an empty array so now if if chat history exists we want this to be disabled but for now of course it's not and the other thing we want to pass through here is the value so we can actually see it in the input so on change we also need to set value of this we're going to pass through the E Target value of whatever we type into the input itself of course we need to make this a function like so and pass through e so now this value so this value here can be changed in two ways right either if we click here on surprise me or if we start typing in here so let's try it out maybe as chat history you know is an empty array up here we should probably change it to something if no chat history exists then we can do it there we go so this is looking good we're getting a random value each time time or we can type in our own question like so and that will be saved to the value here so we can send it over to our API so let's do it so let's go ahead and write a function here I'm going to call it get response as that is essentially what we want to do we going to get a response from the API just make sure to spell response correctly uh this is going to be an async function so let's just go ahead and whack that in here first off however if no value exists and we essentially click on the ask me button right so if you click on here and no value exists we want an error to show up essentially so I'm going to set an error and it's just going to say error please ask a question okay and we can of course show that too so maybe let's go ahead and put that here we already have so that will show up if there is an error and we're just going to return out of this great now we're going to try something so try and catch we're going to use the try and catch blocks I'm going to try something and if it doesn't work we're just going to catch any error we're going to console error the error and we're also going to set the error so we're not going to use what comes back to us I'm just writing a super basic error that doesn't really give us much insight into what went wrong but if you want to take this a step further uh please do you can use this error to write some custom error messages cool so that's what we're going to do and now what are we going to send over to the back end well I think we're going to space this out a bit uh we're going to Define our options first okay and this is going to be a post method we are also going to be sending sending over the whole chat history so we're going to use Jason stringify I'm going to create an object and in that object we're going to send over all the chat history okay and we're also going to send over a message which is the latest text that we want to send through so essentially we're sending over whatever we type in here and if there is a chat history of previous questions we're going to send that over as well great let's also set our headers so we're going to choose content type Json for that that is correct and now as the response we're going to await Fetch and we can set our own end point so let's say that we want our back end to be on Port 8,000 and I'm just going to make the Endo Gemini and we're going to send through all these options with it so that is our response and of course once that comes back to us we're going to get text from it like so and save this as something we're going to await it though as it isn't asynchronous method so we need to await that and then let's save it as data and I'm just going to console lock the data for now so we can see what's coming back great so now let's actually work on our back end so in here like I said we're going to define the port I did say this would be Port 8,000 so that's all I have done we are going to have to import a few packages or dependencies to help us here so let's just go ahead and open up a new tab making sure you're still in react Gemini app and I'm going to install Express which is going to help us with routing qus which is going to help us get rid of those pest Sky Blocks by qu messages when you're sending stuff from the front end to the back end and so on we're also going to use the EnV package to store secrets in our EnV file as you just saw and we are also going to need Google generative AI so let's go ahead and import that too so great that is the packages that we're going to need for this project so let's just wait for that to do its thing and let's continue so of course we're going to need Express require Express and we're going to wait for all of this wonderfulness from the package uh to come back and we're going to save it as Express and once we have it we're going to release it so this will essentially release methods and properties that come with Express and if we save it under a con so for example app we can now use app to get any method so for example to use method from it uh so great we're going to do that we're also going to require CES so const cores require CES again this is to get past those pesky blocked by cause messages when sending stuff from the front end to the back end and so on uh and we're also going to also pass Jason from the front end so hence we need to use express Jason here great so let's just minimize that for now we also are going to require and we did import the DMV package so that we can essentially work with Secrets like our Google API key cool the other thing we're going to do is get Google generative AI from require and then the package at Google generative AI okay so there we go we've got everything nearly set up the other thing we're actually going to do is get that API key that we stored in our back end so I'm going to use Google generative Ai and I'm just going to PA through that API key okay I'm going to pass it through here so we can just go process EnV and then and then whatever we called our API key in our EnV file which was Google gen AI key so I'm just going to past it in like so okay wonderful let's move on I'm also just going to listen out to check that everything is working as it should passing through the port as the first parameter and as the second parameter is a callback function I'm just going to do console log listening on Port and then I'll port number cool so now now if we run this so for example here in the package Json we did write our script to listen out for anything on the server JS file so now I can do npm Run start backend and it should start our backend listening on P 8,000 everything is working as it should cool so now let's write our root we wrote a post request to the endpoint G Gemini as you saw here so now what do we want to send over to this back end to this end point well it's essentially all of this right so let's actually do that and you can send stuff over and you can get it by going to wreck body and then that should bring back this whole body right here and if you want to get the history from it I can simply do do history so maybe let's actually console log this so we can see what is going on and I'm also going to console log the rec body message as that is another thing that we are sending over so let's just see this works for now I'm just going to get up here my back end so we can see what's being sent so now if I go ahead and send some text when is Christmas for example and now let's hook up the ask me button so let's actually get this whole get response function and attach it to the ask me button so on click of this we want to get a response so let's go ahead and do it ask me and let's go back in here and look in the server JS file in the terminal we get two things being conso that we get the history which yes is an empty array as we set that up here and we also get the value which is when it's Christmas so we save the value up here but then we also said the value should be the message so great we are sending stuff over we're sending over the chat history and the value because we are going into the request body history and into the request body message so request body history request body message we're sending that over now let's send it over to Google so let's go ahead and do it okay all I'm going to do is get gen AI once again this is just from the documentation that I showed you earlier we're going to do get generative model and we're going to pass through the model that we discussed so let's define the model here it is the Gemini pro model and I'm just going to save this as model so we've just defined it this should be gen AI as we defined here and now let's define the chat the chat well we're going to get the model and we're going to use the method start chat that comes with it and we're going to create an object and we're just going to pass through the history which again we already have it's this so request body history cool and now let's also Define the message so we Define our chat and now the message is just simply going to be request body message so that's a lot simpler okay so I'm just going to delete that for now as we don't really need it the next thing we need to do is actually get the result of what comes back so const result equals I'm going to await we're going to get the chat so what we defined here and we're going to send a message and we're going to send through this message to the chat as well so along with the history we're sending through the message too and now we're going to get the result and we're going to get the response from it and as this is a asynchronous function we need to await it and let's save this as the response so just like so and then when we get the response we need to get it text okay and let's save this as text so just like that okay and now I'm just going to do res send the text to send it back to our front end make sure this is send message and once we get it back here well at the moment we're just console logging it out so now all I need to do is essentially map them onto here we need to save the history so I'm going to set chat history however when working with arrays we need to essentially set the old state which I'm going to choose to call Old chat history we need to release it back into the array and then the data well I'm going to actually create create a new object that is in line with the data that already exists so the way that Google modeled it so we're going to have a user and the user essentially asked this question which is our value and then we're also going to have another object and this role is going to be the model and it's going to be what comes back to us so this is what the model said or essentially the AI said and it's going to be the data that comes back so the piece of text great and once we have done that we can set the value to be an empty string again wonderful so now that we have that chat history I'm just going to scroll down here and we're going to map it onto this so let's get the chat history and we're going to map we're going to map it onto this whole div just like so and what we're going to do is map let's open up our parentheses once more and we're going to map each chat item as well as the index I'm going to pause through the index as the key it's not really used hence I use this and now for each chart I item I'm essentially going to put it in here I'm going to get the chat item roll so it's either going to be user or model and then I'm just going to get the chat item parts and wonderful I'm really happy with this and maybe let's format this file once more the last thing I want to do is just clear the chat history the value and the error if we want to clear everything so I'm going to do so on the clear button so on click of this I want to clear right so let's define this function let's just do so here so const clear and I'm just going to set the value to be null set the error to be null and set the chat history to be an empty array again great and that's it so let's let's try it out I'm just going to type in when is Christmas and if you hit ask me it should come back with two messages that was my message so when it's Christmas and then whatever the model responded with which is December 25th now I can go ahead and ask a followup question to this conversation meaning it's taking into context the previous messages so I can simply write are you sure obviously are you sure by itself won't mean much but with the context we know we're talking about Christmas so if I type in are you sure the model will come back with yes I am sure that Christmas on December 25th okay and then you can continue with other questions so it will continue the multi-chat conversation amazing so this is working as it should I love it let me know what you think below

Channel: Code with Ania Kubów

Views: 20,745

Keywords:

Id: xv9UbWp_Frs

Length: 41min 47sec (2507 seconds)

Published: Wed Feb 28 2024