Let's Build Google Gemini 2.0 Using React JS and Gemini API | Gemini Clone In React 2024
ฝัง
- เผยแพร่เมื่อ 28 พ.ค. 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
👉 Live Preview: clone-gemini.vercel.app/
👉 Source code: greatstack.dev/go/gemini
Wow.. Thanks for making another great project. I will surely create this Gemini clone
Best channel to learn react js by making trending projects ❤
Thanks for the tutorial, such a fantastic project ❤❤
Loved it, Thanks for creating such an amazing project.
Thanks Man, it was indeed helpful. ❤
providing admireable contents for us thanks you
Successful build this project 🎉🎉thanks man.
Greate Work, Amazing use of React.js and CSS. Looking for more this type of projects in future.
I loved this project 😊
Congratulations for a million subscribers
Thank you sir ..to providing a such a wonderful project.
it was an amazing journey thank you very much
thanks for all videos you made
Thank You Sir for this tutorial 😍😍😍
One thing I love about you is that you provide assets to build, some youtuber dont do that
It’s not free 😂, it cost $5
thanks : love from pakistan your tutorils very helfull for me
I love this thank you so much
It was nice ,thanks for sharing
Hey Man, Its such a nice tutorial, btw Why you didn't use react-markdown ?
Wowowowowowowwowow. Est amazing
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
can you share your repo? plzzz
Hi did you buy the project??
Nice video
Super 😊
❤❤ amazing ❤❤
I am building this project. You are wholesome greatDSA not just greatstack
did you complete the project? I had an error that onSent is undefined can you help
@@ajitpalchauhan3147 include onSent in contextValue where we have passed states
Wow thats amazing
🎉🎉🎉🎉 ❤❤❤❤ Amazing!
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 .
bro can you send me the git repo link or source code link plzz
hi there
can you tell me what extensions have you downloaded?
is api free available?
@@quickwheels3320 yes
Thank you
sir how you get the suggestion in terminal
please can you tell me
thanks for video, amazing 🔥
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? :)
nice project
ultimate
Amazon 😮❤
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
sir,get code current not available for this model . it shows in when click get code button.
Please make a complete MERN social medial with all the features. FB or INSTA
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 😊😊
Same problem with me. I think by making some website by watching tutorial can make us more comfortable.. what do you think.
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
Could you please provide a video demonstrating how to deploy this project on Vercel?
okay
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
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
thank u bro
Bhai iss project ko start ma kar sakti hu koi error tho nahi aayega na beech ma?
@@AakashSingh-ge6nj hao bhai krle start koi error na aana resume m bhi mention kr sakta isko
@@abhishekrai4002 okk bro.
can you also add image search in this same application
I really love the project idea but not using tailwindcss & using static icons & oleos using old ways in CSS really disported me
Hi sir it is not giving the code instead it is giving the design please check that bug and update it
how you getting suggestion in terminal?
Can you provide synopsis this project
how you have two files Main.jsx and main.jsx?
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.
Dir can you please provide the complete project files i am having issues with context files
It says API is not available in my region , is there any other way around?
How can I host this or create a live link
create a tutorial to how to deploy these app bro
🙂
You buyed?
hey, i am getting an error (429) quota limit exceeded. how can i resolve it?
in console showing this error: TypeError: genAI.GoogleGenerativeAI is not a function
brother i need to one video of how to make a product comparison website using gemini api
❤
what extension are you useing for the snippets ?
ES7 react redux graphql snippet
❤❤❤
Please add auto scrolling. Like when it's generating the result it should be at the last word
add it yourself
you cut the part where you showed you clicking the recent chats please tell me how to do this
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.
Sir can we have to install npm everytime we make a new project??? Plz reply
yes
Please male a full stack version of chatgpt or gemini
How to download asset from website
Thank you for tutorials
How can i install react router dom by vite?
npm i react-router-dom
sir upload react ecommerce project
Can anyone help me with recent promot not showing in web page
hi i am not able to generate gemini api key
Pls build Gemini Advanced Clone
Firefox users, if you can't hide scroll tab, you can use this
scrollbar-width: none; /* Added only for firefox users */
hello
57:35 sir, unable to fatch API and not showing console result.
Configur karo
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
bro , install npm ,and plz check your path
I have question, how about syntax hightlight because when i try to ask about code it had ```javascript value.... ```
did you complete the project? I have an error that onSent is not defined. I cannot solve the issue can you help?
@@ajitpalchauhan3147 i already completed but i still find a way so the response and code response to align perfectly
26:44 extended function is not doings its work for me
Sir ,
Get Code currently not available for this model showing in google ai studio .
you have to select the version to gemini 1.0 prp
i have two problem : coding prompt is na and second is how to add functionality to send querry by hitting enter
you'll need to write some key down function for that .
Hello, excellent video brother, do you have the source code? I did it step by step but it doesn't work for me.
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?
found any solution?
@@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
please i need your help
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...🙏🙏🙏🙏🙏🙏
Same issue with my code too 😅.
when i use the tag it will not apply .any solution ?
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
i am having error while applying api to search
Explain more
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
Check the code again
Use display flex property
justify:space-between
Remember guys, api keys should never be stored in the file itself, use environment variables.
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
Till when was your code running properly ?
@@kvrmv28 no bro
my frontend part is completed but at 56:00 as started then.. in create api i stuck please help me out .. api m
What's the error?
@@instantclips04 Uncaught (in promise) TypeError: request is undefined
@@instantclips04 const result = await chat.sendMessage(prompt); shows error in this line
white screen @@instantclips04
@@instantclips04 after pasting api .. then local host show blank page
why am i having errors from API??
" User location is not supported for the API use."
I am also same problem you find the solution??
@@011-jawahar-s6 yeah it worked after sometime!!
I think the api is not working on you ip address or region
can anyone give me this project source code
This clone doesn't write programs properly it just place the code as normal text on like code please fix it
😂 you have to improve app yourself he just give you api call and other basic features try yourself
@@sangram597 ok
mounting of css file doesn't work for me guide me please
check this tutorial to build beginner react project: th-cam.com/video/jb0KaJkxq_A/w-d-xo.html
@@GreatStackDev I have tried it bro still I can't pls guide me bro please I am very excited to learn further
How to get API i am facing problem!-"Access Google AI Studio with your Workspace account "
You have to create a new workspace or select from an old one while creating an API Key
@@kvrmv28 is api free do we have to add payment details like open ai?
21:20
28:39
1:15:44
Sir image is not going to right side 31:50
Same issue . 😢
Same issue 😢
@@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
is this api free
Yes it's completely free with limit of 120 prompt in a minute
Bro API Doesn't not Work😢
Make sure to select Gemini 1.0 API by default it is 1.5