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-garde...

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:    • AI Learning  

P.S. I greatly appreciate any feedback, please let me know what you think 😊

Join My Membership:    / @wanderloots  

💌 Sign up for my [free newsletter: Recalibrating](https://paragraph.xyz/@wanderloots.et...)
🧠 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    • Obsidian, Digital Gardening, & PKM  

LINKS (MY WORLD)
🧭 [Recalibrating Newsletter Home](https://paragraph.xyz/@wanderloots.et...)
🏔️To start reading from the beginning: [Recalibrating Newsletter Entry 1: What Recalibrating Means To Me](https://wanderloots.substack.com/p/1-...)
🌍 My [Website](https://wanderloots.com/)
📸 My [Print Shop](https://wanderloots.darkroom.com/) ✨

SOCIALS
🟣 [Farcaster](https://warpcast.com/wanderloots.eth)
📸 [Instagram](  / _wanderloots  )
📰 [Flipboard](https://flipboard.com/@_wanderloots)
📍 [Pinterest](https://www.pinterest.ca/wanderloots/)
🤖 [Reddit](  / _wanderloots  )

MY FAVOURITE TOOLS
😴 🤯 The [Waking Up App](https://dynamic.wakingup.com/guestpas...) (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