Vollständiger Leitfaden zur Bereitstellung von Anwendungen in Google AI Studio: Code exportieren + Praxis-Tutorial zur Anbindung an kostengünstige APIs

Autoren-Hinweis: Detaillierte Erläuterung des vollständigen Prozesses zur Bereitstellung von Anwendungen im Google AI Studio Build-Modus. Erfahren Sie, wie Sie Code in eine lokale IDE exportieren, kostengünstige API-Proxy-Anbieter wie APIYI anbinden und die Entwicklungskosten erheblich senken.

Die Bereitstellung von Anwendungen mit Google AI Studio ist für viele Entwickler ein wichtiges Thema. Der Build-Modus von AI Studio ermöglicht es, React- oder Angular-Apps schnell per natürlicher Sprache zu erstellen. Da die offiziellen API-Preise jedoch recht hoch sind, ist die Kostensenkung ein entscheidender Faktor.

Kernvorteil: Nach der Lektüre dieses Artikels werden Sie den vollständigen Deployment-Prozess für AI Studio-Anwendungen beherrschen. Sie lernen, Code in Ihre lokale IDE zu exportieren und günstige API-Proxys einzubinden, wodurch die Entwicklungskosten um 50 % bis 80 % gesenkt werden können.

Kernpunkte der AI Studio Anwendungsbereitstellung

Warum den Code exportieren und eine Proxy-API anbinden?

Die Online-Entwicklung in Google AI Studio ist zwar komfortabel, hat aber einen entscheidenden Haken: Es wird die offizielle API zum Originalpreis verwendet.

Offizielle Gemini API-Preise (Stand: Januar 2026):

Für Anwendungen mit hohem API-Aufkommen summieren sich die Kosten schnell. Über API-Proxys (wie APIYI unter apiyi.com, wentuo.ai etc.) können Sie deutlich bessere Konditionen erhalten.

Das Problem: Der Online-Editor von AI Studio erlaubt keine direkte Änderung der API-Request-URL. Die Lösung besteht darin, den Code in eine lokale IDE (wie Cursor oder VS Code) zu exportieren, die Konfiguration anzupassen und anschließend bereitzustellen.

AI Studio App-Bereitstellung Schritt 1: App im Build-Modus erstellen

Den Build-Modus aufrufen

1. Besuchen Sie aistudio.google.com
2. Klicken Sie in der linken Navigation auf „Build“
3. Wählen Sie „Create new app“
4. Beschreiben Sie die App, die Sie erstellen möchten, in natürlicher Sprache

Beispiel-Eingabeaufforderung:

Erstelle eine KI-Übersetzungs-App. Wenn ein Benutzer Text eingibt, 
soll die Gemini API aufgerufen werden, um diesen in eine bestimmte Sprache zu übersetzen. 
Unterstütze die Sprachen Chinesisch, Englisch, Japanisch und Koreanisch. 
Das Interface soll schlicht und modern sein und ein Dark Theme verwenden.

Merkmale des Build-Modus

Der Build-Modus generiert automatisch eine vollständige Projektstruktur, bestehend aus:

• geminiService.ts: Logik für die API-Aufrufe
• Komponentendateien: Code für die Benutzeroberfläche (UI)
• Konfigurationsdateien: Projektabhängigkeiten und Einstellungen

Hinweis: Der im Build-Modus generierte Code nutzt das GenAI TypeScript SDK für die Aufrufe der Gemini API. Nach dem Export lässt sich dieser Code leicht für andere API-Endpunkte anpassen.

AI Studio App-Bereitstellung Schritt 2: Code lokal exportieren

Der Online-Editor von AI Studio erlaubt es nicht, die API-Anfrage-URL zu ändern. Dies ist der entscheidende Grund, warum wir den Code exportieren müssen.

Export-Methode 1: ZIP-Download

1. Klicken Sie im Build-Modus oben rechts auf die Schaltfläche „Download“
2. Wählen Sie „Download as ZIP“
3. Entpacken Sie die Datei in einen lokalen Ordner
4. Öffnen Sie das Projekt mit einer IDE wie Cursor oder VS Code

