Build an AI Habit Tracker with AI Studio

Use Google AI Studio Build mode to create a full-stack AI habit tracker app.

Introduction

30 Second Summary

Building good habits is hard enough without having to remember what you did yesterday. What if an app on your phone could track your streaks and cheer you on with personalized AI encouragement?

In this project, you will build a full-stack AI-powered habit tracker using Google AI Studio's Build mode. You'll create the entire application through natural language prompts, then deploy it live to the internet for anyone to use.

What You'll Build

A responsive web application with habit tracking, streak counting, Google Sign-In authentication, persistent data storage, and AI-powered motivational insights from Gemini.

By the end of this project, you'll have:

A React frontend and Node.js backend built entirely through natural language prompts in Google AI Studio's Build mode.
Firebase Authentication (Google Sign-In) and Firestore for user accounts and persistent habit data.
A live deployment on Cloud Run accessible from any device, with no credit card required.
Secret Mission: Add an AI-powered weekly report that analyzes your habit patterns and generates personalized improvement suggestions.

Are there any prerequisites?

None. This project runs entirely in the browser using Google AI Studio. All you need is a Google account and Chrome.

Set Up Google AI Studio

To build your habit tracker, you need a development environment that can handle a full-stack application. Google AI Studio's Build mode lets you create entire apps through natural language prompts, with no local installs required.

In this step, you'll sign in and get familiar with the interface you'll use throughout the project.

In this step, get ready to:

Sign in to Google AI Studio with your Google account.
Navigate to Build mode.
Explore the key areas of the interface.

Sign in to Google AI Studio

Open Chrome on your computer.
Navigate to aistudio.google.com.
Click Sign in with Google and select your Google account.
If this is your first time, you'll see a Terms of Service prompt. Read through and click Accept to continue.

You should now see the Google AI Studio home screen with options for prompting, building, and exploring the gallery.

Can't sign in?

Make sure you're using a personal Google account, not a work or school account. Some organization accounts restrict access to Google AI Studio.

Try opening an incognito window to rule out any browser extension conflicts.

help me sign in to Google AI Studio

Navigate to Build mode

Build mode is where you'll spend the entire project. It's the prompt-driven environment that generates full-stack applications from your descriptions.

In the left-hand navigation panel, click Build.

The screen splits into two main areas. On the left, you'll see a prompt input box where you describe what you want to build. On the right, a live preview panel will show your app once it's generated.

What is Build mode?

Build mode is Google AI Studio's vibe coding environment. You describe an app in plain English, and the Antigravity Agent generates a complete full-stack application with a React frontend and Node.js backend.

You iterate by chatting with the agent. Each prompt updates the code and refreshes the live preview automatically.

Explore the interface

Before you start building, take a moment to locate the four key areas you'll use throughout this project.

Find the chat/prompt input at the bottom of the left panel. This is where you type descriptions of what you want to build or change.
Look at the live preview on the right side. This is where your app appears in real time as the agent generates it.
Find the Code tab in the right-hand preview pane. This shows you all the generated files (React components, server code, and configuration).
Locate the Settings menu (gear icon). This is where secrets and integrations are managed.

Why does the Settings menu matter?

The Settings menu is where API keys and secrets are securely stored. They're accessible in server-side code but never included in client-side code. You won't need to manually configure anything here for the Gemini API because your GEMINI_API_KEY is set up for you automatically.

Your workspace is ready. Next up, you'll write your first prompt and watch the Antigravity Agent generate your habit tracker app from scratch.

Create Your Habit Tracker App

Your Google AI Studio environment is set up and ready to go. Now it's time to build your habit tracker app using nothing but a natural language prompt.

In traditional development, building a full-stack app means writing hundreds of lines of code across multiple files. With Google AI Studio's Build mode, you describe what you want and the Antigravity Agent generates the entire application for you.

In this step, get ready to:

Write an initial prompt to generate your habit tracker app.
Review the generated app in the live preview.
Iterate on the design using the chat panel.

Write your initial prompt

The quality of your prompt determines the quality of the generated app. A detailed prompt with specific features produces a much better result than a vague request.

Click into the input box at the bottom of Build mode.
Enter the following prompt to describe your habit tracker app:

Build a responsive habit tracker app. I want users to be able to create habits with custom names and emoji icons, mark habits as complete each day, and view their current streaks. Use a clean, mobile-friendly Material Design interface with a card-based layout for each habit.

Press Enter or click the send button to submit your prompt.

