Guide complet de déploiement d’applications Google AI Studio : tutoriel pratique d’exportation de code + intégration d’API à bas prix

Note de l'auteur : Voici une explication détaillée du processus complet de déploiement d'applications avec le mode Build de Google AI Studio. Apprenez comment exporter votre code vers un IDE local et vous connecter à des proxys API à bas prix comme APIYI pour réduire considérablement vos coûts de développement.

Le déploiement d'applications via Google AI Studio est une question centrale pour de nombreux développeurs. Le mode Build d'AI Studio permet de créer rapidement des applications React/Angular en utilisant le langage naturel, mais les tarifs officiels de l'API sont élevés. Savoir comment réduire ces coûts est donc essentiel.

Valeur ajoutée : En lisant cet article, vous maîtriserez le flux complet de déploiement d'AI Studio, apprendrez à exporter le code vers votre IDE local et à intégrer un proxy API économique, ce qui peut réduire vos coûts de développement de 50 % à 80 %.

Points clés du déploiement d'applications AI Studio

Pourquoi exporter le code et utiliser un proxy API ?

Bien que le développement en ligne sur Google AI Studio soit pratique, il pose un problème majeur : vous utilisez l'API au tarif officiel.

Tarification officielle de l'API Gemini (janvier 2026) :

Pour les applications nécessitant un grand nombre d'appels API, les coûts s'accumulent vite. En passant par un proxy API (comme APIYI apiyi.com, wentuo.ai, etc.), vous pouvez bénéficier de tarifs bien plus avantageux.

Le problème : L'éditeur en ligne d'AI Studio ne permet pas de modifier directement l'adresse de la requête API. La solution consiste à exporter le code vers un IDE local (comme Cursor ou VS Code), à modifier la configuration, puis à déployer.

Déploiement d'une application AI Studio, Étape 1 : Créer une application en mode Build

Accéder au mode Build

1. Rendez-vous sur aistudio.google.com
2. Cliquez sur "Build" dans la navigation de gauche
3. Sélectionnez "Create new app"
4. Décrivez l'application que vous souhaitez créer en langage naturel

Exemple d'invite :

Créez une application de traduction IA : l'utilisateur saisit du texte, 
puis l'API Gemini est appelée pour le traduire dans la langue spécifiée. 
L'application doit supporter la traduction croisée entre quatre langues 
(chinois, anglais, japonais et coréen). 
L'interface doit être épurée et moderne, avec un thème sombre.

Caractéristiques du mode Build

Le mode Build génère automatiquement une structure de projet complète, comprenant :

• geminiService.ts : La logique d'appel à l'API.
• Fichiers de composants : Le code de l'interface utilisateur (UI).
• Fichiers de configuration : Les dépendances et les paramètres du projet.

Astuce : Le code généré par le mode Build utilise le SDK TypeScript GenAI pour appeler l'API Gemini. Une fois exporté, vous pouvez facilement le modifier pour utiliser d'autres points de terminaison (endpoints) API.

Déploiement d'une application AI Studio, Étape 2 : Exporter le code en local

L'éditeur en ligne d'AI Studio ne permettant pas de modifier l'adresse des requêtes API, c'est la raison principale pour laquelle nous devons exporter le code vers notre environnement local.

Méthode d'exportation 1 : Téléchargement ZIP

1. Dans l'interface du mode Build, cliquez sur le bouton "Download" en haut à droite.
2. Choisissez "Download as ZIP".
3. Décompressez l'archive dans un dossier local.
4. Ouvrez le projet avec un IDE comme Cursor ou VS Code.

Méthode d'exportation 2 : Pousser vers GitHub

1. Cliquez sur l'icône GitHub en haut à droite.
2. Une autorisation OAuth sera nécessaire lors de la première utilisation.
3. Choisissez "Create new repository" ou poussez le code vers un dépôt existant.
4. Clonez ensuite le dépôt localement pour poursuivre le développement.

Méthode d'exportation 3 : Obtenir des extraits de code

Pour les applications simples, vous pouvez récupérer directement le code d'appel à l'API :

1. Cliquez sur le bouton "Get code".
2. Choisissez le langage souhaité : Python / JavaScript / REST API.
3. Copiez le code dans votre propre projet.

Exécuter le projet exporté localement

# Entrez dans le répertoire du projet après la décompression
cd votre-app-ai-studio

# Installez les dépendances
npm install

# Lancez le serveur de développement
npm run dev

Le projet s'exécutera alors localement, en utilisant toujours votre clé API d'origine et les points de terminaison officiels.

Troisième étape du déploiement sur AI Studio : Accès à une passerelle API à bas prix

C'est l'étape cruciale pour réduire les coûts. Prenons l'exemple de l'accès à APIYI (apiyi.com).

Localiser le fichier d'appel API

