Let's Build Google Gemini 2.0 Using React JS and Gemini API | Gemini Clone In React 2024

hi guys welcome back to another video of great stack in this video we are going to learn how to build your own Google Gemini AI app in reactjs we have already built the chat GPT clone tutorial and got so much love on that tutorial but building a chat jpd clone requires the open AI API that is a paid API that's why I have come up with the new tutorial to build your own Google J app for absolutely free so let's see the overview of the Google jni project that we will create in this tutorial first we will build the UI of this web app where you can see this welcome message then some suggested questions in these cards after that here we have this chat box and here we have this sidebar this sidebar is collapsible we can click on this menu icon to expand and collapse this sidebar now if I type any question in this input box and click on the send icon so let's type what is the full form of HTML now we have received the answer from Google gini let's ask another question so I will type what is reactjs now we are getting the answer with typing effect so this is a fully functional Google jini app whenever we ask any question in this input box our questions will be added in this sidewire you can see here we have two questions what is full form of HTML and what is reactjs we can click on these questions from the sidew to see the answer again so this is fully functional Google jni app that we will create in this tutorial after watching this tutorial build your own Google jni app and share the project preview video or a screenshot on LinkedIn and tag great stack page we will review your project and share it on our LinkedIn page you can also deploy this project online and add the project live Link in your resume it will add a great value in your resume before starting this video if you are absolute beginner in reactjs then I will highly recommend you to watch my complete JavaScript course where I have explained all the advanced JavaScript Concepts that are required to learn reactjs I will provide the link in the description now let's start to create our own Google gini AI app using react so let's come back to the desktop screen and here we will open the terminal and in this terminal we will type npm create weat latest here we have to provide our project name so we will type Gemini clone and we will select the framework react then JavaScript now our project folder has been created now we will open this folder with vs code editor so close this terminal and right click over this folder and select open with code now our project is open in vs code editor so in this project we will open the integrated terminal and here we will install our dependencies so we will will type npm install then press enter so our dependencies has been installed and here we have one new folder which is node modules now we will run this project for that we will type npm run Dev now our project is running on this local server so open this local server URL in the browser so you can see our project is running successfully in our web browser now we have to clear this default react project for that we will come back to the vs code editor and we will open the SRC folder then app.jsx file we will clear this file and here we will use the snet rafc after that we will delete this app.css file we will open index. CSS file and we will clear this file after that here we will add some default CSS properties that will be applicable for all the elements for that we will add padding zero and margin zero then we will add box sizing of Border box after that we will open the index.html file so here we have one title so in this title we will add Gemini clone now we will add the CSS properties for this root ID so we will open index. CSS file here we will type has root and here we will apply the minimum height of 100 VH display will ref flex and we will save the changes so let's open our web browser again and you can see our project is clear right now and here we have the title Gemini clone after that for this project we will create the folder structure so first we will insert the Assets in this assets folder so let's come back to the desktop screen and here we have one folder with the name Assets in that we have multiple images icons and one JS files so let's copy all these files and we will add this in our project folder so open project folder SRC assets and place it here you will find the assets download link in the video description now let's come back to the vs code editor so in this asset folder you can see we have all the images files and assets. JS file in this file we have added all the Importer statement for the image and we have exported using one object with the name Assets Now we will create the folder structure for our project so in this SRC folder we will create a new folder and we will provide the name components inside this components folder we will create two components that will be sidebar component and main component so in this components folder let's create the new folder and provide the name sidebar and we will create another folder and the name is main now we will add the files in this sidebar component so create a new file in the sidebar component and the file name will be sidebar. jsx in this file we will use rafc and in this div we will add a class name property and the class name is sidebar now we will create the CSS file for this component so in this sidebar folder we will create a new file and here we will provide sidebar. CSS now we have to import this CSS file in the component file so we will type import do/ sidebar. CSS so here we have created one component next we have to mount this component in the app component so open app.jsx file and remove this div and we will convert it into fragments so in this fragment we will Mount our sidebar component so here we will type sidebar select it from this snippet so it will be imported from this components folder now close this tag now our sidebar component has been mounted in the app component now we will create the HTML structure for the sidebar component so so let's hide this terminal and within this div we'll create two div that will be top and bottom so let's type div. top then another div with the class name bottom so in this div with the class name top we will add one IMG tag in this image SRC we will use the assets. JS file where we have the assets object and in this one we have all the images so we will simply import that file that is import and here we will add Assets in the Curly bres from and here we will provide the path so it will will be double do/ do/ assets folder SL assets file after that in this SRC we will provide curly presses and here we will use the assets dot menu icon if I save the changes and open the web browser so you can see the menu icon on the web page in this image tag we will add a class name property and we will provide the class name menu after that we will create one div and we will provide a class name new chat in this div we will create one image tag and in this SRC we will add assets. plus icon after this image tag we will create one P tag and here we will type new chat save the changes and you can see here we have the plus icon and new chat on web page now after closing of this div we will create a new div with the class name recent and in this tip we will add one P tag and we will provide the class name recent title within this P tag we will type recent after that we will create one div with the class name recent entry and in this div we will create one image tag and in this one we will use assets do message icon and after this image tag we will add one P tag and here we will type what is react and triple dot we will save the changes and open the web browser so here we have one chat icon and this text what is react now the top part of the sidebar is ready now we will add the HTML component in the bottom part so in this div with the class name bottom we will create a div with the class name bottom item and in this D we will create one image tag and in the SRC we will add assets do question icon and after this image tag we will add one P tag and in this one we will add help after that in this tip we will add the similar class name that we have already used recent entry so let's copy and paste it here now let's create two other copy of this div so just copy and paste for two times in the second one we will use another icon so let's add assets. history icon in the third one we will use assets do setting icon and we will update the text in P tag so it will be activity and the last one will be settings now save the changes and we will open the web browser so you can see here we have these icons and text help activity and settings next we will add the CSS properties for this sidebar so let's come back and copy this class name sidebar and we will open sidebar. CSS file here we will add do sidebar class name first we will provide the mean height 100 VH display in line Flex Flex direction will be column justify content space between background color and here we will provide this color code then save the changes so you can see the changes in this sidebar the contents are aligned in top and bottom area now we will add the CSS properties for these icons so let's come back and here we will type do sidebar and IMG tag here we will provide the width property so we will set the width 20 pixel now save the changes and you can see all all the images are fixed with the width of 20 pixel next we will add the CSS properties for this menu class name so write this class name here before that we will add do sidebar then the class name do menu for this menu we will add display block margin left 10 pixel cursor pointer after that here in this sidebar class name we will add the padding that will be 25 pixel and 15 pixel we will save the changes and we will open the web page so here we have some padding in this sidebar and we have added display block for this menu icon after that we will add this CSS properties for this new chat class name so we will copy this class name and here we will add do sidebar do new chat here we will provide the margin top 10 pixel display in line Flex align items Center gap of 10 pixel then we will provide padding of 10 pixel and 15 pixel then we will provide the background color and one color code next we will add the Border radius of 50 pixel and font size 14 pixel colored will be Gray cursor pointer so we have added this CSS properties for this class name new chat and we will open the web page so you can see this new chat button is looking good after that we will add the CSS properties for this recent class name so we will add doar do recent here we will provide display Flex Flex Direction column then save the changes after that we will add the CSS properties for this recent title class name so let's copy this class name and here we will add Side word. recent title here we will provide margin top of 30 pixel margin bottom 20 pixel we will save the changes so here we have some space around this text after that we will add the CSS properties for this recent entry class name so we will copy this class name and we will add do sidebar. recent entry and here we will provide display Flex align items start gap of 10 pixel padding 10 pixel padding from the right side 40 pixel border radius and we will set the Border radius 50 pixel then we will add the color property and we will use one color code then we will add cursor pointer we will save the changes and here we have the entry in the left side we have the message icon and here we have this text after that we will add one hover effect so let's duplicate this and remove these CSS properties here we will add colon hover and in this one we will provide the background color and we will change the background color code then we will save the changes so if I move cursor over this text we will get the background color now we will add the CSS properties for this bottom class name so here we will add do Side Bar dot bottom and here we will provide display Flex Flex Direction column we will save the changes so these icons and text are looking good here we have used the same class name recent entry and we have already provided the hover effect in this recent entry that's why you can see the hover effect on these links after that we will add the CSS properties for this bottom item class name so here we will add do sidebar do bottom item and here we will provide padding from the right side 10 pixel cursor pointer and save the changes after that we will come here in this new chat class name and we will increase the margin top it will be 50 pixel now our side word is ready after that we will add the functionality in this sidebar so that when we click on this menu icon it will collapse this sidebar and if I click again it will expand the sidebar for that we will open sidebar. jsx file and here let's add a space before this return statement and we will create one state variable for that we will type const and the state variable name will be extended then the seter function name will be set extended equal to user State select this user state so it will be imported automatically after that we will initialize this variable using Boolean data that will be false we will save the changes so when we will click on this button we we have to change this state and using this state we will hide these paragraph tag or display this paragraph tag for that we will come here on this paragraph tag and we will add curly Braes and here we will add extended and here we are going to use turny operator so if our extended is true in that case we will provide this paragraph tag so we will place it here after question mark and here we will add colon so if our extended is false in that case we will return null save the changes and our state is false so it should be hidden so in this new chat this paragraph tag is hidden similarly if our state is false we have to hide all the recent entries so so to hide this one we will add curly reses and we will use the turn operator and if our extended is true in that case we have to display this div so after this question mark we will place this div which is recent and after that we will add colon and if it is false we will simply return null let's click on format document it will save the changes so the reset entry is also removed after that we have to hide these paragraph tags which is help activity and settings for that here we will add one curly bres and we will type extended and if the extended is true we will provide this P tag and if it is false we will simply return null similarly here also we will use the same thing so we will type extended question mark and this paragraph tag and after that we will add column null in this P tag also we will use the terity operator we will add extended question mark then return the P tag then we will add colum null save the changes so now this sidebar is collapsed we don't have any text now we will add the logic so that when we click on this button our state value will become false to true or true to false so let's come back and here we have the IMG tag in this one we will add on click property and we will pass one Arrow function and here we will call the set extended function here we will get the previous value and we will return the not previous so if the previous is true it will return false and the value will be added in extended variable we will save the changes and if I click on this icon it is displaying the P tag and if I click again it will hide these P tag so the sideb will be collapsed now we will add some custom font on our project we will open Google and search for outfit font we will open this website fonts. goole.com we will click on this button get font then click on get Ed code then click on import and from here we will copy this line after that close this tab and we will open the vs code editor and now we will open index. CSS file so in the first line we will paste this code and we will add semicolon after adding this we will add font family after this box sizing so we will add font family and we will provide outfit we will save the changes and we will open the web browser so now the font is looking good so this sidebar is looking very nice and we can expand and collapse the sidebar now we will create our main component so we will open the main folder and here we will create a new file and we will provide the file name main. jsx after that we will create one CSS file so here we will create a new file with the name main. CSS in this main. jsx file we will use RFC and then we will import the CSS file so we will add import do/ m do CSS so our CSS file has been imported after that we will Mount this component in our app component so we will open app.jsx file and after this sidebar we will provide opening Arrow Main and select this main from this snippet and after that we will close this tag our main component has been mounted on our app component so in the index.css file we have provided display Flex so if I type anything in this component in main component so that will be visible side by side so you can see after that we will start creating the main component UI so first we will add the class name that will be Main and inside this div we will create one div with the class name nav inside this div we will create one B tag where we will add Chim I and after this P tag we will create one IMG tag in this image SRC we will use assets. user icon we will save the changes so here we have one text and one image after that we will add the CSS properties for this NAB so first let's copy this class name main we will paste it here in this main. CSS file here we will provide Flex 1 mean height 100 VH padding bottom 15 VH and we will set the position relative save the changes and we will add the CSS properties for this nav class name so here we will add main nav for this NAB will provide display Flex align items Center justify content space between font size of 22 pixel padding of 20 pixel and after that we will use this color code we will save the changes so in the left side we have this P tag and in the right side we have one image after that we will add the CSS properties for this image tag so we will type main. naav IMG tag and here we will provide the width 40 pixel border radius 50% we will save the changes now our Navar of our main component is ready after that we will open main. jsx file and after this div we will create one div with the class name name main container in this div we will create another div with the class name GRE and here we will add one P tag and in this P tag we will add one span tag and here we will add the text hello and we will provide any name like Dave after that we will create create one more P tag and here we will add how can I help you today after this div we will create another div with the class name cards so we will type div. cards and in this cards div we will create another div with the card so the class name is card in this card div we will add the P tag and here we will add any text and after that we will add one IMG tag and we will provide the assets dot Compass icon now we will duplicate this card div and we will paste it three times so we have total four cards now we will update the text so remove this text and we will add a new text similarly we will replace the third text now we will replace the text in fourth card so we have added this text now we will update the images also so so in the second one we will use assets. bulb icon then we will use assets do message icon and in the last one we will add assets dot code icon we will save the changes and we will open the web page so here we have the text hello Dave how can I help you today and here we have four cards now we will add the CSS properties for this main container class name so we will copy this class name and we will open main. CSS file and here we will paste that class name with a DOT here we will provide the maximum width of 900 pixel and margin Auto we will save the changes so this contact will be aligned in the center and we will get the equal space in the left and right side after that we will add the CSS properties for this greed class name so let's copy this one and we will add main. GRE and we will provide margin 50 pixel and 0 pixel then we will provide the fonts size of 56 pixel color and we will use this color code then we will use the font weight that will be 500 we will provide the padding 20 pixel we will save the changes and open the web page so you can see the changes in this greting text after that we will add the properties for this span tag so here we will type do main dot greet and span tag for this span tag we will add the background and in the background we will use web kit linear gradient and we will add the rotation of 16° then we will provide the color codes so let's add add the first color code then we will add the second color code after that we will add web kit background clip and we will set it as text then we will add the web kit text fil color and we will make it transparent save the change es and we will open the web browser so this text wrapped in a span tag is looking great with this gradient color after that we will add the CSS properties for these card section so let's copy this class name cards and here we will type main. cards and here we will provide display grid grid template columns and here we will use repeat property in this one we will provide autofill minmax and here we will provide 180 pixel and one fraction then we will provide the gap of 15 pixel and after that we will add the padding of 20 pixel we will save the change es so our all cards are aligned horizontally next we will add the CSS properties for this class name which is card let's copy this one place it here we will add main do card let's add height of 200 pixel then we will add the padding of 15 pixel background color will be this color code after that we will add the Border radius that will be 10 pixel then we will add the position relative and we will set the cursor pointer save the changes so you can see these cards are looking good next we will add the CSS properties for this image tag to place it in the right bottom so we will add main do card and IMG tag for this image we will provide the width 35 pixel padding of 5 pixel position absolute background color will be white border radius 20 pixel bottom 10 pixel and right 10 pixel now save the changes so our image tag is placed in the right bottom of each card that is looking very nice next we will add the CSS properties for this paragraph tag so here we will add main Dot card then P tag and here we will use this color code then we will provide the font size of 17 pixel and we will save the changes now our card is ready next we will add the hover effect on these card so let's add main do card colon hover here we will provide the background color and we will add add one different color code save the changes so if I move cursor over this card the background color is changing that looks nice after that let's come back to the vs code editor and we will open main. jsx file so after closing of this cards div here we will create a new div with the class name name main bottom so let's add div. main bottom and here we will create another div with the class name search box inside this div we will add input field type will be text and we will add the placeholder property in this placeholder we will type enter uh promp here after this input field we will add a div and in this div we will add three image tag so we will add IMG multiplied by three and IMG into three so in these SRC we will provide assets dot gallery icon in the second one we will provide assets do mic icon and in the third one we will add send icon after closing of this div we will create one P tag and we will provide a class name bottom info and in this P tag we will paste one text now we will save the changes and we will open the web page so here at the bottom you can see we have a very big image input box and text we will add the CSS properties so let's come back and copy this class name main bottom we will provide the CSS for this main bottom so let's open this main. CSS file and paste that class name here we will set the position absolute then we will provide the bottom zero width 100% maximum width we will provide 900 pixel then we will provide the padding of 0 pixel and 20 pixel after that we will add the margin Auto now we will add the CSS properties for this search box class name so we will copy this one and place it here here we will provide display Flex align items Center justify content space between gap of 20 pixel then we will add the background color and one color code then we will provide the padding of 10 pixel and 20 pixel then we will add the Border radius that will be 50 pixel we will save the changes so this is how it is looking right now now we will add the CSS properties for these image tag so we will add dot searchbox IMG tag and we will provide width of 24 pixel cursor pointer save the changes now this search box is looking better next we will add the C properties for this input field so here we will add dot searchbox input field here we will provide Flex one background transparent border none outline none pading 8 pixel font size of 18 pixel we will save the changes now our input field is looking good after that we will add the CSS properties for this div that is available in this search box so here we will type dot searchbox div tag for this one we will provide display Flex align item Center gap of 15 pixels we will save the changes now you can see we have the gap of 15 pixel between these icons after that we will add the CSS properties for the text that is below this input box so let's copy this class name bottom info and here we will type dot main do bottom info here we will provide fonts size that will be 13 pixel margin 15 pixel and auto text align Center font weight of 300 we will save the changes so the text in the bottom is also looking good now we have created the UI for the main component if I click on this menu icon the width of this main component will be increased because we have used Flex one so now we have completed the UI part of our project now we will integrate the Gemini API with our project for that we will open new tab and here we will search for Gemini API then open this link then we will click on this button get API key then click on get API key and and we will select this checkbox then click on continue button now we will click on this button create API key here we have to select one project we will select this project then click on create API key in existing project now our API key has been created let's copy this one and we will open the vs code editor and in this SRC folder we will create a new folder with the name config and in this config folder we will create a new file that will be jini do JS here we will create one variable so let's type const API key and here we will paste the API key in a string now close this one and we will click on this Google AI studio and here we have the option get code let's click here then we will select Java Script then we will click on this copy link so we have copied this code after this line just paste the code that we have copied and we will cut this API key and we will provide it here in this your API key paste it now remove this variable after that we will open the integrated terminal in our root folder open in integrated terminal so we are in our directory Gemini clone here we will type npm install Google generative AI let's copy and paste it here then press enter so it will install this package in our project folder so the package has been installed now we can delete the instance of this terminal now we have one terminal where our project is running let's hide this terminal then save this file and here we have all the Logics available using that we can provide the prompt and get the response here we have your user input and here we have response and here we are adding console.log and response text after that we will modify this function in this run chat function we will add one parameter that will be prompt and instead of this user input we will add our parameter prompt so when we will provide this prompt in this function and we will get the response in console to run this function in our project we will type export and default and remove this parenthesis so we have exported this function now we can use this function in our project to use this function in our project we will create one context we will store all the Logics so in this SRC folder we will create one folder with the name context and in this context folder we will create one jsx file so the file name will be context do jsx now we will set up the context API for that we will use the create context hook so we will type const context equal to create context after that we will export this variable so we have added export con context equal to create context now we will create the context provider function so we will type const context provider equal to and in this parameter we will pass the props then we will create it as one Arrow function and here we will create one variable and the name will be context value equal to and this will be one object inside this object if I place any variable or function that we can use in anywhere in our project component so so after this we will add return statement we will add this parenthesis and in this one we will add context do provider and within this tag we will type curly bres props dot children in this context provider tag we will add the value property and in this value property we will provide context value after that we will add export default statement and here we will will export context provider function then we will save the changes to access this context in our project we will open main. jsx file and remove this react. restrict mode here we will add context provider tag here also we will update context provider so we have wrapped the app component using this context provider now we have the support of context API in our project now we will open context. jsx file here we will create one function and the function name will be onent so we will type const onent equal to and it will be one ASN chronus Arrow function so we will type async then here we will add the parameter prompt and after that in this function we will call our function which is run chat that we will get from Gemini do JS file so we will type run chat after selecting it this function has been imported from the gem. JS file then we will provide the prompt so in this function we will type prompt because it is one as sync function so we will type await after that here we will call this function which is on sent so we will type on sent and here we will provide one prompt so let's pass one string where we will type what is reactjs then we will save the changes and we will open our web browser and if I open the console Tab and reload the web page so here we are getting the message required is not defined so we will open Gemini do js5 and a sheet of this required we will type from and remove this bracket and instead of const we will type import now this will be imported from this package save the changes and open the web page and reload the web page and after after a few seconds in the console you will see the response from Gemini here we have what is reactjs and we are getting this response from Gemini do JS file here we have this function run chat and here we have provided what is reactjs so here we have received the complete response about what is reactjs now we will add the logic using that we will get the input from the user and we will generate this text and display to the front user so let's come back to the vs code editor and remove this on sent and here we will create some State variables using that we will get the input from the user and after generating the response we will display it in this component so for that we will type const and here we will type one state variable name that is input and the setter function name will be set input is equal to user State and we will initialize it with empty string after that we will create one more State variable and the name will be recent prompt so we will type const recent prompt then the set up function name will be set recent prompt equal to user State and we will initialize it with empty string after that we will create one more State variable and the name will be previous PR prompt so we will type const previous prompt Setter function name will be set previous prompts equal to user State and we will initialize it with empty aray after that we will create one more State variable and the name will be show result so we will add cost show result and the seter function name will be set so result equal to user State and we will initialize it with Boolean data that will be false after that we will create one more State variable and the name will be loading and the setter function name will be set loading equal to user State and we will initialize it with the woan data false after that we will create another state variable and the name will be result data so we will type const result data and the setter function name set result data is equal to user State and initialize it with empty string so here we have created Total six State variable first one is input that we will use to save the input data then we have the recent prompt so when we will click on this send button this input field data will be saved in this recent prompt and we will display it in our main component then we have the previous prompts we have declared it as an array and we will use it to store all the input history and display it in this recent tab after that we have created the S result that is a Boolean type false or true once it is true it will hide the GD text and this boxes it will hide this and here it will display the result after that we have created this loading state if this is true it will display one loading animation and after getting the data we will make it false so that we can display our data and at the end we have result data state that we will use to display our result on our web page so first we will pass these State variables and seter functions in the context value so that we can access these State variable and functions in main component and sidebar component so in this context value first we will pass previous prompts then we will pass set previous prompts then we will pass onent function then we will pass set recent prompt then we will add recent prompt then so result after that loading then result data after that input a state then set input and after that new check function so in this context value we have provided the state and uh seter function that we can access in main component and sidebar component after that we will open main. jsx file and here we will get the states and functions using the context API so we will add const curly Braes first we will get the onent function after that we will add descent prompt after that we will get the so result then we will get loading State then we will get the result data State then we will get the set input State then we will get the input State equal to and here we will use use context hook and in this one we will provide our context so we will select this cont context so this context has been imported from the context folder and context. JS file so in this component we have the functions and state using that we will display the result on our main component so first in this input field we will add on change property and in this one we will pass one Arrow function here we will pass the event and in this Arrow function we will call set input function and here we will provide e do Target dot value then we will add the value property and we will provide the input state so this input field will be converted in controlled input field so that when we add any changes in this input field like what is react so at every changes our input state will be updated after that we will open context. jsx file and after clicking on the onent we will get the prompt using our parameter so in in this run chat we will remove this prompt and here we will provide this input so if I type input and save the changes we will come back to main. jsx file and in this third image tag where we have used this send icon here we will add onclick property and in this on click property we will pass one Arrow function and here we will call onent function we will save the changes and if I type something in this input field like what is full form of jsx and click on this Arrow icon this function will be executed and we will get the response in console jsx stands for JavaScript XML so our onent function is properly working Let's test it again and we will type what is full form of HTML and click on this addo icon and here we have another response hyper text markup language so this generative AI is working fine and it is generating the response now we have to display this response on our web page so let's come back to the vs code editor and we will open context. jsx file now we will properly create this onent function so first in this onent function we will reset our result data state so we will add set result data and we will reset it using the empty string so when we will run this function our result data will be reset so that our previous response will be removed from our state variable after that we will add set loading so that we can display some loading animation on our screen we will make it true then we will add set so result true after making it true we are getting the data using the Run chat and displaying in console so we have to display that data so we will store that data in VAR aable so we will open Gemini do jsx file here we have const response is equal to result. response and we are doing console log after that we will return response dot text so this function will return the response text then save these changes and open context. jsx file and here we will type con response is equal to await and run chat function we have provided the input now our response will be stored in this response variable after getting the response here we will add set result data and in this one we will store this response so just add respon response so after storing this response we will add set loading false so that it will hide the loading animation after that we will reset the input field so we will add the set input and we will provide empty string so the input field will be we reset after that we will save the changes and we will open the web browser if I type what is database and click on this Arrow icon so our response has been generated in the console now let's come back to the vs code editor and here we will open main. jsx file after that here we will add the Turner operator so let's add curly braces and and here we will use State variable so result so if the S result is not true in that case we will add question mark and in that case we will return one fragment and in this fragment we will place this GRE and this card div so let's select everything and we will remove and paste it it inside this fragment so if the S result is not true it will return this and if the S result is true in that case here we will add colum and here we will return one div and in this div we will add the class name property that will be result we will save the changes right now our screen is clear and here we have generated the data in console and our state has been updated so when the data will be generated before that set so result will be true so that this greet and cards div will be hidden and it will display this another div with the class name result so if I reload the web page here we have this greed text and these cards and here if I add any text like what is react 19 and click on this button so this screen will be cleared and after generating this data we have to display it on this screen so our data has been generated in the console in this div we will create one div and we will provide one class name result title in this D we will create one image tag and in this SRC we will use assets dot user icon and after this image tag we will create one paragraph tag and in the speed tag we will display recent prompt state so we will open context. jsx file and here we have set so result true after that we will add set reset prompt and here we will provide the input field value after that we will open main. jsx file so we are in the main. jsx file and after this result title div we will create another div and the class name will be result data so we will type result data and in this one we will create one image tag and in this SRC we will provide assets dot Gemini icon and after that we will will add one P tag and in this P tag we will add dangerously set inner HTML and here we will add one object where we will Define HTML property and we will provide result data if I provide this result data State directly inside this curly Braes in that case it will display all the tags that are available in that text so if I want to hide those tags and display that tag as a HTML tag for that we will use this property where we have defined HTML result data remove this one save the changes and we will open the web page and here if I Ty type what is react native and click on this Arrow icon so here our state has been updated and it is displaying user icon what is react native then we have this gini icon and after generating the response it is displaying this response next we will add the CSS properties to design this one so let's come back and we will copy this class name result and we will open main. CSS file here we will add dot result here we will provide the padding 0 pixel and 5% then we will Define the maximum height that will be 70 VH after that we will add overflow y scroll then we will save the changes so now it is a scroll level div now we have to hide this scroll bar so let's add dot result double column Das web kit scroll bar and here we will provide display none save the changes so that vertical scroll bar is hidden and we can scroll this EAS easily next we will add the CSS properties for this result title so let's copy this class name and here we will add do result title for this class name we will provide the margin of 40 pixel and Z pixel then we will provide display Flex align items Center and we will provide the gap of 20 pixel we will save the changes so now the image and the question are aligned side by side now we will add the CSS properties for this image so we will type do result and IMG tag we will provide width 40 pixel border radius 50% we will save the changes so now these icons are looking good we have updated the width now we will add the CSS properties for this class name which is result data so let's copy this one and paste it here here we will provide display Flex align items start then gap of 20 pixel we will save the changes now this icon and the response text are aligned side by side now when the response is not available till that time we will display one loader to create the loading animation we will open main. jsx file and in this result data after this IMG tag we will use the turn operator so we will add curly bres and here we will add loading state so if the loading state is true in that case we will return one div so we will create one div tag and we will provide the class name loader so if the loading is false in that case we will return this paragraph tag where it is displaying the result data let's understand it again if the loading is true it means our response is not generated yet in that case we will display this div with the class name loader where we will create the loading animation and if the loading is false in that case it has generated the response so then we will display this P tag where we are displaying the result data so in this loader div we will add three HR tag so let's add HR into three so three HR tags has been created now we'll add the CSS properties for this loader class name so open main. CSS file paste this class name here loader here we will Define the width that will be 100% then we will add display Flex Flex Direction column and here we will provide Gap of 10 pixel we will save the changes then we will open main. jsx file and we will provide the CSS properties for this HR so here let's add do loader and HR tag here we will provide border radius four pixels border none background color and here we will use this color code then we will add background property so in this background we will add linear gradient and here we will add to WR then we will add the three color codes so we have added the linear gradient to WR and three color codes in the background then we will add the background side and we will set it with 800 pixel and 50 pixel then we will add the height of 20 pixel we will save the changes after that we will open the web page and if I add any text in this input field like what is full form of SQL and click on this send icon so here it is displaying the loader so when the data will be generated it will hide this loader and it will display our data so here the data has been generated and it is displaying on the web page so the loader is hidden now we will add the animations for our loader so let's come back and we will Define the key frames so let's add key frames and we will add the name loader in this key frame we will add 0% and here we will provide background position minus 800 pixel then we will add 100% And at the 100% we will provide background position 800 pixel and 0 pixel here also we will provide zero so we have created the key frames after that in this HR tag we will add animation and provide the name of the key frame that is loader then we will provide the duration 3 seconds we will set it infinite and linear we will save the changes and open the web page and here if I type any text what is reactjs and click on this Arrow icon so you can see the loader is animated and it is looking good and after generating the response it will display the text on the web page now we will add the CSS properties for this P tag so let's add Dot result data then B tag here we will add the font size of 17 pixel font weight 300 line height 1.8 save the changes so now this response text is looking good we can easily scroll this layout next we will add the logic using that this this text will be displayed with typing effect for that let's come back to the vs code editor and we will open context. jsx file and here we will create one function and the function name will be DeLay paa So let's add const delay paa and it will one Arrow function so create this Arrow function and in this parameter we will get the index number then we will take next word so if I add any question in this input field like what is react native and click on this button so we are getting this data in form of text and here we have these Stars so next we will add the logic using that we will remove this star and we will place it inside a bold tag so we will open vs code editor and after generating this response we will create one variable with the name response aray and this this aray we will store our response using the split method and we will split the text so we will add response. split and we will split it with the double start after that we will create one more variable and the name will be new areay after that we will add for Loop and we will add l I is equal to 0 this Loop will execute till response AR a length so we will add response AR a DOT length after that we will add i++ so it will increment the I value by one in this for Loop we will iterate each word that will be separated with this double star and around that we will add the Bold tag so we will add if and in this if statement first we will check if our I is even number or zero so if I is equal to0 we are adding the comparison and we will add r i and this operator 2 is not equal to 1 so if I divide the index by two and the demander is not equal to 1 it means that number is even number so whenever the index is even number or zero in that case we will add a new aray and in this new aray we will concatenate this word so let's add response aray and we will provide index I then we will add the Elsa statement and in this Elsa statement we will add new areay and first we will concat one bold tag so let's add B tag then we will add response array and index number then we will concat closing bold tag so we have added the logic using that wherever we will get the double star that text will be added in bold tag after that instead of this response we will provide new aray so it will be a string in that case we will rename with another name so let's add new response here also we will update new response and in the Elsa statement also new response after that insert result data we will provide new response and save the changes now if I open the browser and reload the web page and here we will ask one question so what is reactjs and click on this Arrow icon so it is displaying the loading animation so here our data has been generated and wherever we got the double star there it is displaying this bold text after that here we are getting the single star using that we will create the new line so we will open the vs code editor and after this for Loop we will add let new response to equal to and we will use new response do a split method and here we will split it with the single star and here only we will add the join method and in this join method we will add one BL tag and in this set result data we will provide new response tool so what we are doing wherever we will get star we will replace that with this BR tag using that we can add a new line so save the changes here we are getting one error so let's remove this BR by mistake I have added this so save the Chang is now let's come back to the web page and here we will type what is reactjs and click on this Arrow icon so it is generating the response now the response has been generated and here it is displaying the response text and wherever we have received the single star here we have added the BR tag using that that line will be shifted in the new line so now response is looking good after that we will add the typing effect for our response using that this data will be displayed with the typing effect for that we will open the context. jsx file and in this delay P we will add set timeout function and in this one we will pass one function remove this parameter and after this function we will add delay duration into index so we have provided delay duration into index and here we will use the set result data and we will take the previous result and in this one we will concat the next word so we will add previous plus next word so this para function has been created and we will link this function with our onent function so here we are calling directly set result data so remove this one and here we will create one variable and the name will be new response array and in this add we will store new response to and on this one we will add dot split method so wherever we'll get the space it means there is another word so using that we will create one array after that we will create one for Loop and we will add let I equal to 0 I is less than new response array do length and I ++ in this for Loop we will add words one by one in this delay para function we will pass the parameter index number and next word so first we will get the next word so let's add const next word is equal to new response aray and here we will provide the index number after that we will call the delay parameter function and here we will provide the index I and next word so we have used this space to split the string so in our response we will not get the space to solve this one here we will add concat and one space character and save the changes now if I open the browser and we will type what is react native and click on this Aro icon so it is generating the response and after that you can see it is displaying the response with the typing effect and it looks perfect now this delay par function is working after that we will add the functionality using that whatever prompt we are adding that we will save in our state variable for that before this run chat we will add set previous prompts and here we will add previous prompt and in this one we will add the input field data so let's add input after adding this whenever we will call this onent function every time in this previous prompts array our input will be stored and we will use this input in our sidebar component in the recent section after that we will add the logic using that this previous prompts will be added in the recent for that we will open the vs code editor and we will open sidebar. jsx file so here first we will get some State variable and functions using context API so we will add const curly bres on send function then we will add previous prompt State then we will get the set recent prompt equal to use context and in this one we will provide the context so select this one from the context folder so it has been imported now we got the on sent function previous prompts and set recent prompts now we will come here in this div with the class name recent and after this P tag here we will add the curly bres and we will type previous prompts and on this one we will add the map method and in this map method we will pass one add function so we have added the arrow function and on this Aro function we will pass the parameter that will be individual item and index number after that here we will add the return statement and in this return we will add the parenthesis and in this one we will move this div with the class name recent entry so we have added it in the return after that we will use this item so place it here in this P tag so remove this what is react here we will add the curly bres and we will add item that we will get using this map method we will save the changes and we will open the web page if I reload the web page and open the sidebar so this recent is empty and if I type any question in this input field like what is reactjs and if I click on this Arrow icon so here we have one entry what is reactjs similarly if I type what is database and click on this button so here it is displaying what is database so if I provide any long text like how to create a nabar in reactjs and click on this button so this full prompt will be displayed in the sidebar to solve this problem let's come back and in this item we will add dot slice property and here we will provide 0 to 18 we will save the changes now the 18 characters will be displayed in the sidebar component now we will add another question what is full form of CSS and click on this send icon so here we have another entry what is full form of CSS so whenever we are generating one data here it is displaying one text undefined to solve this one let's come back and here we have let new response so we will declare it with empty string save the changes and now if I gener generate any response so let's type one question what is full form of jsx in react and click on this Arrow icon so now here we have response and here we don't have any text like undefined now if I reload the web page and let's come back to the vs code editor here we will create the logic using that if I click on the recent entries that data will be visible again on the screen for that in this onent function using this parameter we will generate the previous prompt data so we will open sidebar. jsx component and here we will create one Arrow function that's name will be load prompt const load prompt equal to so it will be one asynchronous function so we will type asnc we will add one parameter prompt and it will be Arrow function so in this one we will call onent function and here we will pass one prompt that we are getting using this parameter so it is one asnc function so we will type await and before that we will add set reccent prompt and here we will provide this prompt we will get this prompt using this entry div now we will link this load prompt function with this div so we will type on on click we will provide one Arrow function and here we will call load prompt function and in this one we will pass this item that we will use to generate our prompt we will save the changes after that we will open context. jsx file and here we are generating the response for this input field data now we will check if we are getting any data in the parameter in that case we will generate the response using this prompt parameter and if there is no data in this prompt in that case we will generate the response using this input field data for that after this set so result true we will add one if condition we will type if if the prompt is not un defined in that case we will generate the response using this prompt so remove this line and before this if statement we will create one variable and the name will be response so we will type let response and after that in this if condition we will add response is equal to await run chat and here we will provide prompt because the prompt is not undefined so we will use this prompt and after that we will add set recent prompt and in this one we will set prompt then we will add the Elsa statement and here we will add set previous prompts in this one we will take the previous prompt and here we will add previous and input so this statement will be executed when we will execute this onent function for our input field and this if a statement will work if we will click on this recent item from the recent section that will be received in this prompt here we will write the previous Logics so let's add set recent prompt here we will provide the input similarly we will generate the response so we will add response await run chat and here we will provide input field data so we have added the logic now we will save the changes and we will open the vs code editor we will expand it and in this input field if we type what is full form of jsx then we'll click on the send icon and it will generate the data here we have the entry in the desent what is full form of jsx so we have received the response after that here we will search tell me about react insort and we'll click on the send icon so here we have the second entry tell me about react in sort so it has generated the response now if I click on the first entry what is full form of jsx let's click here so here it is displaying the question what is full form of jsx and we have the response from Google gini JavaScript XML now if I click on the second entry from this recent here we have another question tell me about react insort and it is generating the response so we have successfully created this functionality using that we can load the previous prompt data now we'll add the logic for this new chat button so that when we'll click on this button it will remove these data and it will display the previous screen that is this one for that let's come back and after this delay P we will add one Aro function so we will type const new chat equal to and it will be one Arrow function and in this one we will just add set loading false then we will add set so result false after executing this function result screen will be hidden and the GRE screen and card section will be visible now we have to add this function in this cont text value so we will add new chat and we will get this function in our sidebar. jsx file in this set recent prompt we will add comma new chat and we will link this function with this div with the class name new chat so let's add on click in this one we will pass one add function and we will call new chat we will save the changes and if I type any question what is react 19 and click on this button so it is displaying the loader and in the sidebar we have this entry in the recent section and now if I click on this new chat button so it will display the previous screen with the greeting message and these cards so now we have created all the functionality for our Google j& app now we will optimize the UI of our web page and we will make it responsive so that it will look great in the small screen devices like mobile phone for that we will open index. CSS file and here we will create one key frame and the name will be fade in so let's add key frame fade in here we will add 0% and we will add the opacity zero then we will add the 100% and we will make the opacity one after that in this root we will add animation property and here we will add fade in key frame then we will add the duration 1.5 seconds we will save the changes and open the web page you can see it will appear with fade in animation now we will add this animation in the sidebar component also so let's open sidebar. CSS file and in this recent class name we will add animation and here we will provide the key frames name fade in and we will provide the dation 1.5 seconds we will save the changes now if I type any prompt what is react native and click on this button and if I open this this text will be appeared here with fade in animation so whenever we close and open this you will see this animation after that we will make the sidebar responsive to make the sidebar responsive first we will reload the web page and here we will write click and inspect and we will select this mobile device View so this is how this website will appear in the mobile phone devices so here we will add the media query so we will type media then Max width we are writing it in sidebar. CSS file we will add the max width of 600 pixel here we will add do sidebar class name and here we will add display none so from the phone device this sideward will be hidden and now this interface is cleared in a smaller screen now we will open main. CSS file and here we will add the media query so let's add media we will provide the max width of 600 pixel and here we will add the class name do main bottom input field and here we will provide Flex none width 150 pixel after that we will add one class name main bottom then IMG tag for this image we will Define the width 20 pixel then we will add the class name do searchbox and here we will provide padding 5 pixel and 10 pixel and at the end we will add do searchbox div and here we will provide the gap of five pixels save the changes now if I scroll this web page in a smaller screen you can see this input field area is also looking good we have decreased the gap between these icons also so this gini app is looking great in a smaller screen and it will be displayed like this on larger screen device after that we will add one more small functionality so that when the input field is empty in that case this send icon will be hidden and when we type any text in this input field this send icon will be visible for that we will open main. jsx file and in this image tag where we have added on click here we will add turn operator so let's add curly bres and we will check if the input field have any content in that case we will provide this image tag so we will cut and paste it here so if there is any data it will display sa this image tag and else we will add colon and null save the changes and open the web page so here you can see there is no data in this input field and here we don't have the arrow icon and if I type something in this input field what is data and it will display the arrow icon again and if I click on this Arrow icon it will display the loaded animation and after that it will display the generated data from the Google Gemini and we have made this application fully responsive if I change the screen size you can see it looks perfect in all screen size now we have successfully created our Google gini app using reactjs and generative AI so as you have completed this tutorial till the end I want you to build it by your own and share the screenshot of this project on LinkedIn by tagging create a stack page I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this tutorial and also subscribe my channel great stack thank you so much for watching this tutorial

Channel: GreatStack

Views: 65,330

Keywords: gemini, google gemini, google gemini ai, google gemini tutorial, google gemini ai tutorial, google gemini api tutorial, google gemini tutorial for beginners, google gemini full tutorial, google gemini api, google gemini using react js, generative ai, generative ai full course, gemini clone, google gemini clone, chatgpt clone, chatgpt clone using react js, chatgpt clone react, chatgpt clone project, google gemini project, web development

Id: 0yboGn8errU

Length: 115min 5sec (6905 seconds)

Published: Mon Mar 04 2024