Build and deploy your own Chatbot with Gemini (Complete JavaScript Tutorial)🚀

Learn how to build and deploy your own chatbot using the Gemini AI API.
🔗🔗 Useful Links
Build your own AI Chatbot: • 🔥🚀Build your own AI Ch...
- Build with Gemini: deepmind.googl...
- Google AI Documentation: ai.google.dev/...
- Google AI Studio: makersuite.goo...
- Vercel: vercel.com/
Source Code: github.com/tom...
Chapters
⌨️ (0:00:00) 01: Introduction and Demo
⌨️ (0:00:59) 02: Build the Frontend
⌨️ (0:26:31) 03: Connecting to the Gemini API
⌨️ (0:49:27) 04: Rendering markdown text
⌨️ (0:53:30) 05: Add chat history
⌨️ (1:01:53) 06: Pushing to GitHub
⌨️ (1:03:53) 07: Deploying on Vercel
⌨️ (1:06:28) 08: Conclusion

[@tommys_codebase]

Hello everyone!
A member, @Vivin, suggested that I add text streaming and a loading indicator to the chatbot. I have done that and committed that change to another branch call "modified". I have also replaced the pre tags in the AI div with regular p tags and I have also removed the markdown rendering functionality.
Link to the modified branch: github.com/tommyscodebase/gemini_chatbot_javascript/tree/modified

[@hhaydenk_]

Ok cool! Thankyou for your tutorial. Just subscribed. Just a suggestion to do something like a "code" div for everytime the chatbot outputs code, like chatgpt with a copy code button. Thanks!

[@erozwork]

It would be great if you could share some code on how we can add this as a widget in the bottom right corner of our websites.

[@tommys_codebase]

That would be great.
I'd surely look into that.

[@nycollasholanda5420]

Hello Tommy, my name is Nycollas, and I’m Brazilian. I was fascinated by the construction of your chatbot using the Gemini AI API, and I was following your video to help me create the connection with the API. However, I still haven’t succeeded. If it’s not too much to ask, I’d appreciate any tips or base files you could provide. My error is related to ‘SyntaxError: Cannot use import statement outside a module (at script.js:1:1),’ which indicates that I’m trying to use ES module import syntax (also known as ‘import’). I’ve tried various ways to solve this issue by adapting my code, but I haven’t been successful. Perhaps there’s a configuration in your package.json that could help resolve it.

[@tommys_codebase]

The link to the source code is in the description. It contains all the files I used. You can crosscheck configurations in the package.json and other relevant files.
If you still have any problems after that, don't hesitate to let me know.

[@aminamgad]

Can i deploy it , and it don't stop working?

[@tommys_codebase]

Yes, chapter 7 of the video is about the deployment.

[@sneharghasaha5744]

I dont know why but whenever I am deleting javascript.svg and counter.js there is occuring an internal servor error.....help me out

[@sneharghasaha5744]

*server

[@tommys_codebase]

Can you copy and paste the exact error text?

[@sneharghasaha5744]

​@@tommys_codebaseit worked thanks😀I just needed a small change and it got worked out.....Your video was way good and the javascript part did help me in my own project......Thanks❤️

[@datavoid]

is this free?

[@tommys_codebase]

If you're talking about the API, then yes it is free.