spb/doc-api

1# Develop Full-Stack Apps in Google AI Studio23Google AI Studio now supports full-stack development, enabling you to build4applications that go beyond client-side prototypes. With a5server-side runtime, you can manage secrets, connect to external APIs, and build6real-time multiplayer experiences.78## Server-side runtime910Google AI Studio applications can now include a server-side component (Node.js).11This lets you:1213- **Execute server-side logic**: Run code that shouldn't be exposed to the client.14- **Access npm packages** : The [Antigravity Agent](https://antigravity.google/docs/agent) can install and use packages from the vast npm ecosystem.15- **Handle secrets**: Securely use API keys and credentials.1617### Use npm packages1819You don't need to manually run `npm install`. Simply ask the Agent to add20functionality that requires a package, and it will handle the installation and21import.2223**Example** : \> "Use `axios` to fetch data from the external API."2425## Manage secrets securely2627With server-side code and secrets management, you can now build apps that28interact with the world.2930### Gemini API key3132When you create a new app that uses the Gemini API, AI Studio automatically33configures your `GEMINI_API_KEY` as a server-side secret --- no manual setup34required. You can view this key in the **Secrets** panel in Settings. Your35app's Gemini API calls are made from server-side code using this key, so36it is never exposed in the browser.3738### Third-party API keys3940For other services, you can add API keys manually:4142- **Third-party APIs**: Connect to services like Stripe, SendGrid, or custom REST APIs.43- **Databases**: Connect to external databases (e.g., via Supabase, Firebase, or MongoDB Atlas) to persist data beyond the session.4445When building real-world apps, you often need to connect to third-party services46(like Twilio, Slack, or databases) that require API keys. You can add keys47manually with the following steps:48491. **Add a secret** : Go to the **Settings** menu in Google AI Studio and look for the Secrets section.502. **Store your key**: Add your API keys or secret tokens here.513. **Access in code**: The Agent can write server-side code that accesses these secrets securely (typically via environment variables), ensuring they are never exposed to the client-side browser.5253When needed, the agent will54also show a card in the chat prompting you to add keys whenever a new secret is55needed or when a key new key is detected in the project's env variables.5657### Firebase integration for database \& authentication5859Google AI Studio now makes it easy to add a database or authentication to your60app through a61[Firebase integration](https://firebase.google.com/docs/ai-assistance/ai-studio-integration).62The Antigravity Agent can provision and set up the following services for you63automatically:6465- **Firestore database**: a flexible, scalable NoSQL cloud database to store and sync data for client- and server-side development.66- **Firebase Authentication**: allow your users to securely sign in to your application using "Sign in with Google" flows.6768Simply ask the agent to "add a database to my app" or "set up Google Sign-in",69and it will handle the necessary configuration and code generation for you.7071Firebase lets you start for free, and optionally scale with a paid account72whenever you're ready for more quota or to use paid features.7374## Google Workspace APIs7576Google AI Studio lets you build apps that connect to Google Workspace APIs, so77your users can work with their real data: emails, spreadsheets, documents,78calendar events, and more, all within your app. You no longer need to set up a Google Cloud project, configure OAuth, or manage your API manually.7980### How it works8182You can add a Workspace integration in two ways:8384- **Describe it in the chat panel** : Just tell the agent what you want in the chat panel at the bottom. For example, *"Build an expense tracker that logs receipts to my Google Sheet"* or *"Create a dashboard that summarizes my unread Gmail messages."*85- **Select from the integrations panel** : Open the **Integrations** panel in the right-hand sidebar of Build mode and enable the Workspace app you want to connect.8687When you add a Workspace app, AI Studio automatically:88891. Wires up the necessary Google API for your app.902. Generates the server-side code to call the API.913. Adds a secure "Sign in with Google" flow so end users of your app can authorize access to their own data.9293### Supported apps9495The following Google Workspace apps are available:9697| App | What you can build |98|---|---|99| Google Calendar | Read, create, and manage events and calendars |100| Google Chat | Read and interact with conversations and group spaces |101| Google Docs | Create, read, update, and format documents |102| Google Drive | Organize, search, and manage files and folders |103| Google Forms | Create surveys, update questions, and retrieve responses |104| Gmail | Read, send, and manage email content |105| Google Keep | Manage notes, lists, and attachments |106| Google Meet | Schedule and manage video calls |107| Contacts | Sync and manage contacts |108| Google Sheets | Read, write, and format spreadsheet data |109| Google Slides | Create and modify presentations |110| Google Tasks | Create, manage, and organize tasks |111112### Authentication and permissions113114As the builder, you don't need to configure OAuth clients, manage credentials,115or set up a Google Cloud project. AI Studio handles all of this for you.116117Apps with Workspace APIs integrated use "Sign in with Google" to authenticate118end users. When a user opens your app, they are prompted to sign in and grant119the specific permissions your app needs (for example, read-only access to their120calendar, or the ability to edit a spreadsheet). Your app only accesses the121data of the person using it. Each user authorizes access to their own account.122123### Example prompts124125Here are a few ideas to get started with Workspace integrations:126127- *"Build an app that reads my Google Calendar and drafts prep emails in128  Gmail for each meeting."*129- *"Create a tool that takes a Google Doc and generates a 5-slide summary130  presentation in Google Slides."*131- *"Make an expense tracker where I upload a receipt, Gemini extracts the132  details, and it logs a new row in my Google Sheet."*133134### Set up OAuth135136One key use case for secrets management is to set up OAuth to connect to other137websites or apps. When your prompt includes instructions about connecting to a1383rd party app that requires OAuth authentication, the agent will provide139instructions on how to set up OAuth for that application. These instructions140will include the necessary callback URLs to configure your OAuth Application.141You can also find the callback URLs under **Integrations** in the Settings panel.142143## Build multiplayer experiences144145The full-stack runtime enables real-time collaboration features.146147- **Real-time state**: You can ask the Agent to build features like "a live chat," "a collaborative whiteboard," or "a multiplayer game."148- **Synced sessions**: The server manages the state, allowing multiple users to interact with the same application instance in real-time.149150**Example prompt**: \> "Make this a multiplayer game where players can see each151other's cursors."152153### Tips for testing multiplayer apps154155You can test multiplayer mode in two ways before deploying your app.1561571. Open your app in Google AI Studio Build mode in multiple tabs. When developing in Build mode, your app is in a dev container. Opening the app in multiple tabs will let you simulate multiple players using your app.1582. Share the app with others using the **Share** menu at the top right. then use the **Shared URL** from the **Integrations** tab of the **Share** menu to use the app with the players that you've shared your app with.159160## Best practices161162- **Gemini API calls** : Your `GEMINI_API_KEY` is automatically configured as a server-side secret. Make Gemini API calls from your server-side code using this key. You can view it in the **Secrets** panel.163- **Secrets security**: Always use the Secrets manager for sensitive keys. Never hardcode them in your files.164- **Separation of concerns**: Keep your UI logic in the client-side framework (React/Angular) and your business logic/data handling on the server side.165- **Error handling**: Ensure your server-side code robustly handles errors from external API calls to prevent the app from crashing.166167## What's Next?168169- [Build Apps in Google AI Studio](https://ai.google.dev/gemini-api/docs/aistudio-build-mode)170- [Deploying from Google AI Studio](https://ai.google.dev/gemini-api/docs/aistudio-deploying)171- [App Gallery](https://aistudio.google.com/apps?source=showcase)