One post tagged with "genkit"

In this hands-on guide, we'll go from an idea to a published website using modern AI tooling. We'll explore the concept of vibe coding, use Firebase Studio to build the app, deploy it, optionally add a custom domain via CloudMySite, and even set up monitoring and cleanup steps.

This is the full journey — from prompting to production. You can also check the contents of this blog live in below video:

🎧 What is Vibe Coding?​

Vibe coding is a new approach to software development where you:

1. Focus on expressing ideas
2. Let an AI (like Gemini) generate the code
3. Iterate with feedback prompts rather than typing every line

The term was popularized by Andrej Karpathy and has gained traction with tools like Replit Ghostwriter, Amazon Q Developer, and Gemini in Firebase Studio.

🎯 Why It's Needed​

1. Speed up prototyping
2. Lower barrier for non-developers
3. Encourage experimentation
4. Build from *what you want1. rather than how to build it

🛠️ How to Vibe Code​

1. 🗣️ Prompt the AI
   “Make a to-do list with reminders.”

2. 🧠 LLM generates code
   You get HTML, CSS, JavaScript, maybe even Firebase Firestore logic.

3. 👀 Preview & Tweak
   Ask: “Make the buttons blue”_ or _“Add swipe-to-delete”

4. 🚀 Deploy & Iterate
   Test live. Iterate fast.

🔥 Why It's Trending​

1. ⚡ Speed: You can build entire features in minutes
2. 🌀 Flow-first mindset: Create first, refactor later
3. 🌍 Lower barrier: Designers and beginners can ship real apps

📊 Real-World Adoption​

1. Y Combinator startups now build MVPs using vibe coding
2. Amazon Q Developer is being used in production at scale
3. Companies like Visa, Reddit, DoorDash are listing vibe coding as a required skill

🚀 Productivity Gains​

1. Up to 5× faster prototyping
2. You skip boilerplate — AI handles it
3. You focus on creativity, UX, and testing

⚠️ What to Watch Out For​

1. 🔐 Security: You must review AI-generated code for vulnerabilities
2. 🧩 Scalability: It's great for small apps, but larger systems still need architectural guidance
3. 🧾 Understanding: You may not know how every line of code works unless you dig in

🔥 Enter Firebase Studio: Your AI Coding Assistant​

Firebase Studio at https://studio.firebase.google.com allows you to build entire apps using Gemini by simply typing prompts.

Before we do that, let’s walk through the setup.

☁️ Setting Up Firebase and Google Cloud​

Step 1: Create a Google Account​

1. Visit https://accounts.google.com/signup
2. Complete the signup process

Step 2: Create a Google Cloud Project​

1. Go to https://console.cloud.google.com
2. Click Select project > New Project
3. Give it a name (e.g., vibe-demo-app)
4. Enable Billing if required (many Firebase features are free in Spark tier)

Step 3: Link to Firebase​

1. Visit https://firebase.google.com
2. Click Go to Console
3. Choose your Google Cloud project
4. Click Register App > choose Web icon

Done! Your Firebase app is now set up and connected.

🧠 Firebase Console vs Firebase Studio​

Use both together: build with Studio → monitor/scale in Console.

⚡ Build a Web App with Firebase Studio​

Step 1: Open Studio​

1. Go to https://studio.firebase.google.com
2. Click Start from scratch
3. Select your Firebase project

Step 2: Prompt Gemini​

Enter this:

Build a responsive personal portfolio website with sections for About, Projects, Contact. Use Firebase Hosting. Make it clean and modern.

Studio will:

1. Generate HTML/CSS/JS
2. Scaffold hosting settings
3. Show preview panel

Step 3: Customize and Test​

1. Edit content inline (like project names or images)
2. Use additional prompts like:

Add a dark mode toggle
Make the project cards responsive

Step 4: Deploy​

1. Click Deploy (top-right)
2. Studio will deploy to a default .web.app domain

