Complete Guide to Deploying Applications with Google AI Studio: Exporting Code + Practical Tutorial for Integrating Low-Cost APIs

Author's Note: This is a detailed guide on the complete workflow for deploying apps using Google AI Studio's Build mode. I'll show you how to export code to your local IDE and connect to low-cost API proxies like APIYI, significantly cutting your development costs.

Deploying apps from Google AI Studio is a hot topic for many developers. AI Studio's Build mode lets you quickly whip up React or Angular apps using natural language, but official API prices are pretty steep. Finding ways to lower those costs is the name of the game.

Core Value: By the time you finish this article, you'll have mastered the full deployment process for AI Studio apps. You'll learn how to export code to your local IDE and plug in low-cost API proxies, which can slash your dev costs by 50% to 80%.

Key Points for Deploying AI Studio Apps

Why export code and use a proxy API?

While developing directly within Google AI Studio is incredibly convenient, there's a major catch: you're paying full price for official APIs.

Gemini API Official Pricing (as of January 2026):

If your app handles a lot of API calls, those costs add up fast. By using an API proxy (like APIYI at apiyi.com or wentuo.ai), you can snag much better rates.

The kicker is: The AI Studio online editor doesn't let you change the API request URL. The workaround? Export the code to your local IDE (like Cursor or VS Code), tweak the config, and then deploy it.

AI Studio App Deployment Step 1: Creating an App in Build Mode

Entering Build Mode

1. Visit aistudio.google.com
2. Click "Build" in the left sidebar
3. Select "Create new app"
4. Describe the app you want to create using natural language

Example prompt:

Create an AI translation app where users can input text, 
call the Gemini API to translate it into a specified language, 
supporting translation between Chinese, English, Japanese, and Korean. 
The interface should be clean and modern, using a dark theme.

Build Mode Features

Build mode will automatically generate a complete project structure, including:

• geminiService.ts: Logic for API calls
• Component files: UI interface code
• Configuration files: Project dependencies and settings

Tip: The code generated in Build mode uses the GenAI TypeScript SDK to call the Gemini API. Once exported, you can easily modify it to use other API endpoints.

AI Studio App Deployment Step 2: Exporting Code Locally

The AI Studio online editor doesn't allow you to modify the API request address, which is the core reason we need to export the code.

Method 1: Download as ZIP

1. In the Build mode interface, click the "Download" button in the top right
2. Select "Download as ZIP"
3. Unzip to a local folder
4. Open the project using an IDE like Cursor or VS Code

Method 2: Push to GitHub

1. Click the GitHub icon in the top right
2. OAuth authorization is required for the first-time use
3. Select "Create new repository" or push to an existing one
4. Clone the repository locally for development

Method 3: Get Code Snippets

For simple apps, you can directly grab the API call code:

1. Click the "Get code" button
2. Select your language: Python / JavaScript / REST API
3. Copy the code into your project

Running the Exported Project Locally

# Enter the project directory after unzipping
cd your-ai-studio-app

# Install dependencies
npm install

# Start the development server
npm run dev

The project will now run locally, still using the original API Key and official endpoints for the time being.

AI Studio App Deployment Step 3: Connecting to a Low-Cost API Relay

This is the key step for cutting down your costs. Let's use APIYI (apiyi.com) as our example.

Locate the API Calling File

In your exported project, look for geminiService.ts or a similar file that handles API requests. The typical code structure looks like this:

// Original code - Using the official API
import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });

Switching to the Relay API

Relay services like APIYI are usually compatible with the OpenAI format. Here's how you'd modify it:

// Modified - Using the APIYI Relay
import OpenAI from "openai";

const client = new OpenAI({
    apiKey: "your-apiyi-key",  // Replace with your APIYI Key
    baseURL: "https://vip.apiyi.com/v1"  // APIYI endpoint
});

async function generateContent(prompt: string) {
    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",  // Model name stays the same
        messages: [{ role: "user", content: prompt }]
    });
    return response.choices[0].message.content;
}

// geminiService.ts - Fully modified version
import OpenAI from "openai";

