This post is for beginners. If you have an app idea and want to see it working in a browser today, without installing anything, Google AI Studio's Build mode is one of the quickest ways to get there. I will also cover the part most tutorials skip: what to do once the prototype works.
I build most of my production apps with Lovable and Supabase. I still use AI Studio for fast experiments, especially when the idea leans on Gemini features like reading images or generating them.
What Build mode is
Google AI Studio is Google's web workspace for the Gemini models. Build mode is the part that writes apps. You describe what you want, and an agent writes the code, shows you a live preview and lets you keep asking for changes.
According to Google's Build mode docs, a new web app gets:
- A React front end and a Node.js server side, so API calls and secrets stay on the server.
- Your Gemini API key set up automatically as a server-side secret, not in the browser code.
- Optional Firebase Firestore (a database) and Firebase Authentication, including Sign in with Google, which it can set up for you.
- Options to deploy to Google Cloud Run, sync with GitHub or download a ZIP.
It can also build native Android apps, but for a first project I would stick with a web app.
Step 1: Write a small, specific prompt
The biggest mistake I see with any AI builder is asking for the whole product on the first try. Ask for one screen that does one job. Here is a prompt you can adapt:
Build a web app called Fridge Chef.
One screen. The user uploads a photo of the inside of their fridge.
The app uses Gemini to list the ingredients it can see, then
suggests 3 simple recipes using mostly those ingredients.
Show the ingredient list as editable chips so the user can remove
wrong items, then regenerate recipes.
Clean, mobile-friendly layout. No login yet. No database yet.Notice what is not in there: accounts, payments, saved history, sharing. Those come later, if the core idea is worth it.
If you are stuck for ideas, Build mode has an "I'm Feeling Lucky" option and an App Gallery of projects you can remix. Remixing a gallery app is a good way to see how a working project is put together.
Step 2: Test it like a user, not like the builder
Once the preview loads, use it the way a stranger would. Try a blurry photo. Try a photo of something that is not a fridge. Try it on your phone.
When something breaks, describe what you saw, not what you think the fix is:
When I upload a dark photo, the ingredient list is empty and the
recipe section shows a spinner forever. Show a clear message
instead: "I couldn't see much in that photo. Try one with more
light." Do not change anything else."Do not change anything else" is a habit worth building. Agents like to tidy up nearby code, and that is how a working feature breaks while you were fixing a different one.
You can open the Code tab at any point to see the files. You do not need to understand them yet. It is still worth a look so the project does not feel like a black box.
Step 3: Add only what the test proved you need
After a few rounds of testing, you will know whether the idea is fun or useful. If it is, add the next smallest thing. Usually that is saving something:
Add Sign in with Google using Firebase Authentication.
After sign-in, save each recipe the user likes to Firestore,
linked to their user ID. Add a "Saved" tab that lists only that
user's saved recipes. Users must never see each other's data.Then test that last sentence yourself. Sign in with two different Google accounts and confirm neither can see the other's saved recipes. Never assume the AI got data access right.
What to do once the prototype works
This is the decision point. You have three realistic paths.
Path 1: Deploy from AI Studio to Cloud Run
Good for: sharing with a handful of testers, internal tools, demos.
Deploying gives you a real URL. Two things to know. Google's docs note that Cloud Run pricing may apply based on usage, so you need a Google Cloud billing setup. And apps that call paid Gemini models cost money every time someone uses them. Set a budget alert in Google Cloud before you share the link widely.
Path 2: Sync to GitHub and keep building
Good for: when you want to keep developing but also want a backup and a history of changes.
Build mode supports two-way GitHub sync. That means you can keep prompting in AI Studio while also opening the code in another tool, like Claude Code, for a careful review. It is also how you work with a teammate, since AI Studio does not support live collaborative editing.
Path 3: Rebuild on your main stack
Good for: when this is turning into a real product with payments, user roles and support.
This is often what I recommend to my cohorts. Treat the AI Studio app as a working spec. You now know exactly what screens exist, what the AI step does and what the edge cases are. Rebuilding that in Lovable with Supabase and Stripe is much faster than designing from scratch, and you end up on a stack you already know how to host, secure and charge for.
A prompt that helps with the handoff, run inside AI Studio:
Write a plain-English spec of this app for another developer.
List every screen, what the user can do on it, what data is
stored, which steps call Gemini and what each Gemini prompt is.
Include the edge cases we handled. No code.Limits to know before you start
- No live co-editing. Use GitHub if more than one person works on the app.
- No built-in file storage yet. Per the docs, apps can connect to external storage instead.
- Camera and microphone need permissions declared in the project's
metadata.json. If a camera feature silently fails, check that first. - A ZIP download needs your own key. If you export the code and host it elsewhere, set the Gemini API key in that hosting environment yourself.
- Shared apps count against your usage limits. A popular demo can use up your quota or your budget.
When AI Studio is not the right starting point
If your app is mostly forms, dashboards and payments with little AI in it, a builder like Lovable connected to Supabase will usually get you further. AI Studio shines when Gemini itself is the product: reading photos, documents or video, generating images, or talking back by voice.
Where to go next
If terms like server side, secret and database are still fuzzy, the free Intro to Vibe Coding course covers them in plain language. When your prototype is ready to become a real product, the recipes give you build specs for the rebuild.
What would have made it better?