🤖 Build AI Chatbot in React JS & CSS | React JS Chatbot Tutorial

In the video, I showed how to build an AI Chatbot using React JS and CSS. You can ask the chatbot any question and receive instant answers. It is powered by Gemini AI, allowing it to respond dynamically to your inquiries. Additionally, you can use this chatbot on your phone.

🚀 Best Web Hosting for Beginners & Pros

🗂️ Get Source Code of this AI Chatbot

🖼️ Get SVG Icon and Example Company data

🌐 Visit CodingNepal for helpful coding projects

⭐ Hire me on Fiverr

☕ Support me with a coffee

📷 Follow me on Instagram

📲 Follow me on X (Twitter)

🕔 Timestamps
00:00 AI Chatbot Demo
2:20 Setting Up React JS Project
2:39 Creating the Main App Component
7:10 Styling the App Component
19:05 Handling Form Submission
27:15 Configuring Free Gemini API
35:29 Adding Chatbot Popup Toggle
41:00 Managing Error Handling
42:32 Customizing Responses with User Data
44:20 Final AI Chatbot Output

🎵 Music Credit:
Ikson - Waves [Official]

#reactjs #javascript #chatbot #ai #gemini #chatgpt

[tofuudon]

I absolutely love this tutorial! The keyboard ASMR is also so nice lol

[SheriffKoder]

Thanks a lot buddy, this is exactly what I wanted without external libraries and so on! 🙌

[tashilama]

Bro your work was awesome you just gained a new subscriber. Would be much better if there was audio as well that would have been a cherry on top. Still awesome video.

[michelleoszczakiewicz]

this tut is wonderful. Bought you a coffee!

[mounir]

Super video, free, source code, you really put so much effort for your viewers. I appreciate it and thank you so much. CN.

[ShayakhAbid]

Bro, this is amazing! I’d also suggest adding more functionality—like the chatbot you already made using raw HTML, CSS, and JavaScript. That would make it even better.

[callmeproteus]

Awesome stuff! enjoyed the asmr of ur typing, was able to setup mine as well

[enemyunknown]

I Made it
🎉🎉🎉
You are the Best bro
❤❤❤❤❤

[sachin-singh-]

Sir I have request to you.
Please use software like keywiz so that learners could know which keystrokes you use.

[ShwetankChandra]

Great prject man thanks a lot! it works so well!!!

[MoviesTakkar]

how to view chat bot responses and all questions asked by customers. ( Using html, css and javascript)

Can you make video with adding this features


Please reply me 🎉😢😊

Hopefully there will be a video on this soon as well.


Nice Video bro❤🎉😊

[muhammadjunaidkhan]

Hi CodingNepal it is very helpful video but can you make the part 2 for this to show how we can use this with the database and website scraping. I actually want to make the chat bot with the actual website

[princemudy]

Pls i need info on How can i add web scrapping to it .

[dgigamerz]

Failed to execute 'json' on 'Response': Unexpected end of JSON input

[Legion-td]

My friend's teacher gave him your first project to do, but my friend even doesn't know how to create react app

[runujana]

Hey I am making this project without vite and for .env file i used My url name REACT_APP_MY_URL but I am getting error that my api is undefined ..what could be the possible error causing it? I am using process.env instead of import.meta.env inside my jsx file

[craftedbysrs]

If Anyone tried it all, made the code working just fine, please reply here with the source code. Thanks!

[setiajisugestian]

Hello bro, I am interested in the project you created and it is very useful for me. I happen to want to create an AI chatbot like this but there is a new feature that I want to add, namely integration with the Google Maps API, I want to create a chatbot that is concentrated for users looking for tourist attraction recommendations. which the user will then write down for tourist attraction recommendations and the output will show the tourist attraction that best suits the request. with the project in this video, in the script code which parts should I change and add to build my project. Thank You

[maxella]

do i have to start the free trial in google cloud to be able to use api properly? coz im getting ERROR 404

[chandanchaudhary]

bro please give the company information, that you mentioned at 42:33