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

Build your on Generative AI App using Google Gemini API Using React JS. Create create AI app like Google Gemini or ChatGPT step by step tutorial.
👉 Live Preview: clone-gemini.vercel.app/
👉 Source code: greatstack.dev/go/gemini
SUBSCRIBE: @GreatStackDev
❤️ Complete JavaScript Course with Certification:
👉 greatstack.dev/go/javascript-...
✔️ Beginner + Advance + ES6 + Notes
✔️ 30 Project With Source Code
✔️ React Beginner course with project
✔️ Course Completion certificate
✔️ Chat Support
In this tutorial you will learn to create your own Generative AI app like Google Gemini or ChatGPT In React JS. In this step by step tutorial we will create a Gemini clone app using Gemini API for absolutely free. you can create this google Gemini app for you college project or personal portfolio.
Upload this Gemini clone project online using Vercel or netlify then add the project live link in your resume.
Build your own version of Google Gemini App and share the screenshot on LinkedIn by tagging GreatStack page, and get featured on own LinkedIn page.
Download Assets: drive.google.com/file/d/1E0eU...
Get web hosting and domain:
👉greatstack.dev/go/hostinger
Watch Full Stack E-commerce Website tutorial:
👉 • How To Create Full Sta...
---------------------------------
Time stamp:
00:00 Project Overview
02:58 Setup React JS Project
06:14 Create UI of Google Gemini App
47:06 Add Generative AI Functionality
01:17:54 Create Pre-loader animation
01:23:48 Add typing effect
01:34:34 save prompt in sidebar
01:48:33 Make the app responsive
-----------------------------------------
Suggested Course:
Complete JavaScript course with 30 projects:
👉 greatstack.dev/go/javascript-...
Complete HTML and CSS with 8 projects:
👉 easytutorialspro.com/go/course/
-------------------------------------
Recommended Videos:
Beginner's HTML and CSS tutorial:
► • HTML And CSS Tutorial ...
Beginner's JavaScript tutorial:
► • JavaScript Full Course...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------
Stock Image and icon credit:
pexels.com
-------------------------------------
Connect with me:
👉 linktr.ee/iamavinashkr
Connect with GreatStack:
Instagram: / greatstackdev
Twitter: / greatstackdev
Facebook: / greatstack

[@GreatStackDev]

👉 Live Preview: clone-gemini.vercel.app/ 👉 Source code: greatstack.dev/go/gemini

[@abhinavgupta1219]

Wow.. Thanks for making another great project. I will surely create this Gemini clone Best channel to learn react js by making trending projects ❤

[@gabrielkingori3375]

Thanks for the tutorial, such a fantastic project ❤❤

[@bhagatsinghsingh3735]

providing admireable contents for us thanks you

[@the_lucky_coder]

Greate Work, Amazing use of React.js and CSS. Looking for more this type of projects in future.

[@jaffarsharieff8528]

Loved it, Thanks for creating such an amazing project.

[@rohitparchure2172]

Thanks Man, it was indeed helpful. ❤

[@vikrantsingh3368]

Successful build this project 🎉🎉thanks man.

[@ahmadzerie9088]

it was an amazing journey thank you very much

[@gamerzchoices]

One thing I love about you is that you provide assets to build, some youtuber dont do that

[@CodingQuickTips_]

It’s not free 😂, it cost $5

[@user-ie1sp3nw5v]

I loved this project 😊

[@shiv575]

Thank you sir ..to providing a such a wonderful project.

[@maclenci9458]

thanks for all videos you made

[@influencerab5918]

It was nice ,thanks for sharing

[@Hijab_Diaries66]

thanks : love from pakistan your tutorils very helfull for me

[@anujpal574]

Thank You Sir for this tutorial 😍😍😍

[@bharath2508]

Congratulations for a million subscribers

[@SipheleleZulu-jg4wr]

I love this thank you so much

[@user-ki7tm8qp9c]

Wowowowowowowwowow. Est amazing

[@dinbandhusharma4568]

sir how you get the suggestion in terminal please can you tell me thanks for video, amazing 🔥

[@jerryseigle2538]

Would have been nice if you would use Material UI since Google is Material

[@goodnessuche1430]

Just finished this Had a last minute headache making the side bar elements(new char && recent chat) responsive. Partly cos I've been coding for hours. Thank you so much for this totorial

[@vijaypardhu1698]

can you share your repo? plzzz

[@meghapujari7]

Hi did you buy the project??

[@sathirabandara7981]

Wow thats amazing

[@user-nk8eb7ku6c]

Hey Man, Its such a nice tutorial, btw Why you didn't use react-markdown ?

[@sivaranjani-37]

Super 😊

[@gemstonemay1862]

🎉🎉🎉🎉 ❤❤❤❤ Amazing!

[@AmanCoader]

❤❤ amazing ❤❤

[@kparteearabhi3322]

finally completed this project

[@gamerzchoices]

I am building this project. You are wholesome greatDSA not just greatstack

[@ajitpalchauhan3147]

did you complete the project? I had an error that onSent is undefined can you help

[@kritsimarahuja8978]

@@ajitpalchauhan3147 include onSent in contextValue where we have passed states

[@codingiseasy8312]

Nice video

[@jurajkardos8685]

Hi there, firstly, thank You very much for this, i enjoyed it. Can You maybe explain how would You add an animation so when You click on the menu icon it does not instantly change width but it takes for example a second? :)

[@user-uh6jx8rt5y]

sir,get code current not available for this model . it shows in when click get code button.

[@samarthbondhare2636]

Thank u so much i have developed this clone successfully without any error this is my first ever project on api before this project i was not able to handle the api but in this video i learned about how to use api . thank you so much once again .

[@digitalxvijay582]

bro can you send me the git repo link or source code link plzz

[@meghapujari7]

hi there can you tell me what extensions have you downloaded?

[@quickwheels3320]

is api free available?

[@samarthbondhare2636]

@@quickwheels3320 yes

[@valenciawalker6498]

Thank you

[@shuka3101]

Let me ask a question, when I go to main.jsx, I change React.StrictMode to ContextProvider imported from Context.jsx, but nothing is displayed on the web interface. When I change it to React.StrictMode, it doesn't display anything. just appeared normal again

[@nikshithnooka8]

sir how do i create a api in gemini it is not suggesting me any recent projects in your cloud how do i do that the error occurs to me at exactly time where after the completion of html and css part when it comes to linking api

[@Sunil_1200]

Please make a complete MERN social medial with all the features. FB or INSTA

[@motiurtota5180]

nice project

[@jaspreet01988]

can you also add image search in this same application

[@CSEGNaveensaireddy]

Hi sir it is not giving the code instead it is giving the design please check that bug and update it

[@RANJEETPUROHIT422]

Can you provide synopsis this project

[@Tamanna4140]

Thank you for this project. I completed it by watching the provided video. Can you please guide me on how to practice creating projects on my own? I find it difficult to write and code without following tutorials. I would appreciate any suggestions you can offer to help me overcome this problem. Thank you for your help 😊😊

[@afaqahmad8918]

Same problem with me. I think by making some website by watching tutorial can make us more comfortable.. what do you think.

[@gowthammn1433]

ultimate

[@MahmoudBebars-ex1oe]

I really love the project idea but not using tailwindcss & using static icons & oleos using old ways in CSS really disported me

[@user-ts9eo1jy4e]

Dir can you please provide the complete project files i am having issues with context files

[@riyazuddin5613]

Could you help me with source code I downloaded it and tried running it but every time I type a question is doesn’t give me an answer. It just generates for a long time.

[@brogamingyt1185]

how you getting suggestion in terminal?

[@Amaterasoo]

hey, i am getting an error (429) quota limit exceeded. how can i resolve it?

[@chaiormeme]

Can't install gemini ai giving network error 😔😔😔😔 This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings. npm ERR! network npm ERR! network If you are behind a proxy, please make sure that the npm ERR! network 'proxy' config is set properly.

