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 技術社區