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

Подписаться 1 млн

Просмотров 78 тыс.

50% 1

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

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 177

@GreatStackDev 25 дней назад

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

@abhinavgupta1219 2 месяца назад

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 2 месяца назад

Thanks for the tutorial, such a fantastic project ❤❤

@bhagatsinghsingh3735 2 месяца назад

providing admireable contents for us thanks you

@the_lucky_coder 20 дней назад

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

@jaffarsharieff8528 11 дней назад

Loved it, Thanks for creating such an amazing project.

@user-ie1sp3nw5v 2 месяца назад

I loved this project 😊

@vikrantsingh3368 22 дня назад

Successful build this project 🎉🎉thanks man.

@ahmadzerie9088 2 месяца назад

it was an amazing journey thank you very much

@rohitparchure2172 Месяц назад

Thanks Man, it was indeed helpful. ❤

@gamerzchoices 2 месяца назад

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

@CodingQuickTips_ 16 дней назад

It’s not free 😂, it cost $5

@shiv575 Месяц назад

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

@maclenci9458 15 дней назад

thanks for all videos you made

@influencerab5918 2 месяца назад

It was nice ,thanks for sharing

@bharath2508 2 месяца назад

Congratulations for a million subscribers

@anujpal574 Месяц назад

Thank You Sir for this tutorial 😍😍😍

@Hijab_Diaries66 2 месяца назад

thanks : love from pakistan your tutorils very helfull for me

@SipheleleZulu-jg4wr 2 месяца назад

I love this thank you so much

@user-ki7tm8qp9c 2 месяца назад

Wowowowowowowwowow. Est amazing

@jerryseigle2538 День назад

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

@sivaranjani-37 2 месяца назад

Super 😊

@codingiseasy8312 2 месяца назад

Nice video

@sathirabandara7981 2 месяца назад

Wow thats amazing

@AmanCoader 2 месяца назад

❤❤ amazing ❤❤

@gemstonemay1862 2 месяца назад

🎉🎉🎉🎉 ❤❤❤❤ Amazing!

@user-nk8eb7ku6c 2 месяца назад

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

@gamerzchoices 2 месяца назад

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

@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 12 дней назад

Hi did you buy the project??

@valenciawalker6498 22 дня назад

Thank you

@motiurtota5180 29 дней назад

nice project

@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? :)

@dinbandhusharma4568 2 месяца назад

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

@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 12 дней назад

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

@quickwheels3320 9 дней назад

is api free available?

@samarthbondhare2636 9 дней назад

@@quickwheels3320 yes

@nikshithnooka8 8 дней назад

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

@gowthammn1433 2 месяца назад

ultimate

@Sunil_1200 7 дней назад

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

@Tamanna4140 15 дней назад

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 7 дней назад

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

@naveengupta101 2 месяца назад

Amazon 😮❤

@user-uh6jx8rt5y Месяц назад

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

@shuka3101 4 дня назад

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

@MahmoudBebars-ex1oe 16 дней назад

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

@RANJEETPUROHIT422 2 месяца назад

Can you provide synopsis this project

@jaspreet01988 Месяц назад

can you also add image search in this same application

@abhishekrai4002 2 месяца назад

thank u bro

@AakashSingh-ge6nj 2 месяца назад

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

@abhishekrai4002 2 месяца назад

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

@AakashSingh-ge6nj 2 месяца назад

@@abhishekrai4002 okk bro.

@brogamingyt1185 2 месяца назад

how you getting suggestion in terminal?

@amitguria4085 2 месяца назад

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

@adamajammeh-lb6lg Месяц назад

okay

@CSEGNaveensaireddy 2 месяца назад

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

@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

@AdityaSingh-hh5qs Месяц назад

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

@user-ts9eo1jy4e 2 месяца назад

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

@vikithkotian9423 2 месяца назад

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

@mohammeduddin6900 Месяц назад

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

@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.

@MisCellaneouS880 Месяц назад

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

@Amaterasoo 20 дней назад

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

@chaiormeme 2 месяца назад

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.

@piyushsahu3654 Месяц назад

How can I host this or create a live link

@maslers 2 месяца назад

Please male a full stack version of chatgpt or gemini

@ritukumar4057 2 месяца назад

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

@KrunalKRG0212 2 месяца назад