[@MisCellaneouS880]

It says API is not available in my region , is there any other way around?

[@vikithkotian9423]

brother i need to one video of how to make a product comparison website using gemini api

[@monikanayak5752]

in console showing this error: TypeError: genAI.GoogleGenerativeAI is not a function

[@ajiteshmishra0005]

Please upload one video containing concepts Redux, Redux Saga, Redux Thunk in any React Application If it is possible to JWT also so it will be good for React Aspirants

[@amitguria4085]

Could you please provide a video demonstrating how to deploy this project on Vercel?

[@adamajammeh-lb6lg]

okay

[@mohammeduddin6900]

you cut the part where you showed you clicking the recent chats please tell me how to do this

[@AdityaSingh-hh5qs]

how you have two files Main.jsx and main.jsx?

[@naveengupta101]

Amazon 😮❤

[@piyushsahu3654]

How can I host this or create a live link

[@ritukumar4057]

Please add auto scrolling. Like when it's generating the result it should be at the last word

[@KrunalKRG0212]

add it yourself

[@amanshrivastava8195]

How to download asset from website

[@maslers]

Please male a full stack version of chatgpt or gemini

[@HighTechGeeks]

love this and also bought it but sadly it doesnt maintain history in each chat like if i have 10 question it opens up 10 different chat on side bar

[@ahmedfouda45]

Have you found a solution for this?

[@kakashigamingyt3108]

create a tutorial to how to deploy these app bro 🙂

[@Flame-xdd162]

You buyed?

[@abhishekrai4002]

thank u bro

[@AakashSingh-ge6nj]

Bhai iss project ko start ma kar sakti hu koi error tho nahi aayega na beech ma?

[@abhishekrai4002]

@@AakashSingh-ge6nj hao bhai krle start koi error na aana resume m bhi mention kr sakta isko

[@AakashSingh-ge6nj]

@@abhishekrai4002 okk bro.

[@sakshipimpale9437]

I tried but there is no output flashes on console...

[@user-rd1ik5ng2l]

sir upload react ecommerce project

[@gtthub4225]

what extension are you useing for the snippets ?

[@idevkr]

ES7 react redux graphql snippet

[@praveensamuel7296]

hi i am not able to generate gemini api key

[@mahdizeinali7116]

Thank you for tutorials How can i install react router dom by vite?

[@renchandara389]

npm i react-router-dom

[@mohammeduddin6900]

Can you help me please I am getting this error after typing "npm create vite@latest" This is the error - npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + npm create vite@latest + ~~~ + CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

[@raj_patel3600]

bro , install npm ,and plz check your path

[@vinayaaaaaaa]

Sir can we have to install npm everytime we make a new project??? Plz reply

[@adamajammeh-lb6lg]

yes

[@prasenjitnayak_]

Firefox users, if you can't hide scroll tab, you can use this scrollbar-width: none; /* Added only for firefox users */

[@manhtganf]

Pls build Gemini Advanced Clone

[@rizallonovega8264]

I have question, how about syntax hightlight because when i try to ask about code it had ```javascript value.... ```

[@ajitpalchauhan3147]

did you complete the project? I have an error that onSent is not defined. I cannot solve the issue can you help?

[@rizallonovega8264]

@@ajitpalchauhan3147 i already completed but i still find a way so the response and code response to align perfectly

[@krahulsahu]

57:35 sir, unable to fatch API and not showing console result.

[@code__4634]

Configur karo

[@techbire]

i have two problem : coding prompt is na and second is how to add functionality to send querry by hitting enter

[@imamujjamantasin1111]

you'll need to write some key down function for that .

[@CriptoLeaks]

Hello, excellent video brother, do you have the source code? I did it step by step but it doesn't work for me.

[@monikanayak5752]

Sir , Get Code currently not available for this model showing in google ai studio .

[@mohammeduddin6900]

you have to select the version to gemini 1.0 prp

[@mnithin809]