Once you run the prompt, you'll see the necessary code and files get generated, with a live preview of your app appearing on the right-hand side.

What is vibe coding?

Vibe coding is a development approach where you describe what you want in natural language and an AI agent writes the code for you.

Instead of writing React components and Node.js endpoints by hand, you focus on what you want the app to do. The Antigravity Agent handles the implementation details across multiple files.

Wait for the agent to finish generating your app. This may take a moment as it creates multiple files across your full-stack application.

Preview not loading?

If the live preview stays blank or shows an error after the agent finishes, try refreshing your browser tab. The preview occasionally needs a moment to render the generated app.

If you see the input box but no preview panel at all, make sure you are in Build mode (not the standard chat or prompt mode).

help me troubleshoot my AI Studio Build mode preview

Review the generated app

The Antigravity Agent has generated a full-stack application with a React frontend and a Node.js backend. Take a moment to review what it built.

Look at the live preview on the right side of your screen.
Confirm the app has a habit list view where habits will appear.
Check for an "add habit" button or flow that lets you create new habits.
Look for a way to mark habits as complete and see daily streaks.

What is the Antigravity Agent building?

Behind the scenes, the agent generated a React frontend with components for your habit list, habit cards, and add-habit form. It also created a Node.js server to handle backend logic.

The agent maintains context of your previous prompts and file states, handles dependencies across multiple files, and verifies code updates to reduce errors.

Select the Code tab in the right-hand preview pane to view the generated files.
Browse the file list to see the React components and server files the agent created.

Why check the Code tab?

Reviewing the generated code helps you understand the app's structure. You'll see how the agent organized your frontend components and backend logic into separate files.

You don't need to understand every line. The goal is to confirm the agent created a proper full-stack app with both client and server code.

Iterate on the design

Your first generated app is a starting point. The real power of Build mode is the ability to refine your app through conversation.

Click into the chat panel at the bottom of Build mode.
Enter a follow-up prompt to improve the design:

Improve the mobile responsiveness so habit cards take full width on small screens. Add a satisfying animation when a habit is marked as complete. Make the streak counter more prominent with a flame emoji next to it.

Press Enter to submit your iteration prompt.
Watch the live preview update as the agent applies your changes.

Why iterate instead of writing one big prompt?

Breaking your app into an initial prompt plus refinements gives you more control. You can see each change in real time and course-correct without starting over.

The Antigravity Agent remembers your entire conversation, so each new prompt builds on what came before.

Review the updated live preview to confirm your design changes took effect.
Try adding a habit in the preview to test the full flow.
If something doesn't look right, send another prompt describing what to fix.

Be specific in your prompts

Vague prompts like "make it look better" produce unpredictable results. Specific prompts like "increase card padding to 16px and change the header background to dark blue" give you exactly what you want.

Changes not appearing in the preview?

Make sure the agent has finished processing your prompt before judging the result. Look for the loading indicator to disappear.

If the preview looks the same after the agent finishes, try scrolling the preview or interacting with the app to trigger a re-render.

help me get my AI Studio design changes to show up

Your habit tracker now has a polished, mobile-friendly design with smooth interactions. Next up, you'll supercharge it with AI-powered motivational messages and habit suggestions from Gemini.

Add AI-Powered Habit Insights with Gemini

Your habit tracker has the core features: creating habits, tracking daily completions, and viewing streaks. But a truly smart tracker should do more than just record data.

In this step, you'll integrate the Gemini API to give your app AI-powered intelligence. Your tracker will motivate users when they complete habits and suggest new habits based on their existing ones.

In this step, get ready to:

Add Gemini API integration for motivational messages and habit suggestions.
Verify that all AI calls happen securely on the server side.
Refine the AI behavior to be streak-aware and habit-specific.

Prompt the agent to add Gemini AI features

The Gemini API lets your app generate personalized text responses. Instead of hard-coded messages, your habit tracker will produce unique motivational messages and tailored suggestions for each user.

In the chat panel at the bottom of Build mode, enter this prompt to add AI features to your app:

Add Gemini AI integration to my habit tracker. When a user marks a habit as complete, show a personalized motivational message generated by the Gemini API. Also add a daily habit suggestion feature that recommends new habits based on the user's existing habits. Make sure all Gemini API calls happen server-side in the Node.js backend to keep the API key secure.

What does this prompt do?

This prompt tells the Antigravity Agent to add two AI features: motivational messages on habit completion and daily habit suggestions. It also specifies that the Gemini API calls must happen server-side.

