Build A Google Gemini Chatbot in HTML CSS & JavaScript | Chatbot Like ChatGPT and Gemini

In the video, I showed how to build a Google Gemini Chatbot using HTML CSS & JavaScript. Users chat with the Gemini chatbot, copy responses, and toggle between light and dark themes. Themes and chats are saved in the browser's local storage, so they persist even after a page refresh.

This project uses the free Google Gemini API to generate responses, which are shown with a typing effect after an engaging loading animation, just like Gemini.

🖼️ Get Images Only of this Gemini Chatbot

🗂️ Get Source Code of this Gemini Chatbot

🌐 Visit CodingNepal for helpful coding projects

⭐ Hire me on Fiverr

📷 Follow me on Instagram

🤝 Support my work with a coffee

🕔 Timestamps
0:00 Gemini Clone Demo
2:52 Starting with HTML & CSS
20:29 Creating Chat List
26:03 Creating Loading Animation
30:19 Getting into JavaScript
31:34 Handling Outgoing Message
35:55 Handling Loading Animation
38:30 Setting Up Free Google Gemini API
45:40 Showing Response as Typing Effect
48:45 Working on Copy Message Button
51:07 Working on Toggle Theme Button
1:02:27 Working on Delete Chat Button
1:06:16 Featured Suggestion Responses
1:10:12 Error Handling & Styling

🎵 Music Credit:
Ikson - We Are Free [Official]

#html #css #javascript #chatbot #gemini #chatgpt

[notjamespro]

All set done ! got a grasping powers to create project i am on path to do a lot of projects --> portfolio --> create and aplly jobs ---> idea i have will start working

[rizzmanny]

nice Projects you got here on your channel, would be extremely helpful if you talked in some of your videos, at least the big projects, such as this. Nice video btw.

[kamelissaoui]

Awesome work, not only this but all the tutorials you are sharing, God bless u bro

[codingDSS]

Hello ! I'm CodingDimensions and Nice to meet you CodingNepal !

[ranjeetkumar-lugs]

Awesome work bro, But You need to implement two more feature in this like --> mic and image these two.
So, Can you please make it a separate video for these two in this project if possible?

[itsVaishuGaming]

Give me A Full roadmap to Become A Full stack web developer like you & develope project like this amazing👍

[entertainment]

hey not getting an Api response maybe the key is not working properly could you tell me the reason for not getting an API response

[vladimir]

Thank you very much, it is a very interesting project, I would like to ask you about the possibility of the following:

1. Adding a login interface, which is not necessarily similar to Google's, but any other design where access is through a user base controlled by a PHP system?

2. Can a RAG (Retrieval-Augmented Generation) be implemented so that with the API and the Gemini model, I can chat with PDF?

Thanks

[ashishicyy]

Relevant and creative stuff, like it❤️

[PhantomEverythingSaif]

Great Video, Thank You keep doing more ai stuff.

[kpopTv]

Thank you for your creative self much love

[siddhant__]

Thanks a lot, this is really a helpful project, waiting for free source code

[maskman]

Next topic: Build a chat app with HTML + CSS + JS + firebase, would be better if you involve HTMX, no JS needed, so cool, save you tons of time defining elements, I strongly recommend you giving HTMX a try 🥰

[Prathamesh-]

Hey, good work! I am a beginner. Is this project beginner-friendly? If not, what project should I work on? I only know the basic concepts of JavaScript.

[gamingpro]

Thank you, can you make video about websockets ?

[supriyakumari]

Sir i have tried to make the project but data is not printed on console i copy your code still its not work

[GamingNinja-yq]

Hi bro!, it's me again(Top fan of you), I really appreciate your effort, just keeping movin' on with super creative videos like this !!🥰🥰and i would request if you can build a simple chat app using HTML, CSS & JS if there is no problem (with many features).

THANK YOU !!, I AM WAITING FOR YOUR GOOD RESPONSE soon !!

[TheStethoBoy]

Bro can you make a video on how to hide the api key 😭

[Islamic_content]

Today you are uploading project like chatgpt and chatbot & Google gimi I'm always like your videos and subscribe you can provide me source code free of cost? Plzz

[mounir]

Thank you so much for this great project. keep up the good work bro👍👍👍👍👍👍👍🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏🤏