Build Mode in Google AI Studio: Vibe-Coding a Full-Stack App, Step by Step

Google AI Studio Build mode turns a plain-English description into a working full-stack app, no boilerplate required. You type what you want, Gemini writes the frontend, the backend, and the wiring between them, and a live preview appears while you watch. The industry nickname for this is "vibe coding": you describe the vibe, review what comes back, and steer it with follow-up prompts instead of hand-writing every line. This walkthrough covers what Build mode is, the flow from prompt to running app, how to wire in Gemini features and data, how to export or deploy, and the limits worth knowing before you rely on it.

What you are actually working with

Build mode lives at aistudio.google.com/apps and is the "build an app" side of Google AI Studio, separate from the model playground where you test prompts. When you run a prompt here, AI Studio scaffolds a complete application rather than a single script. For web apps, the default, that means a client-side frontend (React by default) and a server-side Node.js runtime that can make secure API calls, talk to a database, and pull in npm packages. You can also switch the platform picker to build a native Android app in Kotlin and Jetpack Compose, previewed in a browser-based emulator.

Under the hood, Build mode is driven by the Antigravity Agent, the same agent harness behind Google Antigravity. It is more than a code generator: it keeps context across prompts, manages dependencies across multiple files, and verifies its own edits to cut down on the broken output you get from single-shot generation. The generation itself runs on Gemini, with fast models like Gemini 3.5 Flash handling code and Nano Banana producing visual assets on demand. If you want the wider tour of the tool, our Google AI Studio 101 guide covers the playground and Build mode side by side.

Before you start

You need a Google account and access to Google AI Studio, which is free to open. When you build an app that calls the Gemini API, AI Studio automatically sets up your GEMINI_API_KEY as a server-side secret, so there is no manual key wiring to get a prototype running. The key stays in the server runtime and is never shipped to the browser. Usage during building and sharing counts against your Gemini API limits, and paid models can incur costs, so a personal project on the free tier will hit rate limits well before it costs anything.

From prompt to running app

The core loop is short and repeats until the app is right. Here is the flow:

1. Describe the app. In the Build mode input box, write what you want in normal language: “a habit tracker with a weekly grid, a form to add habits, and a summary chart.” You can attach AI Chips to pull in specific capabilities like image generation or Google Maps, use the speech-to-text button to dictate, or hit “I’m Feeling Lucky” to have Gemini propose an idea. You can also open the App Gallery and pick Copy App to remix an existing project as your starting point.
2. Watch it scaffold. When you run the prompt, AI Studio generates the files and shows a live preview on the right. Open the Code tab in that pane to read exactly what it produced across the frontend and backend.
3. Iterate in the chat panel. Ask for changes in plain language: “make the header sticky,” “add a dark mode toggle,” “store habits in a database instead of memory.” The agent propagates each change across the relevant files rather than editing one in isolation.
4. Point at the UI with annotation mode. When words are clumsy, switch to annotation mode, highlight any part of the running interface, and describe the change right there. It is the fastest way to fix spacing, copy, or a specific control without describing where it lives.
5. Repeat until it holds together. Each pass builds on the last because the agent keeps context, so you refine rather than restart.

That describe, review, adjust rhythm is the whole point of Google AI Studio Build mode. You are directing an agent, not scaffolding by hand.

Wiring up Gemini features and data

A prototype gets interesting once it does real work, and Build mode leans on the wider Gemini ecosystem for that. You can ask the agent to add Gemini API calls for text, chat, or structured output, and it writes those calls server-side so your key stays protected. Image features route through Nano Banana, which our Nano Banana explainer breaks down in more detail.

For state and accounts, the agent can provision Firebase for you: Firestore for persistent data and Firebase Authentication for sign-in, including "Sign in with Google." You ask, and it handles the setup and writes the code that uses it. It can also connect to Google Workspace APIs such as Gmail, Sheets, Docs, Drive, and Calendar, configuring the OAuth flow automatically. If you need a secret beyond the Gemini key, add it in the Settings menu under Secrets, and it becomes available to your server-side code only. There is also a multiplayer capability for real-time collaborative apps, where the server runtime manages shared state.

Exporting and deploying

When the app is ready to leave the sandbox, you have a few paths:

• Deploy to Cloud Run. This gives your app a public URL as a scalable service, with your API key configured securely in the server environment. Cloud Run pricing applies based on usage, and the entry tier keeps you to a small number of services in a single region.
• Download a ZIP. Export the generated code and run it in your own editor or host. You will need to set the `GEMINI_API_KEY` environment variable yourself wherever you deploy, since the calls still run server-side.
• Push to GitHub. Create a repository and commit your latest changes so the project joins your normal workflow. Note that the integration commits out; it does not yet pull remote changes back in.

Sharing is separate from deploying: you can hand someone a link to use or fork your app, but their calls count against your usage limits.

What it is good at, and where it stops

Build mode is strong at getting from zero to a believable, interactive prototype fast, especially anything that shows off a Gemini capability. The Firebase and Workspace automation removes the parts of setup people usually stall on, and annotation mode makes UI tweaks painless. It is a genuinely good way to validate an idea or build an internal tool in an afternoon.

The limits are real, though. You cannot yet develop locally with your own tools and then import back into AI Studio, and GitHub sync is one-directional. Direct, configurable storage is still on the roadmap, so persistence beyond Firestore means bringing your own networked database. Generated code is a strong first draft, not an audited production system, so anything handling real users or sensitive data needs your review, your security hardening, and your own compliance work. And because vibe coding hides the plumbing, it rewards people who can still read the Code tab and catch when the agent has quietly done something you did not want.

Practical tips

Keep prompts concrete and scoped: one clear feature per iteration beats a paragraph of vague wishes. Open the Code tab early so you understand the shape of what you are shipping rather than trusting the preview alone. Move secrets into the Secrets panel instead of pasting them into prompts. Test share links in a private window, since privacy extensions can trigger a 403 for your viewers, and if a shared build misbehaves, prompting the agent to "fix any build issues with the current code" and resharing usually clears it. When an app matters, treat the export as the beginning of real engineering, not the end.

Frequently Asked Questions