Can anyone help me with recent promot not showing in web page

[@iamrafiul007]

❤

[@gamerzchoices]

❤❤❤

[@aizazjutt5661]

At 57:21, when I refresh the page. Front-end disappears and when i go to inspect and console. It displays details of react js. Anyone tell me why my front-end get disappeared?

[@Adityaray1528]

found any solution?

[@aizazjutt5661]

@@Adityaray1528 yes, it was due to Api version. In this video, he used api version 2.0 so we also have to select version 2.0. In order to generate Javascript Api

[@helpinghand524]

26:44 extended function is not doings its work for me

[@acid..9245]

bro ... I am facing a problem ...my sidebar css file is connected ...because no changes are reflected from my css file..to my browser...anyone has a solution plz help...🙏🙏🙏🙏🙏🙏

[@deepaknegi8916]

Same issue with my code too 😅.

[@sanjogpatel3104]

when i use the tag it will not apply .any solution ?

[@kvrmv28]

I'm facing the same problem while using the tags . Did you find any solution to this yet ? Please tell me if you got the solution for this

[@fc_editzz163]

hello

[@Mrfrontend]

Remember guys, api keys should never be stored in the file itself, use environment variables.

[@mind.less2205]

How to get API i am facing problem!-"Access Google AI Studio with your Workspace account "

[@kvrmv28]

You have to create a new workspace or select from an old one while creating an API Key

[@quickwheels3320]

@@kvrmv28 is api free do we have to add payment details like open ai?

[@FootballHighlights771]

why am i having errors from API?? " User location is not supported for the API use."

[@011-jawahar-s6]

I am also same problem you find the solution??

[@FootballHighlights771]

@@011-jawahar-s6 yeah it worked after sometime!!

[@idevkr]

I think the api is not working on you ip address or region

[@codsourav]

This clone doesn't write programs properly it just place the code as normal text on like code please fix it

[@sangram597]

😂 you have to improve app yourself he just give you api call and other basic features try yourself

[@codsourav]

@@sangram597 ok

[@Vampire_robux69]

i am having error while applying api to search

[@abimbolapatrick2707]

Explain more

[@CreativeMinds100]

30:25 i am aslo trying but user icon image and text not showing side by side its showing sidebar bottom what is the problem . Please anyone can help me

[@KOMALKUMARI-tb4tk]

Check the code again

[@instantclips04]

Use display flex property

[@030_tajamulhassan2]

justify:space-between

[@FootballHighlights771]

please i need your help

[@manoranjansutar3123]

Uncaught (in promise) TypeError: request is undefined at 56:00 -- const result = await chat.sendMessage(prompt); shows error in this line...help

[@KOMALKUMARI-tb4tk]

my frontend part is completed but at 56:00 as started then.. in create api i stuck please help me out .. api m

[@instantclips04]

What's the error?

[@manoranjansutar3123]

@@instantclips04 Uncaught (in promise) TypeError: request is undefined

[@manoranjansutar3123]

@@instantclips04 const result = await chat.sendMessage(prompt); shows error in this line

[@kakashigamingyt3108]

white screen @@instantclips04

[@KOMALKUMARI-tb4tk]

@@instantclips04 after pasting api .. then local host show blank page

[@memeezy8787]

Can anyone help me to get rid of this error uncaught type error cannot read properties of undefined ( reading map ) After the clicking on menu at sidebar my screen goes white and app stopped

[@kvrmv28]

Till when was your code running properly ?

[@memeezy8787]

@@kvrmv28 no bro

[@ahmedamin8134]

mounting of css file doesn't work for me guide me please

[@GreatStackDev]

check this tutorial to build beginner react project: kzbin.info/www/bejne/oJOTfJSAoN2klaM

[@ahmedamin8134]

@@GreatStackDev I have tried it bro still I can't pls guide me bro please I am very excited to learn further

[@CatsG-pu5uu]

can anyone give me this project source code

[@YellowHeart-tw8eo]

1:15:44

[@YellowHeart-tw8eo]

28:39