How to Build Web Apps with Google AI Studio

You can turn a plain-language description into a working web app in minutes with Google AI Studio. The Build mode handles code generation, full-stack setup, and even deployment so you focus on the idea instead of boilerplate.

This guide walks through the official process from start to a shareable app. You only need a Google account. No prior coding experience is required for basic apps. Developers can also use it to prototype faster before moving to a full IDE.

What Google AI Studio Build Mode Does

Google AI Studio Build mode lets you describe an app and receive a complete project. It creates client-side React code by default and a Node.js server runtime. The Antigravity Agent manages files, installs npm packages, and keeps context across changes. It verifies updates to reduce hallucinations.

You can add features such as image generation with Nano Banana, Google Maps data, Firebase authentication and Firestore, or real-time multiplayer. The system places API keys in server-side secrets so they stay hidden from the browser. Google Workspace integrations for Gmail, Sheets, Docs, Drive, and Calendar are also supported through automatic OAuth setup.

Start a New Project

Open aistudio.google.com and sign in with your Google account. Switch to the Build tab or go directly to the apps section at aistudio.google.com/apps. Choose the web platform if the picker appears. You can also select Android if you want a native Kotlin and Jetpack Compose project instead.

Type a clear description in the prompt box. Example: “Create a simple task tracker with add, complete, and delete buttons. Use a clean dark theme and store tasks in local state for now.” Select any AI Chips you need, such as image generation or Maps grounding, then click Build. You can speak your prompt using the speech-to-text button.

The agent generates files and shows a live preview on the right. Switch to the Code tab to inspect the output. You can also start from the App Gallery by choosing Copy App on an existing project, or import code from GitHub via the Add files menu. The “I’m Feeling Lucky” button generates a random project idea if you need inspiration.

Build and Iterate Step by Step

1. Enter your prompt and run Build. Wait for the preview to appear and the files to populate.
2. Test the basic functions in the preview pane. Click buttons, enter data, and check that the UI matches your request.
3. Open the chat panel and request changes in plain language. Example: “Add a priority dropdown and filter tasks by priority. Keep the dark theme.”
4. Use Annotation Mode if available. Highlight part of the UI and describe the exact change you want. This is faster than describing positions in text.
5. Check the Code tab after each change to confirm the agent updated the right files. The agent maintains context of previous prompts and the current file state.

The agent verifies updates and reduces common errors. If the preview fails to load or shows a blank screen, prompt “fix any build issues with the current code.” Then reshare or refresh the preview.

Add Full-Stack Features

Ask the agent to add Firebase. It provisions Firestore for data storage and Firebase Authentication with Google sign-in. The agent writes the connection code and configures OAuth automatically. You can request specific collections or security rules in follow-up prompts.

For secrets, open Settings and store any extra API keys. The server-side runtime can call external services securely. You can also request specific npm packages; the agent installs them automatically and updates package.json.

Multiplayer features work because the server manages state and connections. Describe the interaction you want, such as shared task lists for multiple users or real-time updates when someone adds an item. The runtime handles the necessary sockets or state sync.

Google Workspace connections let the app read or write to Sheets or Docs without extra setup. Prompt the agent to add the integration and describe the exact action, such as “export the task list to a new Google Sheet.”

Deploy and Share the App

When the app works in the preview, deploy it. Choose Cloud Run from the deploy options. AI Studio handles the container setup and injects your Gemini API key as a server-side secret. Cloud Run pricing applies based on usage. The deployed app receives a public URL.

You can also sync the project to a GitHub repository. Connect your account in Settings, push changes with AI-generated commit messages, and pull updates made outside AI Studio. This enables two-way sync so you can edit in your local IDE and bring changes back.

Download the project as a ZIP if you prefer to host it yourself. Set the GEMINI_API_KEY environment variable on your server so the server-side calls continue to work. The key is never included in client-side code.

Sharing creates a URL. Recipients can use the app, and API calls count against your limits. Paid models may incur costs. AI Studio warns you before sharing if costs are possible. By default apps stay private until you share them. Shared users can view the code and fork the project.

Tips for Better Results

Write specific prompts. Include layout, colors, required buttons, and data storage method. Mention “use React and Tailwind” if you want a particular stack. Add “make it responsive” for mobile support.

Iterate in small steps. Large requests can confuse the agent. Test after every change and confirm the preview updates correctly.

Use the App Gallery for inspiration and remix projects instead of starting from zero. Remixing gives you a working base that you can customize.

Watch for 403 Access Restricted errors when sharing. Disable privacy browser extensions such as Privacy Badger, or prompt the agent to fix build issues, then reshare the URL.

For Android apps, switch the platform picker. The process is similar but generates Kotlin and Jetpack Compose code with a browser-based emulator. You can install on a physical device via ADB and publish to the Play Store for testing. Firebase AI Logic and App Check are used instead of a raw API key.

Limitations to Know

Build mode works best for prototypes and internal tools. Complex custom backends may need external development after export. API keys stay server-side, but usage limits and potential costs apply when others use shared apps.

Existing apps created before May 14, 2026 may auto-upgrade Gemini integration to the recommended server-side approach on the next edit. Microphone, camera, and other Navigator APIs require an extra acknowledgement entry in metadata.json.

Conclusion

Google AI Studio Build mode removes most of the setup work for AI-powered web apps. Describe what you need, refine through chat or annotation, add Firebase or other services, then deploy to Cloud Run or export the code. The same workflow appears in related guides such as our post on building full-stack web apps with Google AI Studio.

Start with a small idea today. Open AI Studio, enter one clear prompt, and watch the preview appear. You can expand the app later or move the code to your own repository.

Sources

• Google AI for Developers: Build apps in Google AI Studio (https://ai.google.dev/gemini-api/docs/aistudio-build-mode)
• Google Blog: Vibe Code to production with Google AI Studio (blog.google)
• Google for Developers YouTube: Introducing the new vibe coding in AI Studio