Dans le projet exporté, trouvez geminiService.ts ou un fichier d'appel API similaire. La structure typique du code est la suivante :

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

Passer à l'API de la passerelle

Les passerelles comme APIYI sont généralement compatibles avec le format OpenAI. Voici comment effectuer la modification :

// 修改后 - 使用 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 || "";
}

Configuration des variables d'environnement

Créez un fichier .env pour stocker votre clé API :

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

Conseil de sécurité : Ne codez jamais votre clé API en dur dans le code et ne la soumettez pas à un dépôt public. Utilisez les variables d'environnement pour gérer les informations sensibles.

Comparaison des passerelles API pour le déploiement AI Studio

Pourquoi choisir une passerelle API ?

1. Avantage financier : Pour un même volume d'appels, le coût peut être réduit de 50 à 80 %.
2. Interface unifiée : Grâce à la compatibilité avec le format OpenAI, vous pouvez changer de modèle sans modifier votre code.
3. Stabilité d'accès : Connexion directe sans avoir besoin de passer par un VPN ou un proxy complexe.
4. Multi-modèles : Une seule clé permet d'appeler divers modèles comme Gemini, GPT, Claude, etc.

Recommandation : Inscrivez-vous sur APIYI (apiyi.com) pour obtenir votre clé API. La plateforme propose des crédits de test gratuits et supporte toute la gamme des modèles Gemini.

Déploiement de l'application AI Studio – Étape 4 : Mise en ligne

Une fois les modifications du code terminées, plusieurs options de déploiement s'offrent à vous.

Méthode 1 : Déploiement sur Vercel (recommandé)

# 安装 Vercel CLI
npm install -g vercel

# 登录并部署
vercel login
vercel

Configurez la variable d'environnement APIYI_KEY dans la console Vercel.

Méthode 2 : Déploiement sur Cloud Run

AI Studio permet un déploiement en un clic sur Google Cloud Run :

1. Cliquez sur le bouton "Deploy" en haut à droite.
2. Sélectionnez votre projet Google Cloud.
3. Configurez les variables d'environnement.
4. Confirmez le déploiement.

Remarque : Le déploiement sur Cloud Run utilise toujours la clé API d'AI Studio. Si vous souhaitez utiliser l'API via une passerelle (proxy), nous vous conseillons d'exporter d'abord le code pour le modifier, puis de le déployer manuellement.

Méthode 3 : Déploiement sur votre propre serveur

# 构建生产版本
npm run build

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

FAQ – Déploiement d'applications AI Studio

Résumé du processus complet de déploiement d'une application avec AI Studio

Conclusion

Points clés pour déployer une application avec Google AI Studio :

1. Mode Build : Création rapide d'applications React/Angular en utilisant le langage naturel.
2. Exportation du code : Téléchargement via ZIP ou push vers GitHub pour continuer le développement en local.
3. Remplacement de l'API : Modification du baseURL et de la Key pour passer par une passerelle (proxy).
4. Optimisation des coûts : Réduction des coûts de 50 % à 80 % en utilisant des passerelles comme APIYI.

AI Studio est une plateforme de développement en ligne extrêmement puissante. En combinant l'exportation de code et les passerelles API, vous pouvez obtenir le combo parfait : prototypage ultra-rapide et déploiement à faible coût.

Nous vous recommandons d'utiliser APIYI (apiyi.com) pour accéder à l'API Gemini. La plateforme propose des quotas de test gratuits, une interface compatible avec OpenAI et un appel unifié pour plusieurs modèles.

📚 Ressources

1. Documentation du mode Build de Google AI Studio : Guide d'utilisation officiel du mode Build

   • Lien : ai.google.dev/gemini-api/docs/aistudio-build-mode
   • Description : Présentation détaillée des fonctionnalités du mode Build et de l'exportation de code

2. Page des tarifs de l'API Gemini : Informations officielles sur les tarifs de l'API

   • Lien : ai.google.dev/gemini-api/docs/pricing
   • Description : Derniers tarifs et quotas gratuits pour chaque modèle

3. Tutoriel de déploiement d'AI Studio vers Cloud Run : Codelab officiel de Google

   • Lien : codelabs.developers.google.com/deploy-from-aistudio-to-run
   • Description : Processus complet pour un déploiement en un clic sur Google Cloud

4. Guide pour exécuter un projet AI Studio localement : Tutoriel de la communauté

   • Lien : medium.com/lets-code-future/how-to-run-your-google-ai-studio-project-locally
   • Description : Étapes détaillées pour le développement local après l'exportation du code

Auteur : L'équipe technique
Échanges techniques : N'hésitez pas à en discuter dans l'espace commentaires. Pour plus de ressources, vous pouvez visiter la communauté technique APIYI sur apiyi.com.