Export-Methode 2: Push zu GitHub

1. Klicken Sie auf das GitHub-Symbol oben rechts
2. Bei der ersten Nutzung ist eine OAuth-Autorisierung erforderlich
3. Wählen Sie „Create new repository“ oder pushen Sie den Code in ein bestehendes Repository
4. Clonen Sie das Repository lokal für die weitere Entwicklung

Export-Methode 3: Code-Snippets abrufen

Für einfache Anwendungen können Sie die API-Aufruflogik auch direkt kopieren:

1. Klicken Sie auf die Schaltfläche „Get code“
2. Wählen Sie die gewünschte Sprache: Python / JavaScript / REST API
3. Kopieren Sie den Code in Ihr eigenes Projekt

Das exportierte Projekt lokal ausführen

# Nach dem Entpacken der ZIP-Datei in das Projektverzeichnis wechseln
cd dein-ai-studio-app-ordner

# Abhängigkeiten installieren
npm install

# Entwicklungsserver starten
npm run dev

Das Projekt läuft nun lokal auf Ihrem Rechner und verwendet weiterhin den ursprünglichen API-Key sowie die offiziellen Endpunkte.

AI Studio App-Bereitstellung Schritt 3: Anbindung an einen kostengünstigen API-Proxy

Dies ist der entscheidende Schritt zur Kostensenkung. Nehmen wir die Anbindung an APIYI (apiyi.com) als Beispiel.

API-Aufrufdatei finden

Suchen Sie im exportierten Projekt nach geminiService.ts oder einer ähnlichen Datei für API-Aufrufe. Eine typische Codestruktur sieht wie folgt aus:

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

Auf Proxy-API umstellen

Proxy-Anbieter wie APIYI sind in der Regel mit dem OpenAI-Format kompatibel. Die Anpassung erfolgt so:

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

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

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

// 配置 APIYI中转站
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 || "";
}

Konfiguration der Umgebungsvariablen

Erstellen Sie eine .env-Datei, um den API-Key zu speichern:

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

Sicherheitshinweis: Hardcoden Sie niemals Ihren API-Key im Quellcode und übertragen Sie ihn nicht in öffentliche Repositories. Nutzen Sie Umgebungsvariablen für sensible Informationen.

AI Studio App-Bereitstellung: Vergleich der API-Proxys

API-Vergleich: Offiziell vs. Proxy

Offizielle Google API

Gemini 2.5 Pro $1.25 / $10.00 pro 1 Mio. Token

Gemini 3 Pro Preview $2.00 / $12.00 pro 1 Mio. Token

✗ Eingeschränkter regionaler Zugriff ✗ Nur Google SDK-Format ✗ Nur Gemini-Modellserie ✗ Begrenztes Gratis-Kontingent ✗ Hohe Kosten bei Skalierung

VS

APIYI Proxy

Gleicher Modellaufruf 50%-80% Kostenersparnis

OpenAI-kompatibles Format Ein Code für viele Modelle

✓ Direkte globale Verbindung ✓ OpenAI SDK-kompatibel ✓ Unterstützt Gemini/GPT/Claude etc. ✓ Gratis Testguthaben inklusive ✓ Ideal für Produktivumgebungen

Empfehlung: Code exportieren und an APIYI Proxy anbinden

APIYI: Stabiler & günstiger Proxy für Großes Sprachmodell-APIs, kostenlos testen

Warum einen API-Proxy wählen?

1. Kostenvorteil: Bei gleichem Volumen können die Kosten um 50 % bis 80 % gesenkt werden.
2. Einheitliche Schnittstelle: Dank OpenAI-Kompatibilität können Sie das Modell wechseln, ohne den Code anzupassen.
3. Hohe Stabilität: Direkte Verbindungen sorgen für zuverlässige Antwortzeiten ohne Umwege.
4. Multi-Modell-Support: Mit nur einem Key können Sie auf Gemini, GPT, Claude und viele weitere Modelle zugreifen.

