This page describes how you can use the Build mode in 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.
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 web app. By default, it will create a React web app but you can choose to create an Angular app in the Settings menu. You can view the code that gets generated by selecting the Code tab in the right-hand preview pane.
The following are files to note:
- geminiService.ts: This file contains the main logic for your app, from constructing prompts to calling the Gemini API and parsing its responses. You can edit the base prompt in this file or modify any component functionality directly or by interactively chatting with Gemini in Build mode. Note that the code in this file uses the GenAI TS SDK to interact with the Gemini API.
Continue building
Once Google AI Studio generates the initial code for your web application, you have two primary options for continuing your project: Build in AI Studio or Develop Externally.
Build in Google AI Studio
You can continue refining and expanding your application directly within the Google AI Studio environment:
- Iterate with Gemini: Use the chat panel in Build mode to ask Gemini to make modifications, add new features, or change the styling. For instance, you could ask, "Add a button that alerts the user" or "Change the color scheme to blue and white."
- Edit the Code Directly: Open the Code tab in the preview panel to make live edits. You can save your project to GitHub to utilize version control while developing.
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. This lets you use your familiar tools, build systems, and local version control practices to continue building beyond the initial prototype.
- 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:
- Annotation mode: Instead of writing code to change your app's appearance, Annotation Mode lets you highlight any part of your app's UI and describe the change you want. For example, you can select a component and type, "Make this button blue," or "Animate this image to slide in from the left." When you select Add to chat, a prompt is generated with a screenshot of the annotated app.
- Share your app: You can share your creations with others to collaborate or showcase your work.
- 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.
Deploy or archive your app
Once your application is ready, you can deploy it directly from AI Studio. Options for deployment include:
- Google Cloud Run: Deploy your application as a scalable service. Note that pricing for Google Cloud Run may apply based on usage.
- GitHub: Export your project to a GitHub repository to integrate it into your existing development and deployment workflows.
Limitations
This section outlines important limitations when using Build mode in Google AI Studio.
API Key security and exposure
- The code for shared apps is visible to anyone who views them. Never use a real API key directly in your app's code.
- By default, apps use a placeholder (e.g., process.env.GEMINI_API_KEY) for the API key. When a user runs your shared app within AI Studio, AI Studio acts as a proxy, replacing the placeholder with the end user's API key, ensuring your key remains private.
App visibility and sharing
- Apps are stored in Google Drive and inherit its permissions model, meaning they are private by default.
- Sharing Permissions: When you share an app with other users:
- Shared users can see the code and fork the app for their own use.
- If granted edit permission, shared users can modify the app's code.
Deployment outside 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.
Tool and feature support
- Local development import: Currently, you cannot develop apps locally with external tools and import them into AI Studio.
What's Next?
- See what others have built and get inspired by remixing an existing project in the App Gallery.
- Check out the YouTube playlist for a collection of AI Studio vibe coding tutorials to help you get started.