Example: https://vibe-portfolio-demo.web.app

🌍 Connect a Custom Domain via CloudMySite​

CloudMySite.com offers free hosting — you only pay for the domain.

Steps:​

1. Go to https://cloudmysite.com
2. Search for and purchase a domain
3. From the dashboard, click Add Site
4. Point the domain to your Firebase Hosting target (e.g. CNAME to ghs.googlehosted.com)
5. Update Firebase Hosting settings in Console to add custom domain

✅ Within minutes, your Firebase-hosted app runs on your domain.

🔍 Monitor & Logs​

Firebase Console Monitoring:​

1. Go to console.firebase.google.com
2. Open Performance or Analytics tabs
3. Set up monitoring for slow loads, user sessions, errors

View Logs:​

1. In Firebase Console, go to Functions > Logs (if using backend)
2. Or view Hosting logs from Google Cloud Logging:

1. Visit console.cloud.google.com/logs
2. Filter by resource.type="firebase_hosting_site"

🔮 Explore Genkit (Optional)​

Genkit.dev is Google's framework for building AI-powered apps using local + cloud models.

Use it to:

1. Add AI search to your site
2. Use Gemini + embedding models
3. Run local inference or Vertex AI endpoints

Genkit can be integrated with Firebase Functions and deployed serverlessly.

🚀 Starting with a Firebase Studio Template​

Firebase Studio makes it incredibly easy to jumpstart your app with production-ready templates that cover a wide range of use cases. Whether you’re building a mobile app, an AI assistant, or a web dashboard, there’s a curated template to help you get moving quickly.

🔧 What’s Available?​

Firebase Studio includes a rich selection of pre-configured templates across different categories:

1. Backends (Node.js, Flask, Go, etc.)
2. AI Apps powered by Gemini and other models
3. Web Projects (Next.js, React, Vue)
4. Mobile templates (Flutter, Android, iOS)
5. Databases with Firestore, SQL, or external APIs
6. Sample apps and complete solution blueprints

You can start with a community-contributed template, an official Google-backed one, or even a blank template to roll your own from scratch.

🗂️ Templates are available directly in Firebase Studio or on GitHub.
🔗 Get started with a Firebase Studio template

🎯 What to Do Next​

1. Explore the generated code and config files
2. Add authentication, Firestore, or hosting as needed
3. Use prompts to modify UI, logic, or connect APIs
4. Preview and deploy with one click

Templates in Firebase Studio provide a perfect blend of speed and flexibility — letting you vibe code your way into a functional, scalable app.

🗑️ Delete App and Project​

Delete Firebase App:​

1. Go to https://console.firebase.google.com
2. Project settings > General > Click Delete this app

Delete GCP Project:​

1. Go to https://console.cloud.google.com/projectdelete
2. Select your project
3. Confirm deletion

🛑 Warning: this action is irreversible — data will be permanently lost.

✅ Recap​

1. Vibe coding lets you prototype apps through natural prompts
2. Firebase Studio + Gemini brings this to life
3. Deploy your app with a click
4. Use CloudMySite to add a real domain
5. Monitor usage, extend with Genkit, or clean up when done

From idea to live site — no IDE required.

🚀 Call to Action​

Whether you're experimenting with AI coding for the first time or deploying your tenth Firebase app, the right tools can save hours and spark creativity. If you're looking for a fast, free way to bring your site online with zero DevOps hassle, check out CloudMySite Genie.

✨ Use the AI-powered Genie at cloudmysite.com/genie to instantly generate and deploy your website — no coding required.

Want to connect your Firebase project to a custom domain or migrate your vibe-coded site to production? Genie takes care of that, too — just describe your goals, and it handles the rest.

👨‍💻 Ready to go from prompt to published site in minutes?
👉 Start with Genie

Ready to build your next idea? Try Firebase Studio + CloudMySite now and turn your prompt into a product.