The agent automatically configures the GEMINI_API_KEY as a server-side secret. No manual configuration is required to start building.

Wait for the agent to finish generating the updated code. You'll see the files update in the Code tab and the live preview refresh on the right.

What is the GEMINI_API_KEY?

The GEMINI_API_KEY is a secret token that authenticates your app with Google's Gemini AI service. In Build mode, this key is set up for you automatically and stored as a server-side secret. It is never included in client-side code, keeping it safe from exposure.

Agent not updating the preview?

If the live preview doesn't refresh after the agent finishes, try clicking the reload icon in the preview panel. The agent sometimes takes a moment to propagate changes across multiple files.

If the agent responds with text but doesn't update the code files, send a follow-up message asking it to apply the changes to the code.

Help me debug why my AI Studio Build preview isn't updating after my prompt.

Verify the AI integration

Before iterating further, confirm that the AI features are working correctly and that the implementation follows security best practices.

In the live preview, mark one of your habits as complete.
Confirm that an AI-generated motivational message appears after you check off the habit.
Look for a habit suggestion feature in the app (this might appear as a button, a card, or a dedicated section).
Test the habit suggestions by clicking or tapping the feature to see AI-generated recommendations based on your existing habits.

Now confirm the Gemini API calls are happening securely on the server side.

Click the Code tab in the right-hand preview pane to view the generated code.
Browse the server-side files (the Node.js backend). Look for the Gemini API call. It should reference GEMINI_API_KEY in the server code only.
Check the client-side React files to confirm that no API key or direct Gemini API call appears in the frontend code.

Why must Gemini calls be server-side?

API keys in client-side code are visible to anyone who opens the browser's developer tools. By keeping the Gemini API calls in the Node.js backend, the key stays hidden from users.

The frontend sends a request to your backend server, which then calls Gemini and returns the result. This pattern protects your credentials while still giving users the AI-powered experience.

Not seeing motivational messages?

If marking a habit as complete doesn't show a message, the agent may have placed the feature behind a different UI interaction. Ask the agent: "Where do the motivational messages appear after I complete a habit?"

If you see an error instead of a message, the Gemini API may need a moment to initialize. Try completing the habit again after a few seconds.

Help me figure out why my Gemini AI messages aren't appearing.

Refine the AI behavior

The initial AI messages might be generic or too long. Iterating on the prompt is a core part of the vibe coding workflow. You'll ask the agent to make the messages shorter, more relevant, and streak-aware.

In the chat panel, enter this follow-up prompt to refine the AI behavior:

Refine the AI motivational messages: make them shorter (1-2 sentences max), specific to the habit type (e.g. exercise habits get fitness-related encouragement), and streak-aware. For example, if a user has a 5-day streak, say something like "5 days in a row! You're building real momentum." If it's their first day, welcome them differently than if they're on a long streak.

What makes a good iteration prompt?

Good iteration prompts are specific about what to change and include examples of what you want. Instead of saying "make it better," describe the exact behavior: the length, the tone, and the conditions that should affect the output.

This is prompt engineering in action. The more precise your instructions, the better the results.

Wait for the agent to update the code, then test in the live preview.
Mark a habit as complete and check that the motivational message is shorter and references your streak count.
If the messages still feel generic, send another follow-up in the chat panel with more specific guidance about what you want to see.

Keep iterating until it feels right

There's no limit to how many times you can refine. Each prompt builds on the agent's context from your previous requests. Try different angles: adjust the tone, change the length, or ask for emoji usage in the messages.

Messages still feel generic after refining?

If the messages don't reference streaks or habit types, the agent may not have updated the server-side prompt correctly. Ask it directly: "Show me the prompt you're sending to the Gemini API when a user completes a habit." Then iterate on that specific prompt text.

Help me improve my Gemini API prompts for better habit messages.

Your habit tracker now has real AI intelligence. It motivates users with personalized, streak-aware messages and suggests new habits tailored to their existing routines. Next up, you'll add user authentication and persistent storage so this data follows users across sessions.

Add Authentication and Persistent Storage

Your habit tracker now delivers AI-powered motivation and suggestions. There's one problem though. If you refresh the page, all your habits disappear.

In this step, you'll add user accounts and a real database so your habit data sticks around. The agent will set up Firebase Authentication for Google Sign-In and Cloud Firestore for persistent storage.

In this step, get ready to:

Add Firebase Authentication with Google Sign-In.
Connect Firebase Firestore so habit data persists across sessions.
Review the Firestore data model the agent creates.