Empfehlung: Registrieren Sie sich auf APIYI (apiyi.com), um Ihren API-Key zu erhalten. Die Plattform bietet kostenlose Testkontingente und unterstützt die gesamte Gemini-Serie.

AI Studio App-Bereitstellung Schritt 4: Deployment und Go-Live

Nachdem die Code-Änderungen abgeschlossen sind, stehen verschiedene Bereitstellungsmethoden zur Auswahl.

Option 1: Bereitstellung auf Vercel (empfohlen)

# Vercel CLI installieren
npm install -g vercel

# Einloggen und bereitstellen
vercel login
vercel

Setzen Sie die Umgebungsvariable APIYI_KEY in der Vercel-Konsole.

Option 2: Bereitstellung auf Cloud Run

AI Studio unterstützt die Ein-Klick-Bereitstellung auf Google Cloud Run:

1. Klicken Sie auf die Schaltfläche „Deploy“ oben rechts.
2. Wählen Sie Ihr Google Cloud-Projekt aus.
3. Konfigurieren Sie die Umgebungsvariablen.
4. Bestätigen Sie die Bereitstellung.

Hinweis: Die Bereitstellung über Cloud Run nutzt standardmäßig weiterhin den API-Key von AI Studio. Wenn Sie eine API über eine Zwischenstation nutzen möchten, empfiehlt es sich, den Code zuerst zu exportieren, anzupassen und dann manuell bereitzustellen.

Option 3: Bereitstellung auf dem eigenen Server

# Produktionsversion erstellen
npm run build

# Mit Tools wie PM2 ausführen
pm2 start npm --name "ai-app" -- start

Häufig gestellte Fragen (FAQ) zur AI Studio App-Bereitstellung

Vollständige Zusammenfassung des Deployment-Prozesses für AI Studio Anwendungen

Zusammenfassung

Die Kernpunkte für das Deployment von Anwendungen aus Google AI Studio:

1. Build-Modus: Schnelle Erstellung von React/Angular-Anwendungen mittels natürlicher Sprache.
2. Code-Export: ZIP-Download oder GitHub-Push für die lokale Weiterentwicklung.
3. API-Austausch: Anpassung von baseURL und Key zur Anbindung an einen API-Proxy.
4. Kostenoptimierung: Senkung der Kosten um 50 % bis 80 % durch Proxys wie APIYI.

AI Studio ist eine leistungsstarke Online-Entwicklungsplattform. In Kombination mit dem Code-Export und API-Proxys lässt sich die perfekte Mischung aus schnellem Prototyping und kosteneffizientem Deployment realisieren.

Wir empfehlen den Zugriff auf die Gemini API über APIYI (apiyi.com). Die Plattform bietet kostenlose Testkontingente, OpenAI-kompatible Schnittstellen und den einheitlichen Aufruf verschiedenster Modelle.

📚 Referenzen

1. Google AI Studio Build-Modus Dokumentation: Offizieller Leitfaden zur Nutzung des Build-Modus

   • Link: ai.google.dev/gemini-api/docs/aistudio-build-mode
   • Beschreibung: Detaillierte Vorstellung der Funktionen des Build-Modus und des Code-Exports

2. Gemini API Preisübersicht: Offizielle API-Preisinformationen

   • Link: ai.google.dev/gemini-api/docs/pricing
   • Beschreibung: Aktuelle Preise und kostenlose Kontingente für die einzelnen Modelle

3. AI Studio Bereitstellung auf Cloud Run Tutorial: Offizielles Google Codelab

   • Link: codelabs.developers.google.com/deploy-from-aistudio-to-run
   • Beschreibung: Vollständiger Prozess für das One-Click-Deployment in Google Cloud

4. Leitfaden zur lokalen Ausführung von AI Studio Projekten: Community-Tutorial

   • Link: medium.com/lets-code-future/how-to-run-your-google-ai-studio-project-locally
   • Beschreibung: Detaillierte Schritte für die lokale Entwicklung nach dem Code-Export

Autor: Technik-Team
Technischer Austausch: Diskutieren Sie gerne in den Kommentaren. Weitere Informationen finden Sie in der APIYI apiyi.com Technical Community.