Vibe Coding with Gemini in Google AI Studio 🚀

Build, Refine, and Deploy an AI-Generated App

The AI era is changing the way developers build software. As a frontend developer, I’ve noticed that AI tools are no longer optional—they’re becoming an essential part of the workflow.

One interesting trend is Vibe Coding: generating and iterating on applications using AI with natural language prompts.

In this article, I’ll show how I used Gemini inside Google AI Studio to:

• Generate a working application from a single prompt
• Refine the UI using annotation tools
• Save the project directly to GitHub
• Deploy it to Vercel

Let’s walk through the process.

---

What You'll Do

In this tutorial you will:

• Build & Prompt
  Use Google AI Studio's Build Mode to generate a working app from a single prompt.

• Refine with System Instructions
  “Vibe check” the AI by defining a persistent coding style and persona.

• Save to GitHub
  Bootstrap a new repository directly from AI Studio.

• Deploy to Vercel
  Deploy the generated application quickly.

---

What You'll Learn

By the end of this tutorial you will learn:

• How to use Build Mode in Google AI Studio for rapid prototyping
• How System Instructions help maintain consistent AI behavior
• How to integrate Google AI Studio with GitHub
• How to deploy an AI-generated app to Vercel

---

What You'll Need

Before starting, make sure you have:

• Chrome Web Browser
• Google Account
• Gmail Account
• GitHub Account
• Vercel Account

---

Before You Begin

Open the Google Cloud Console and create or select a project.

👉 https://console.cloud.google.com/

Go to the Project Selector page and either:

• Select an existing project
• Or create a new one

This project will be used by Google AI Studio.

---

Brainstorming the Idea 💡

First, we brainstorm the idea we want to build.

In this example, I decided to build a Nutrition Tracker for bulking and cutting.

---

The Final Prompt

Once the idea is clear, we write a detailed prompt.

Here is the final prompt used in Google AI Studio Build Mode:

Build a Next.js web application for a Bulking & Cutting Nutrition Tracker
with a high-contrast "Dark Gym" aesthetic using Tailwind CSS.

Features:
- Macro-Centric Dashboard displaying real-time progress for Protein, Carbs, Fats, and Calories
- Dynamic goals based on Bulking or Cutting mode
- Goal Switcher to toggle between modes
- Efficiency Score (Protein per 100 Calories) for each food item
- Meal Logger using weight-based input (grams)
- Use a 5-item dummy food database
- Body Weight & Body Fat % tracker

All user data should be stored and synchronized using LocalStorage with React Hooks.

The UI should be mobile-first and look like a professional fitness application.

---

Implementing the Prompt

After submitting the prompt, Google AI Studio generates the application automatically.

Within minutes, we already have a working prototype.

This is where Vibe Coding shines: fast iteration with AI assistance.

---

Improve the Result with Annotation Mode ✨

To refine the UI, we can use Annotation Mode.

This feature allows you to draw directly on the app preview and attach instructions to specific UI elements.

Example improvements:

Draw:
Use the box tool to highlight the score counter.

Comment:

"Make this font larger, digital, and glitchy."

Sketch:
Point to the Play/Pause buttons.

Comment:

"Change these to glowing neon icons."

This allows you to refine your UI visually instead of writing long prompts.

📚 Reference:
https://codelabs.developers.google.com/vibe-code-with-gemini-in-aistudio#3

---

Save the Project to GitHub

Instead of downloading files and manually creating a repository, Google AI Studio integrates directly with GitHub.

Steps:

1. Connect your GitHub account
2. Create a new repository
3. Push the generated project automatically

This saves time and simplifies the workflow.

📚 Reference:
https://codelabs.developers.google.com/vibe-code-with-gemini-in-aistudio#5

---

Deploy the Application 🚀

You can deploy using:

• Google Cloud Platform
• Or other platforms

In this example, I used Vercel (free tier).

Steps:

1. Open Vercel
2. Import the GitHub repository
3. Follow the default configuration

📚 Reference:
https://codelabs.developers.google.com/vibe-code-with-gemini-in-aistudio#6

---

Demo Project

Here is the deployed demo project:

👉 https://iron-track-food-nutrition-apps.vercel.app/

---

Final Thoughts

Vibe Coding with Google AI Studio is a powerful way to rapidly prototype applications.

Instead of spending hours building a basic structure, you can:

• Generate a full app with a prompt
• Iterate visually with annotations
• Push code directly to GitHub
• Deploy instantly

For developers, AI should not replace our skills—but amplify productivity and creativity.

And honestly, it’s pretty fun.

---

References

Google AI Studio Codelab
https://codelabs.developers.google.com/vibe-code-with-gemini-in-aistudio

Comments

[Putu Adi]

let's discuss here!