🤖 Build AI Chatbot in HTML CSS & JavaScript | AI Chatbot Tutorial in JavaScript

In the video, I showed how to build an AI Chatbot in HTML, CSS, and JavaScript. You can ask any question and get instant answers. The chatbot includes features like image upload, an emoji picker, and is powered by AI. It's also fully responsive so that you can use it on your phone.

🚀 Best Web Hosting for Beginners & Pros

🗂️ Get Source Code of this AI Chatbot

🖼️ Get SVG Icon of this AI Chatbot

🌐 Visit CodingNepal for free 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
3:07 Starting with HTML & CSS
22:17 Getting into JavaScript
23:45 Handling Outgoing Message
29:18 Handling Loading Animation
31:40 Configuring Free Gemini API
40:39 Implementing File Upload Feature
54:00 Adding an Emoji Picker
59:09 Toggling the Chatbot Popup
1:08:54 Implementing Chat History
1:10:23 AI Chatbot Output

🎵 Music Credit:
Ikson - Waves [Official]

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

[CodingNepal]

This chatbot uses the free Gemini API to generate responses to any questions. You can customize it by adding your company information, and the chatbot will respond accordingly.

Simply update lines 22 (1:09:13) and 36 (1:09:28) with the following code:

// Line 22
const chatHistory = [
{
role: "model",
parts: [{ text: `Your company information here` }],
},
];

// Line 36
chatHistory.push({
role: "user",
parts: [{ text: `Using the details provided above, please address this query: ${userData.message}` }, ...(userData.file.data ? [{ inline_data: userData.file }] : [])],
});

[JaanJaanjaani]

I’ve struggled with this for so long. You saved me!

[bipulroy]

I’ve got this on loop while I study. It’s so smooth!

[bipulroy]

Your editing skills are *chef's kiss* perfection! 👌

[bipulroy]

Clear, concise, and easy to follow. Great job explaining!

[garimajain]

in the beginning of js file while handling with enter key press, my console messages are not appearing .it is showing some performance and security issues ...please help me out

[Jarvis-]

45:40 someone please plz explain me what he did as it shows me an error when i write ...(userdata.file.data ? [{}] : [])

[widikov]

I bought the previous version of this chat bot from you yesterday without noticing that you have a new version 💀

[JaanJaanjaani]

Keep up the great work! Looking forward to your next video.

[ebubekir]

My file-upload button not work, i have error . I have this Uncaught TypeError: Cannot read properties of null (reading 'click')
at HTMLButtonElement.<anonymous> (chatbot.js:98:82). In time of the video is 41:50. Please help me .

[JulieGibson-ht]

I can’t get over how good the beat drop is. 😩

[marcanthony]

Hello, How I can insert responses or answer about my business???

[דניקן-לי]

IS IT ALSO POSSIBLE to READ PDF's instead of photos ? what needs to be changed in the script ?

[ilsahassan-op]

bro i've done exactly what you did but when i added gemini api key its not working could you please help me out

[riefki-inanutshell]

46:38 why my image didn't show up in the chat my code like this const messageContent = `<div class="message-text"></div> ${userData.file.data ? `<img scr="data:${userData.file.mime_type};base64, ${userData.file.data}" />` : ""}`;

[lalalini]

I keep getting an API Key forbidden message, I would probably think it's bc of some settings or maybe I need to set up a payment plan? Any ideas?

[MuhammadSufyan-]

Thanks for helping me to know how chatbots actually works.

[rakshitalangoti]

I had a doubt, does it customised to answer only the confined quetions defined by the developer or any sort of quetions it can answer?

[obinnakennedy]

The svg is not showing on my work did i do something wrong

[MZT]

bro I'm stuck in an issue can u help me in dm?
When I ask any question and if its answer is containing 3 to 4 lines then its response disturbs CSS and text coming out the box and show on full screen.
Please help me, if you can.