// Configure the APIYI relay
const client = new OpenAI({
    apiKey: process.env.APIYI_KEY || "your-apiyi-key",
    baseURL: "https://vip.apiyi.com/v1"
});

// Example translation function
export async function translateText(
    text: string,
    targetLang: string
): Promise<string> {
    const systemPrompt = `You are a professional translator. Translate the text into ${targetLang}. Return only the translation result.`;

    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",
        messages: [
            { role: "system", content: systemPrompt },
            { role: "user", content: text }
        ],
        max_tokens: 2000
    });

    return response.choices[0].message.content || "";
}

// General chat function
export async function chat(
    messages: { role: string; content: string }[]
): Promise<string> {
    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",
        messages: messages as any,
        max_tokens: 4000
    });

    return response.choices[0].message.content || "";
}

Environment Variable Configuration

Create a .env file to store your API Key:

# .env file
APIYI_KEY=your-apiyi-api-key

Security Tip: Never hardcode your API Key directly in the code or commit it to a public repository. Always use environment variables to manage sensitive info.

AI Studio Deployment: API Relay Comparison

Why choose an API relay?

1. Cost Advantage: For the same volume of calls, costs can drop by 50%-80%.
2. Unified Interface: OpenAI format compatibility means you can switch models without rewriting your code.
3. Stable Access: Direct local connections mean you don't need a VPN.
4. Multi-Model Support: Use a single Key to call Gemini, GPT, Claude, and more.

Recommendation: Register at APIYI (apiyi.com) to get your API Key. The platform offers free trial credits and supports the entire Gemini model lineup.

AI Studio Deployment Step 4: Going Live

Once you've finished modifying the code, there are several deployment options available.

Option 1: Deploying to Vercel (Recommended)

# Install Vercel CLI
npm install -g vercel

# Log in and deploy
vercel login
vercel

Set the APIYI_KEY environment variable in the Vercel dashboard.

Option 2: Deploying to Cloud Run

AI Studio supports one-click deployment to Google Cloud Run:

1. Click the "Deploy" button in the top right corner.
2. Select your Google Cloud project.
3. Configure environment variables.
4. Confirm the deployment.

Note: Cloud Run deployments still use the AI Studio API Key by default. If you want to use a proxy API, we recommend exporting the code, modifying it, and then deploying it manually.

Option 3: Deploying to Your Own Server

# Build the production version
npm run build

# Run using a tool like PM2
pm2 start npm --name "ai-app" -- start

AI Studio Deployment FAQs

AI Studio Deployment: Complete Process Summary

Summary

Key takeaways for deploying applications with Google AI Studio:

1. Build Mode: Use natural language to quickly create React/Angular applications.
2. Code Export: Use ZIP downloads or GitHub pushes to move your project to local development.
3. API Replacement: Modify the baseURL and Key to connect via a proxy service.
4. Cost Optimization: Slash your costs by 50%-80% using proxies like APIYI.

AI Studio is a powerful online development platform. By combining its code export features with an API proxy, you've got the perfect setup for rapid prototyping and low-cost deployment.

We recommend using APIYI (apiyi.com) for Gemini API access. The platform offers free test credits, OpenAI-compatible interfaces, and unified calling for multiple models.

📚 References

1. Google AI Studio Build Mode Documentation: Official guide to using Build Mode

   • Link: ai.google.dev/gemini-api/docs/aistudio-build-mode
   • Description: Detailed introduction to Build Mode features and code export

2. Gemini API Pricing Page: Official API pricing information

   • Link: ai.google.dev/gemini-api/docs/pricing
   • Description: Latest pricing and free tiers for each model

3. AI Studio Deployment to Cloud Run Tutorial: Official Google Codelab

   • Link: codelabs.developers.google.com/deploy-from-aistudio-to-run
   • Description: Complete workflow for one-click deployment to Google Cloud

4. Guide to Running AI Studio Projects Locally: Community tutorial

   • Link: medium.com/lets-code-future/how-to-run-your-google-ai-studio-project-locally
   • Description: Detailed steps for local development after exporting code

Author: Technical Team
Technical Exchange: Feel free to join the discussion in the comments! For more resources, visit the APIYI (apiyi.com) technical community.