How I Built A Mini-App With Google AI Studio 💡 Gemini 2.5 AI Coding 📝

Hi Friends, my name is Callum aka wanderloots. In today's video, I give a practical tutorial on how I used Google AI Studio (Gemini 2.5 Pro) to code a mini-app for me. 📝💡 This video walks through my full process of converting my Obsidian digital garden website into a Farcaster Mini-App using AI. Note: this tutorial shows you how to convert ANY website into a mini-app, illustrating how I use Google AI Studio (Gemini 2.5 Pro) to generate code for me AND teach me how to code along the way. Even if you are not interested in digital gardening or farcaster, this tutorial will still show you useful tips on how to Code with AI. Google AI Studio is an incredible powerful tool that has been helping me turn my ideas into reality. As a non-coder, I have been learning how to code using Gemini 2.5 Pro, enabled in Google AI Studio, while also using this same software to write code for me AND debug it. It's honestly amazing how much I've learned and built in such a short time, leveraging Gemini 2.5 Pro as one of the most powerful LLMs out there, especially for coding (and it's free!). I hope you enjoy! ✨ Here is the Code I generated today, along with a text tutorial to accompany this video: https://wanderloots.xyz/digital-garden/tutorials/how-to-convert-your-website-into-a-farcaster-mini-app-obsidian-digital-garden-example/ Here is my farcaster profile: https://warpcast.com/wanderloots.eth To learn more about how the AI tools I use, check out my AI Learning Playlist: https://www.youtube.com/playlist?list=PLWhMzDKA7vJ7k0CCHAhCNGXH1BKKEo_we P.S. I greatly appreciate any feedback, please let me know what you think 😊 Join My Membership: https://www.youtube.com/channel/UCFiU1vIpPD3lQltke_18m3A/join 💌 Sign up for my [free newsletter: Recalibrating](https://paragraph.xyz/@wanderloots.eth?referrer=wanderloots.eth) 🧠 Join my [Hypersub Exclusive Membership ] (coming soon) 🏡 Wander my Digital Garden https://wanderloots.xyz 📰 Try Ground News For Research: 40% discount https://check.ground.news/wanderloots Timestamp: 00:00 Intro To AI-Coding 00:54 Today's Video Outline & Goals 02:39 Phase 1: Today's Workflow - Obsidian Digital Garden Website 03:02 What Is An Obsidian Digital Garden? 04:06 Making Digital Garden Multiplayer With Farcaster 05:25 Mini-App Examples (Farcaster) & Building With AI 08:35 Tools Needed For Today 11:08 ngrok & Homebrew 12:51 Code Editor (VS Code) 13:08 Google AI Studio (Gemini 2.5 Pro) 13:53 Download Context Files (SDK Docs & LLMs Full) 14:35 Getting A Farcaster Account 15:29 Phase 2: Converting Existing Website Into A Mini-App With Google AI Studio 17:40 Add Context Files + GitHub Repository To Gemini 2.5 Pro 19:13 Important Note For Non-Digital Garden Repositories 19:42 Give Project Context Prompt To Gemini 2.5 Pro (Identify Template Files) 21:20 Setting Up Test Environment (VS Code + GitHub Desktop) 21:53 Create Mini-App Branch In GitHub 25:44 Add Meta Tags & Script To "head" 27:47 Add Script To "body" 28:51 Add Farcaster JSON File 29:53 Add Passthrough Code To eleventy.js file 31:33 Test Code With ngrok 36:52 Test Website Build With Farcaster Debugger Tool 38:12 Troubleshoot Errors With Gemini 2.5 Pro (very helpful) 38:32 Merge Test Branch To Main Website Branch 41:55 Replace ngrok URLs With Website Domain 44:00 Authenticate Domain & Farcaster Account 47:28 Add Farcaster Developer Tab (Test Main Domain) 48:43 Customize Mini-App Embed Preview (Home Page) 50:28 Customize Mini-App Embed Preview (All Notes) 52:10 Test Feed Embed Preview 53:05 Mini-App Ideas & Examples 54:10 Next Video: Custom Image Generator 55:04 Concluding Thoughts & Next Steps WATCH NEXT 🌱 Obsidian & Digital Gardens https://www.youtube.com/playlist?list=PLWhMzDKA7vJ7p50vW-oeZgKR2aDReZFW6 LINKS (MY WORLD) 🧭 [Recalibrating Newsletter Home](https://paragraph.xyz/@wanderloots.eth?referrer=wanderloots.eth) 🏔️To start reading from the beginning: [Recalibrating Newsletter Entry 1: What Recalibrating Means To Me](https://wanderloots.substack.com/p/1-what-recalibrating-means-to-me) 🌍 My [Website](https://wanderloots.com/) 📸 My [Print Shop](https://wanderloots.darkroom.com/) ✨ SOCIALS 🟣 [Farcaster](https://warpcast.com/wanderloots.eth) 📸 [Instagram](https://www.instagram.com/_wanderloots/) 📰 [Flipboard](https://flipboard.com/@_wanderloots) 📍 [Pinterest](https://www.pinterest.ca/wanderloots/) 🤖 [Reddit](https://www.reddit.com/user/_wanderloots) MY FAVOURITE TOOLS 😴 🤯 The [Waking Up App](https://dynamic.wakingup.com/guestpass/SC4914439) (use this link for a 30 day free trial) 📝 [Obsidian](https://obsidian.md/) (decentralized note-taking) 📹 [Adobe Suite](https://prf.hn/l/lQ9DwpA) (general creativity) EQUIPMENT USED 6. Camera [Sony A7iii](https://amzn.to/3seSHv6) 7. Lens [Sony F2 28 mm](https://amzn.to/3TiWCT2) 8. Tripod [K&F Concept](https://amzn.to/3soCKCP) 9. Lighting [Ubeesize Ring Light](https://amzn.to/3GD02Zy) 10. Main Lighting Neewer 660 PRO RGB: https://amzn.to/3CEcU2V