Request Firebase integration

Right now your app stores habits in memory. Close the tab and everything is gone. You need two things to fix this: a way to identify each user (authentication) and a place to save their data (a database).

In the chat panel at the bottom of Build mode, type a prompt that asks the agent to add both features at once:

Add user authentication with Google Sign-In so each person gets their own account. Save all habit data to a database so it persists between sessions. Each user should only see their own habits, completions, and streaks.

Press Enter to send the prompt.

The Antigravity Agent will work for a moment, then update the live preview and Code tab with the new authentication and database features.

What is the agent doing behind the scenes?

The agent automatically provisions a Firebase project for your app. This includes enabling Firebase Authentication with the Google Sign-In provider and creating a Firestore database.

You don't need to configure OAuth clients, manage credentials, or set up a Google Cloud project. AI Studio handles all of this for you.

Wait for the agent to finish generating. You'll see the live preview update with a sign-in button.

Don't see a sign-in button?

If the live preview didn't update, give it a few seconds. Firebase provisioning happens automatically but may take a moment.

If the preview still shows no sign-in option after 30 seconds, send a follow-up prompt: "Make sure there's a visible Sign in with Google button on the main page."

Help me troubleshoot my Firebase integration in AI Studio Build mode

Test the authentication flow

The best way to confirm everything works is to go through the full user journey. You'll sign in, create data, and verify it survives a page refresh.

In the live preview, click Sign in with Google.
A Google Sign-In popup will appear. Select your Google account to sign in.
After signing in, create two or three test habits and mark at least one as complete.
Refresh the live preview page in your browser.
Confirm that your habits and completions are still there after the refresh.
Sign out of the app, then sign back in.
Verify that all your habit data is still tied to your account.

Why does the data survive a refresh now?

Before this step, habits lived in React's in-memory state. Refreshing the page reset that state to empty. Now the agent writes every habit and completion to Firestore, a cloud database. When the page reloads, it reads from Firestore and restores your data.

Data disappearing after refresh?

Make sure you completed the sign-in step. Without authentication, the app can't associate data with your account in Firestore.

If you signed in but data still resets, send this follow-up prompt to the agent: "Habit data is not persisting after refresh. Make sure all habits and completions are saved to Firestore immediately when created, and loaded from Firestore on page load."

Help me fix my Firestore data persistence issue

Review the data structure

Understanding how the agent organized your data in Firestore helps you extend the app later. The data model determines what queries are possible and how the app scales.

Click the Code tab in the right-hand preview pane.
Look for the files that handle Firestore reads and writes. These contain the database structure.
Identify the collections the agent created. You should see separate structures for habits, completions, and streaks.
Notice how each document is associated with a user ID. This is what keeps each person's data private.

What is a Firestore data model?

Firestore organizes data into collections (groups of similar items) and documents (individual records). Think of collections as folders and documents as files inside them.

For your habit tracker, the agent likely created a structure where each user has their own set of habit documents, completion records, and streak counters. The user's ID from Firebase Authentication links everything together.

Keep this structure in mind

The Secret Mission asks you to build a weekly report that pulls from this same data. Knowing where completions and streaks live in Firestore makes that much easier.

Your app now has real user accounts and persistent storage. Next up, you'll deploy it to a live URL that works on any device.

Deploy Your App to Cloud Run

Your habit tracker is working beautifully in the live preview. It has authentication, persistent storage, and AI-powered insights. There's one problem: only you can see it.

In this step, you'll deploy the app to Cloud Run using Google's free Starter Tier. This gives you a public URL that anyone can access from their phone or computer.

In this step, get ready to:

Deploy your app to Cloud Run using the free Starter Tier.
Access your live app from a mobile device.
Share your app with others via a shareable link.

Publish with Starter Tier

The Starter Tier lets you publish up to 2 full-stack applications without setting up a Google Cloud project or billing account. No credit card required.

Click the Publish button in the top right corner of AI Studio.
Click Get Started.
Click Publish App.

Deployment takes a moment. AI Studio is packaging your React frontend and Node.js backend into a Cloud Run service.

What is Cloud Run?

Cloud Run is Google's service for hosting web applications. It runs your app in a container and gives it a public URL. You don't need to manage any servers.

The Starter Tier is specifically for builders who are just getting started. It deploys your first two apps at no cost, in a single Cloud Run region.

Deployment failed?

If you see an error during deployment, try clicking Publish App again. Intermittent deployment errors can occur and usually resolve on retry.

