Google AI Studio now supports full-stack development, enabling you to build applications that go beyond client-side prototypes. With a server-side runtime, you can manage secrets, connect to external APIs, and build real-time multiplayer experiences.
Server-side runtime
Google AI Studio applications can now include a server-side component (Node.js). This lets you:
- Execute server-side logic: Run code that shouldn't be exposed to the client.
- Access npm packages: The Antigravity Agent can install and use packages from the vast npm ecosystem.
- Handle secrets: Securely use API keys and credentials.
Using npm packages
You don't need to manually run npm install. Simply ask the Agent to add
functionality that requires a package, and it will handle the installation and
import.
Example: > "Use axios to fetch data from the external API."
Managing secrets securely
With server-side code and secrets management, you can now build apps that interact with the world.
- Third-party APIs: Connect to services like Stripe, SendGrid, or custom REST APIs.
- Databases: Connect to external databases (e.g., via Supabase, Firebase, or MongoDB Atlas) to persist data beyond the session.
When building real-world apps, you often need to connect to third-party services (like Twilio, Slack, or databases) that require API keys. You can add keys manually with the following steps:
- Add a secret: Go to the Settings menu in Google AI Studio and look for the Secrets section.
- Store your key: Add your API keys or secret tokens here.
- 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.
When needed, the agent will also show a card in the chat prompting you to add keys whenever a new secret is needed or when a key new key is detected in the project's env variables.
Setting up OAuth
One key use case for secrets management is to set up OAuth to connect to other websites or apps. When your prompt includes instructions about connecting to a 3rd party app that requires OAuth authentication, the agent will provide instructions on how to set up OAuth for that application. These instructions will include the necessary callback URLs to configure your OAuth Application. You can also find the callback URLs under Integrations in the Settings panel.
Building multiplayer experiences
The full-stack runtime enables real-time collaboration features.
- Real-time state: You can ask the Agent to build features like "a live chat," "a collaborative whiteboard," or "a multiplayer game."
- Synced sessions: The server manages the state, allowing multiple users to interact with the same application instance in real-time.
Example prompt: > "Make this a multiplayer game where players can see each other's cursors."
Tips for testing multiplayer apps
You can test multiplayer mode in two ways before deploying your app.
- 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.
- 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.
Best practices
- Secrets security: Always use the Secrets manager for sensitive keys. Never hardcode them in your files.
- Separation of concerns: Keep your UI logic in the client-side framework (React/Angular) and your business logic/data handling on the server side.
- Error handling: Ensure your server-side code robustly handles errors from external API calls to prevent the app from crashing.