Build apps in Google AI Studio

This page describes how to use Google AI Studio to quickly build (or "vibe code") and deploy apps that test out the latest capabilities of Gemini like Nano Banana and the Live API. Google AI Studio now supports full-stack runtimes, allowing you to build robust applications with server-side logic, secure secrets management, and npm package support, all through natural language prompting.

Get started

Start vibe coding in Google AI Studio's Build mode. You can start building in a few ways:

  • Start with a prompt: In Build mode, use the input box to enter a description of what you want to build. Select AI Chips to add specific features like image generation or Google Maps data to your prompt. You can even say what you want using the speech-to-text button.
  • "I'm Feeling Lucky" button: If you need a creative spark, use the "I'm Feeling Lucky" button, and Gemini will generate a prompt with a project idea to get you started.
  • Remix a project from the Gallery: Open a project from the App Gallery and select Copy App.

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 created?

When you run your prompt, AI Studio creates a complete application. By default, it creates a full-stack environment that can include:

  • Client-side: A web frontend (React is the default).
  • Server-side: A Node.js runtime that allows for secure API calls, database connections, and npm package usage.

You can view the code that gets generated by selecting the Code tab in the right-hand preview pane. The Antigravity Agent intelligently manages multiple files across your stack, ensuring that changes are propagated correctly.

The Antigravity Agent

The Antigravity Agent is the main AI functionality within Google Antigravity and now the core components of the agent harness is powering the Build mode experience in Google AI Studio. It goes beyond simple code generation by maintaining context of your entire project, managing multiple files, and understanding complex instructions to build robust, full-stack applications.

Key capabilities include:

  • Context awareness: Maintains context of previous prompts and file states.
  • Multi-file management: Handles dependencies across multiple files.
  • Verified execution: Verifies code updates to reduce hallucinations.

Full-stack capabilities

Google AI Studio unlocks the power of the modern web ecosystem, allowing you to build more than just client-side prototypes.

  • Server-side Runtime & npm: Use the vast library of npm packages. The agent will automatically identify and install packages as needed for your app (e.g., specific libraries for data visualization or API clients). You can also request specific packages if desired.
  • Secrets Management: Securely store API keys and secrets in the Settings menu. These are accessible in your server-side code, keeping them safe from client-side exposure.
  • Multiplayer: Build real-time collaborative experiences directly within AI Studio. The server-side runtime manages the state and connections required for users to interact together.

Learn more about developing full-stack apps

Continue building

Once Google AI Studio generates the initial code for your application, you can continue refining it:

Build in Google AI Studio

  • Iterate with Gemini: Use the chat panel in Build mode to ask Gemini to make modifications, add new features, or change the styling.
  • Edit the Code Directly: Open the Code tab in the preview panel to make live edits.

Develop externally

For more advanced workflows, you can export the code and work in your preferred environment:

  • Download and develop locally: Export the generated code as a ZIP file and import it into your code editor.
  • Push to GitHub: Integrate the code with your existing development and deployment processes by pushing it to a GitHub repository.

Key features

Google AI Studio includes several features to make the building process intuitive and visual:

  • Create and iterate on full stack apps: Create full stack apps with just a prompt and iterate through chat or annotation mode. Annotation mode lets you highlight any part of your app's UI and describe the change you want.
  • Share and deploy your app: You can share your creations with others to collaborate or showcase your work. Then when your app is ready, deploy to Cloud Run.
  • App gallery: The App Gallery provides a visual library of project ideas. You can browse what's possible with Gemini, preview applications instantly, and remix them to make them your own.

Crate and iterate on full stack apps: quick blurb on runtime support, iterate with annotate mode Share and deploy - share you app within AI Studio or deploy to Cloud run Explore the app gallery

Deploy or archive your app

Once your application is ready, you can deploy it:

  • Google Cloud Run: Deploy your application as a scalable service. Pricing for Google Cloud Run may apply based on usage.
  • GitHub: Export your project to a GitHub repository.

Limitations

This section lists current limitations of build mode in Google AI Studio.

API Key security

  • Client-side: Never use real API keys directly in client-side code.
  • Server-side: Use the Secrets Management feature to handle sensitive keys securely in the server-side runtime.

Deployment outside Google AI Studio

  • While you can deploy your app to Cloud Run for a public URL, this setup will use your API key for all users' Gemini API calls.
    • JavaScript apps are run client side, so ensure API keys only have minimal access to prevent data leaks or misuse. For example, other File Search Stores from the same project may be accessible to users via this mechanism.
  • Secure external deployment: To run an app securely outside of AI Studio (e.g., after downloading the zip file), you must move the logic that uses the API key to a server-side component to prevent key exposure to end users. This is not needed if you deploy using Cloud Run.
  • Key exposure warning: Simply replacing the placeholder with a real API key in a client-side environment is strongly discouraged, as the key will become visible to any user.

Error when sharing apps

If you share your app and your end user runs into a 403 Access Restricted error when using the shared URL, it may be due to one of the following:

  • Browser extensions: Privacy extensions like Privacy Badger may be blocking the app. Disable the extension to avoid the error.
  • Build issues: There may be issues with the current code. Prompt the agent to "fix any build issues with the current code" and then reshare the URL.

What's next