add it yourself

@amanshrivastava8195 2 месяца назад

How to download asset from website

@prasenjitnayak_ Месяц назад

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

@kakashigamingyt3108 2 месяца назад

create a tutorial to how to deploy these app bro 🙂

@Flame-xdd162 Месяц назад

You buyed?

@gtthub4225 2 месяца назад

what extension are you useing for the snippets ?

@idevkr 2 месяца назад

ES7 react redux graphql snippet

@mahdizeinali7116 2 месяца назад

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

@renchandara389 2 месяца назад

npm i react-router-dom

@praveensamuel7296 2 месяца назад

hi i am not able to generate gemini api key

@user-rd1ik5ng2l 2 месяца назад

sir upload react ecommerce project

@iamrafiul007 2 месяца назад

❤

@HighTechGeeks 17 дней назад

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 2 дня назад

Have you found a solution for this?

@vinayaaaaaaa Месяц назад

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

@adamajammeh-lb6lg Месяц назад

yes

@gamerzchoices 2 месяца назад

❤❤❤

@mnithin809 7 дней назад

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

@manhtganf 2 месяца назад

Pls build Gemini Advanced Clone

@krahulsahu 2 месяца назад

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

@code__4634 2 месяца назад

Configur karo

@helpinghand524 Месяц назад

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

@techbire 2 месяца назад

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 .

@rizallonovega8264 2 месяца назад

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

@aizazjutt5661 20 дней назад

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 10 дней назад

found any solution?

@aizazjutt5661 9 дней назад

@@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

@mohammeduddin6900 2 месяца назад

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 2 месяца назад

bro , install npm ,and plz check your path

@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

@fc_editzz163 2 месяца назад

hello

@sanjogpatel3104 Месяц назад

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

@kvrmv28 15 дней назад

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

@acid..9245 2 месяца назад

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 😅.

@FootballHighlights771 Месяц назад

please i need your help

@Mrfrontend Месяц назад

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

@Vampire_robux69 2 месяца назад

i am having error while applying api to search

@abimbolapatrick2707 2 месяца назад

Explain more

@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

@CatsG-pu5uu 2 месяца назад

can anyone give me this project source code

@mind.less2205 16 дней назад

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

@kvrmv28 15 дней назад

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

@quickwheels3320 9 дней назад

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

@CriptoLeaks 2 месяца назад

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

@codsourav 2 месяца назад

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

@sangram597 2 месяца назад

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

@codsourav 2 месяца назад

@@sangram597 ok

@ahmedamin8134 2 месяца назад

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

@GreatStackDev 2 месяца назад

check this tutorial to build beginner react project: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-jb0KaJkxq_A.html

@ahmedamin8134 2 месяца назад

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

@CreativeMinds100 2 месяца назад

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 2 месяца назад

Check the code again

@instantclips04 2 месяца назад

Use display flex property

@030_tajamulhassan2 2 месяца назад

justify:space-between

@KOMALKUMARI-tb4tk 2 месяца назад

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

@instantclips04 2 месяца назад

What's the error?

@manoranjansutar3123 2 месяца назад

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

@manoranjansutar3123 2 месяца назад

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

@kakashigamingyt3108 2 месяца назад

white screen @@instantclips04

@KOMALKUMARI-tb4tk 2 месяца назад

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

@memeezy8787 22 дня назад

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 15 дней назад

Till when was your code running properly ?

@memeezy8787 14 дней назад

@@kvrmv28 no bro

@YellowHeart-tw8eo Месяц назад

1:15:44

@H.CWebDeveloper 2 месяца назад

Sir image is not going to right side 31:50

@CreativeMinds100 2 месяца назад

Same issue . 😢

@CreativeMinds100 2 месяца назад

Same issue 😢

@GauravSingh.1753 2 месяца назад

@@CreativeMinds100 You guys have an extra div that's why . When you write rafce to get code , remove the div which is already writtern .Then start coding. This will make the image to go the right side

@YellowHeart-tw8eo Месяц назад

28:39

@YellowHeart-tw8eo Месяц назад

21:20

@011-jawahar-s6 Месяц назад

Bro API Doesn't not Work😢

@idevkr Месяц назад

Make sure to select Gemini 1.0 API by default it is 1.5