Build a Chatbot with Gemini API using HTML, CSS & JavaScript only

In this video you will learn how to integrate #generativeai into Web Apps using the #gemini #javascript SDK. We are going to build a #chatbot using #html #css and #javascript

👆🏼The link above offers you the biggest discount of the Udemy Marketplace - Don't miss this chance. Take the full course now!

Resources for this video:
• Complete Project
• Starter Version with HTML & CSS Only
• Send & Chat Icons

Chapters
00:00:00 Intro
00:01:06 HTML & CSS Parts
00:15:32 Chat Functionality: Sending Messages
00:23:10 Connecting with the Gemini API
00:28:13 Showing The Chatbot Replies in the Chat
00:30:48 Error Handling
00:35:03 Training the Model with the Business Information
00:40:48 Adding a Loader
00:44:27 Simulate Typing with Streamed Messages
00:54:33 Open & Close the Chat Window
01:02:52 Ending

[alan-overthenet]

Thanks a lot Ivan, I appreciate the content. This will be useful for me, once I get super good at Rust and Django. Don't ask why :o!

[rdaphq]

understimated content! Very good and helpful video, thanks!!

[codisticss]

Bro this video should have millions of views but only thousands views 😢

[LearnfromtheWise-pfpt]

need updated of this video Gemini page has been change. So the codes that we need for API are different

[fakhriathallah]

i stuck in gemini api request, they dont have the " WEB " option no more

[LuisHenrique-obbh]

Is it possible to train this chat model using a TXT or Word file with predefined messages, so that the chat only responds to the topics in the file?

[yakuwafred]

😊Thanks. I would like to know how to make my chatbot respond to known user input offline without api, and it uses Gemini api key for unknown user input. I'm finding challenges how to make it😢. I would like doing it using html, css and JavaScript

[nikhilsharma]

how can i connect it to a database like mongodb for user orders ?

[setiajisugestian]

Hello, 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

[NicoBand]

Hi there, i really like your tutorial, thanks a lot for it. When i open the gemini API Docs page, i can't find the "web" section, seems like they are discouraging the use of Gemini API on JS due to security concerns, can you please help me .

[MageshkumarRS]

its a wonderful content but the ai model doesnt respond when where send a message through the chat assisant - it prints the error msg like "The message could not be sent. Please try again." what can i doo

[tonystark-qzbx]

hi mr Ivan. i have your course and also question. Can we use other language for Training the Model with the Business Information