Google AI Studio 部署应用完整指南：导出代码+接入低价 API 实战教程

作者注：详解 Google AI Studio Build 模式部署应用的完整流程，教你如何导出代码到本地 IDE，接入 API易等低价中转站 API，大幅降低开发成本

Google AI Studio 部署应用是很多开发者关心的问题。AI Studio 的 Build 模式可以用自然语言快速创建 React/Angular 应用，但 官方 API 价格较高，如何降低成本成为关键。

核心价值: 读完本文，你将掌握 AI Studio 应用的完整部署流程，学会导出代码到本地 IDE 并接入低价 API 中转站，开发成本可降低 50%-80%。

AI Studio 部署应用 核心要点

为什么要导出代码接入中转站 API？

Google AI Studio 在线开发虽然方便，但存在一个关键问题：使用的是官方原价 API。

Gemini API 官方定价（2026年1月）：

对于需要大量 API 调用的应用，成本会快速累积。而通过 API 中转站（如 API易 apiyi.com、wentuo.ai 等），可以获得更优惠的价格。

问题在于：AI Studio 在线编辑器无法直接修改 API 请求地址。解决方案是将代码导出到本地 IDE（如 Cursor、VS Code），修改配置后再部署。

AI Studio 部署应用 第一步：Build 模式创建应用

进入 Build 模式

1. 访问 aistudio.google.com
2. 点击左侧导航的"Build"
3. 选择"Create new app"
4. 用自然语言描述你要创建的应用

示例提示词：

创建一个 AI 翻译应用，用户输入文本后，
调用 Gemini API 翻译成指定语言，
支持中英日韩四种语言互译，
界面简洁现代，使用深色主题。

Build 模式特点

Build 模式会自动生成完整的项目结构，包括：

• geminiService.ts: API 调用逻辑
• 组件文件: UI 界面代码
• 配置文件: 项目依赖和设置

提示: Build 模式生成的代码使用 GenAI TypeScript SDK 调用 Gemini API，导出后可以轻松修改为其他 API 端点。

AI Studio 部署应用 第二步：导出代码到本地

AI Studio 在线编辑器无法修改 API 请求地址，这是我们需要导出代码的核心原因。

导出方式一：ZIP 下载

1. 在 Build 模式界面，点击右上角的"Download"按钮
2. 选择"Download as ZIP"
3. 解压到本地文件夹
4. 使用 Cursor、VS Code 等 IDE 打开项目

导出方式二：推送到 GitHub

1. 点击右上角的 GitHub 图标
2. 首次使用需要 OAuth 授权
3. 选择"Create new repository"或推送到现有仓库
4. 本地 clone 仓库进行开发

导出方式三：获取代码片段

对于简单应用，可以直接获取 API 调用代码：

1. 点击"Get code"按钮
2. 选择语言：Python / JavaScript / REST API
3. 复制代码到你的项目中

本地运行导出的项目

# 解压 ZIP 后进入项目目录
cd your-ai-studio-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

项目会在本地运行，此时仍使用原有的 API Key 和官方端点。

AI Studio 部署应用 第三步：接入低价 API 中转站

这是降低成本的关键步骤。以接入 API易 apiyi.com 为例。

找到 API 调用文件

在导出的项目中，找到 geminiService.ts 或类似的 API 调用文件。典型的代码结构如下：

// 原始代码 - 使用官方 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" });

修改为中转站 API

API易等中转站通常兼容 OpenAI 格式，修改方式如下：

// 修改后 - 使用 API易中转站
import OpenAI from "openai";

const client = new OpenAI({
    apiKey: "your-apiyi-key",  // 替换为 API易的 Key
    baseURL: "https://vip.apiyi.com/v1"  // API易端点
});

async function generateContent(prompt: string) {
    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",  // 模型名称保持不变
        messages: [{ role: "user", content: prompt }]
    });
    return response.choices[0].message.content;
}