If you already have 2 deployed apps on the Starter Tier, you must unpublish one before deploying a new one.

help me troubleshoot my Cloud Run deployment in Google AI Studio

Access your live app

Once deployment is complete, AI Studio provides a Cloud Run URL. This is your app's public address on the internet.

Copy the Cloud Run URL that AI Studio displays after deployment.
Open this URL on your phone's browser to test the mobile experience.
Tap Sign in with Google on your phone.
Create a habit and mark it as complete to verify everything works on a real mobile device.

Why test on mobile?

The live preview in AI Studio simulates a mobile layout, but it's not the same as using the app on an actual phone. Testing on a real device confirms your touch targets, scrolling, and sign-in flow all work correctly.

Sign-in not working on mobile?

Make sure you're using Chrome on your phone. Some mobile browsers block third-party cookies needed for Google Sign-In.

If you see a blank page, wait a few seconds. The first load after deployment can be slower while Cloud Run starts your container.

help me fix Google Sign-In on my deployed Cloud Run app

Share your app

Your deployed app is live, but you can also share it directly from AI Studio so others can try it out.

In AI Studio, click the Share menu at the top right.
Copy the Shared URL from the Integrations tab of the Share menu.
Send this link to a friend or open it in a different browser.
Have the other person sign in with their own Google account to confirm each user gets their own data.

Is your API key safe when sharing?

Your API key is stored as a server-side secret and is never included in client-side code. When you share your app, other users can use it, but they cannot see your API key.

When sharing, API calls count toward your usage limits. AI Studio will give you a heads-up before you share if your app could incur costs.

Friend seeing a 403 error?

Privacy browser extensions like Privacy Badger can block the shared app. Ask your friend to disable privacy extensions and try again.

If the error persists, return to Build mode and prompt the agent to fix any build issues with the current code, then reshare the URL.

help me fix the 403 Access Restricted error on my shared AI Studio app

Secret mission

AI-Powered Weekly Habit Report

Your habit tracker already motivates users in the moment. But what about the bigger picture? In this secret mission, you'll add a Weekly Report feature that uses Gemini to analyze 7 days of habit data and deliver personalized insights, strengths, and actionable improvement suggestions.

Clean Up Your Resources

This project runs entirely on free tiers. The Starter Tier does not charge for your Cloud Run deployment, Firebase stays on its free Spark plan, and Gemini API usage is within the free tier.

Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

1 Cloud Run service (deployed via Starter Tier, free).
1 Firebase project with Firestore database and Authentication (auto-provisioned, free Spark plan).
Gemini API usage (free tier).

Keep everything running

No action needed. Choose this if you're still actively building or want your app to stay live.

Your app stays live at its Cloud Run URL. The Starter Tier does not charge for idle time.
Firebase free tier (Spark plan) covers casual use at no cost.
Gemini API free tier covers the usage generated by a personal project.
The Starter Tier allows up to 2 deployed apps. If you want to deploy another app in the future, you may need to delete this one first.

Pause - I'll come back to this later

No action needed. The Starter Tier does not charge for idle time, and Firebase free tier has no ongoing costs.

Your app remains deployed but costs nothing while idle.
When you're ready to continue, return to Google AI Studio, select your app from the Apps page, and pick up where you left off.

Delete - I don't want to use this again

Remove your deployed app to free up your Starter Tier slot. This deletes the Cloud Run service.

In Google AI Studio, go to your Apps page.
In the left menu, select Apps.
Hold the pointer over the app you want to delete.
Click the trash can icon on the right-side of the row to delete the app.

What about the Firebase project?

The Firebase project was auto-provisioned by AI Studio as part of your app. It remains on the free Spark plan and does not incur charges. Deleting the app from AI Studio removes the Cloud Run service.

The Firebase project itself (Firestore data, Authentication config) may persist at no cost. Since it was provisioned automatically and you never set up a separate Firebase console project, there is no additional cleanup required.

That's a Wrap!

You just went from zero to a deployed, AI-powered full-stack application without installing a single SDK!

You've learned how to:

Built a complete habit tracker with a React frontend and Node.js backend using only natural language prompts in Google AI Studio Build mode.
Integrated the Gemini API for AI-powered motivational messages and habit suggestions, with the API key secured as a server-side secret.
Added Firebase Authentication (Google Sign-In) and Firestore for persistent user data, then deployed to Cloud Run with a public URL accessible from any device.
Added an AI-powered weekly habit analysis report with personalized improvement suggestions powered by Gemini.

Ready to quiz yourself?