Let's Build Google Gemini 2.0 Using React JS and Gemini API | Gemini Clone In React 2024
HTML-код
- Опубликовано: 20 май 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
![ChatGPT Can Now Talk Like a Human [Latest Updates]](http://i.ytimg.com/vi/ID5tc61iksY/mqdefault.jpg)
👉 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 ❤❤
I loved this project 😊
providing admireable contents for us thanks you
Thanks Man, it was indeed helpful. ❤
thanks : love from pakistan your tutorils very helfull for me
it was an amazing journey thank you very much
Successful build this project 🎉🎉thanks man.
Greate Work, Amazing use of React.js and CSS. Looking for more this type of projects in future.
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
Wowowowowowowwowow. Est amazing
Congratulations for a million subscribers
It was nice ,thanks for sharing
Thank you sir ..to providing a such a wonderful project.
Thank You Sir for this tutorial 😍😍😍
thanks for all videos you made
I love this thank you so much
Wow thats amazing
❤❤ amazing ❤❤
🎉🎉🎉🎉 ❤❤❤❤ 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??
Super 😊
Nice video
Hey Man, Its such a nice tutorial, btw Why you didn't use react-markdown ?
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
ultimate
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?
Thank you
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 😊😊
Amazon 😮❤
sir how you get the suggestion in terminal
please can you tell me
thanks for video, amazing 🔥
nice project
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
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? :)
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
Firefox users, if you can't hide scroll tab, you can use this
scrollbar-width: none; /* Added only for firefox users */
Could you please provide a video demonstrating how to deploy this project on Vercel?
okay
create a tutorial to how to deploy these app bro
🙂
You buyed?
I really love the project idea but not using tailwindcss & using static icons & oleos using old ways in CSS really disported me
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.
sir,get code current not available for this model . it shows in when click get code button.
❤
sir upload react ecommerce project
can you also add image search in this same application
Hi sir it is not giving the code instead it is giving the design please check that bug and update it
I'm stuck at menu_icon .. its not showing in the live server?
❤❤❤
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.
Dir can you please provide the complete project files i am having issues with context files
Can you provide synopsis this project
Pls build Gemini Advanced Clone
how you getting suggestion in terminal?
Please male a full stack version of chatgpt or gemini
brother i need to one video of how to make a product comparison website using gemini api
hey, i am getting an error (429) quota limit exceeded. how can i resolve it?
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?
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.
how you have two files Main.jsx and main.jsx?
It says API is not available in my region , is there any other way around?
you cut the part where you showed you clicking the recent chats please tell me how to do this
How can I host this or create a live link
Please add auto scrolling. Like when it's generating the result it should be at the last word
add it yourself
in console showing this error: TypeError: genAI.GoogleGenerativeAI is not a function
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 😅.
hello
Thank you for tutorials
How can i install react router dom by vite?
npm i react-router-dom
How to download asset from website
what extension are you useing for the snippets ?
ES7 react redux graphql snippet
Sir can we have to install npm everytime we make a new project??? Plz reply
yes
hi i am not able to generate gemini api key
Remember guys, api keys should never be stored in the file itself, use environment variables.
57:35 sir, unable to fatch API and not showing console result.
Configur karo
26:44 extended function is not doings its work for me
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 .
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
please i need your help
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 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
i am having error while applying api to search
Explain more
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
1:15:44
28:39
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
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
21:20
mounting of css file doesn't work for me guide me please
check this tutorial to build beginner react project: ruclips.net/video/jb0KaJkxq_A/видео.html
@@GreatStackDev I have tried it bro still I can't pls guide me bro please I am very excited to learn further
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
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
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
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
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
can anyone give me this project source code
Bro API Doesn't not Work😢
Make sure to select Gemini 1.0 API by default it is 1.5
is this api free
Yes it's completely free with limit of 120 prompt in a minute
pehle hi bta do ye free api hai ya paid??
It's completely free bro
Thank u so much bro. ab aaram se bna skta hu @@idevkr
U selling source code???? I wasted my time writing css + not same project like live preview DISLIKE!!
Is this api paid?
in the intro he itself said it's free, openAi APIs is paid, although openAi gives around 5$ free.
It's free
Yeah..he said api is free .. but it is not free
Where can I get the code
Google api is free 😀
Dude you literally didn’t explain anything you just speaking what you are writing
Uncaught (in promise) TypeError: request is undefined at 56:00 -- const result = await chat.sendMessage(prompt); shows error in this line...help