// geminiService.ts - 完整修改版本
import OpenAI from "openai";

// 配置 API易中转站
const client = new OpenAI({
    apiKey: process.env.APIYI_KEY || "your-apiyi-key",
    baseURL: "https://vip.apiyi.com/v1"
});

// 翻译函数示例
export async function translateText(
    text: string,
    targetLang: string
): Promise<string> {
    const systemPrompt = `你是一个专业翻译，将文本翻译成${targetLang}，只返回翻译结果。`;

    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 || "";
}

// 通用对话函数
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 || "";
}

环境变量配置

创建 .env 文件存放 API Key：

# .env 文件
APIYI_KEY=your-apiyi-api-key

安全提示: 永远不要将 API Key 硬编码在代码中或提交到公开仓库。使用环境变量管理敏感信息。

AI Studio 部署应用 API 中转站对比

为什么选择 API 中转站？

1. 成本优势: 相同调用量，成本可降低 50%-80%
2. 接口统一: OpenAI 格式兼容，切换模型无需改代码
3. 访问稳定: 国内直连，无需科学上网
4. 多模型支持: 一个 Key 可调用 Gemini、GPT、Claude 等多种模型

推荐: 通过 API易 apiyi.com 注册获取 API Key，平台提供免费测试额度，支持 Gemini 全系列模型。

AI Studio 部署应用 第四步：部署上线

代码修改完成后，有多种部署方式可选。

方式一：部署到 Vercel（推荐）

# 安装 Vercel CLI
npm install -g vercel

# 登录并部署
vercel login
vercel

在 Vercel 控制台设置环境变量 APIYI_KEY。

方式二：部署到 Cloud Run

AI Studio 支持一键部署到 Google Cloud Run：

1. 点击右上角"Deploy"按钮
2. 选择 Google Cloud 项目
3. 配置环境变量
4. 确认部署

注意: Cloud Run 部署使用的仍是 AI Studio 的 API Key，如需使用中转站 API，建议先导出代码修改后再手动部署。

方式三：部署到自有服务器

# 构建生产版本
npm run build

# 使用 PM2 等工具运行
pm2 start npm --name "ai-app" -- start

AI Studio 部署应用 常见问题

AI Studio 部署应用 完整流程总结

总结

Google AI Studio 部署应用的核心要点：

1. Build 模式: 自然语言快速创建 React/Angular 应用
2. 代码导出: ZIP 下载或 GitHub 推送到本地开发
3. API 替换: 修改 baseURL 和 Key 接入中转站
4. 成本优化: 通过 API易等中转站降低 50%-80% 成本

AI Studio 是强大的在线开发平台，结合代码导出和 API 中转站，可以实现快速原型 + 低成本部署的完美组合。

推荐通过 API易 apiyi.com 获取 Gemini API 访问，平台提供免费测试额度、OpenAI 兼容接口和多模型统一调用。

📚 参考资料

1. Google AI Studio Build 模式文档: 官方 Build 模式使用指南

   • 链接: ai.google.dev/gemini-api/docs/aistudio-build-mode
   • 说明: 详细介绍 Build 模式功能和代码导出

2. Gemini API 定价页面: 官方 API 价格信息

   • 链接: ai.google.dev/gemini-api/docs/pricing
   • 说明: 各模型最新定价和免费额度

3. AI Studio 部署到 Cloud Run 教程: Google 官方 Codelab

   • 链接: codelabs.developers.google.com/deploy-from-aistudio-to-run
   • 说明: 一键部署到 Google Cloud 的完整流程

4. 本地运行 AI Studio 项目指南: 社区教程

   • 链接: medium.com/lets-code-future/how-to-run-your-google-ai-studio-project-locally
   • 说明: 导出代码后本地开发的详细步骤

作者: 技术团队
技术交流: 欢迎在评论区讨论，更多资料可访问 API易 apiyi.com 技术社区