How I Build Real Websites for Free Using Google AI Studio – Part 3 (AI Chatbot + GitHub + Fixes)

▶️ Watch Part 1 Here – https://youtu.be/UK2fqp4RJJg ▶️ Watch Part 2 Here – https://youtu.be/FauP0A2X6Ak In this video, we take things even further by adding a real AI chatbot powered by Gemini to our website — and most importantly, we do it the right way. You’ll learn how to build a chatbot inside Google AI Studio, connect it securely using a proxy function, and protect your API key so it’s never exposed in the browser. We’ll also cover how to add system instructions (guardrails) so your chatbot stays focused on your business, and how to deploy everything using GitHub and Netlify. On top of that, I’ll show you a simple way to troubleshoot one of the most common issues people face — the blank screen after deployment — and how to fix it quickly using Gemini. ▶️ List of all prompts used in this video: https://shorturl.at/owOcW ▶️ Tools Used in This Video: Google AI Studio: https://aistudio.google.com/ Gemini: https://gemini.google.com/app Netlify: https://www.netlify.com/ GitHub: https://github.com/ Word2Markdown: https://word2md.com 📺 Watch Other Ai Videos: 🎬 How to Create Slide Presentation for FREE with NotebookLM + Gemini → https://www.youtube.com/watch?v=cJZxyJr9pK0 🎬 Turn Research Into AI Video Lectures for FREE with Perplexity + NotebookLM → https://www.youtube.com/watch?v=ra6H6g4aG78 🎬 Build AI Dashboards in Minutes with Perplexity + Gemini Canvas Free → https://www.youtube.com/watch?v=vx5TsM-3Ptk 🎥 Watch my AI Playlist – Smarter With AI: Tools to Save Time & Make Money → https://www.youtube.com/playlist?list=PLHQX109djrY1xZtc_Tj0YEvtxMFNX6CKr ⏱️ Timestamps: 00:00 Intro 01:21 Creating a chatbot with Gemini 02:00 What is an API key (simple explanation) 02:55 Creating your API key in Google AI Studio 03:50 Common mistake: exposing your API key 04:40 Why this is a problem (cost & security) 05:35 Fixing it with a proxy function 06:51 Adding Environment Variables on Netlify 08:30 Adding system instructions (guardrails) 11:40 Deploying with GitHub + Netlify 14:30 Fixing the blank screen after deployment 18:40 Outro 💬 Let me know in the comments: What would you like me to build next using AI? 👍 If this helped, smash like & subscribe for more practical AI tutorials that help you build real things. 📩 Business inquiries → yuri.souza.mychannel@gmail.com 🔖 Tags: build websites with AI, google ai studio tutorial, no code ai chatbot tutorial, ai website builder, gemini api key, netlify deployment, github deployment, fix netlify blank screen