Полное руководство по развертыванию приложений Google AI Studio: практическое руководство по экспорту кода и подключению недорогого API

Примечание автора: Подробный разбор полного процесса развертывания приложений в режиме Build в Google AI Studio. Расскажу, как экспортировать код в локальную IDE и подключить недорогие прокси-сервисы вроде APIYI, чтобы существенно снизить затраты на разработку.

Развертывание приложений из Google AI Studio — вопрос, который волнует многих разработчиков. Режим Build в AI Studio позволяет быстро создавать React/Angular-приложения на естественном языке, но официальные цены на API кусаются, поэтому вопрос снижения затрат становится ключевым.

Ключевая ценность: Прочитав эту статью, вы освоите полный процесс развертывания приложений AI Studio, научитесь экспортировать код в локальную IDE и подключать бюджетные API-шлюзы. Это поможет снизить расходы на разработку на 50–80%.

Ключевые моменты развертывания приложений в AI Studio

Зачем экспортировать код и подключать API через прокси?

Разработка прямо в Google AI Studio — это удобно, но есть один важный нюанс: вы используете официальный API по стандартным тарифам.

Официальные цены на Gemini API (январь 2026 г.):

Для приложений с большим количеством запросов расходы могут быстро вырасти. Использование прокси-сервисов (таких как APIYI apiyi.com, wentuo.ai и др.) позволяет получить более выгодные условия.

Проблема в следующем: в онлайн-редакторе AI Studio нельзя напрямую изменить адрес API-запроса. Решение — экспортировать код в локальную IDE (например, Cursor или VS Code), поправить конфигурацию и затем развернуть приложение.

Развертывание приложения из AI Studio. Шаг 1: Создание приложения в режиме 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. После экспорта его можно легко адаптировать для работы через другие эндпоинты.

Развертывание приложения из AI Studio. Шаг 2: Экспорт кода на локальный компьютер

Онлайн-редактор AI Studio не позволяет менять адреса API-запросов, и это главная причина, по которой нам нужно перенести код в локальную среду.

Способ 1: Загрузка ZIP-архива

1. В интерфейсе режима Build нажмите кнопку «Download» в правом верхнем углу
2. Выберите «Download as ZIP»
3. Распакуйте архив в папку на компьютере
4. Откройте проект в IDE (например, Cursor или VS Code)

Способ 2: Пуш в GitHub

1. Нажмите на иконку GitHub в правом верхнем углу
2. При первом использовании потребуется пройти авторизацию через OAuth
3. Выберите «Create new repository» или отправьте код в уже существующий репозиторий
4. Склонируйте репозиторий на локальную машину для дальнейшей разработки

Способ 3: Получение фрагментов кода

Если приложение простое, можно просто забрать код вызова API:

1. Нажмите кнопку «Get code»
2. Выберите нужный язык: Python / JavaScript / REST API
3. Скопируйте код в свой существующий проект

Локальный запуск экспортированного проекта

# После распаковки ZIP перейдите в директорию проекта
cd your-ai-studio-app

# Установите зависимости
npm install

# Запустите сервер для разработки
npm run dev

Приложение запустится локально. На данном этапе оно по-прежнему будет использовать ваш исходный API-ключ и официальные эндпоинты Google.

Развертывание приложения в AI Studio, шаг 3: Подключение недорогого API-шлюза

Это ключевой этап для снижения затрат. Разберем его на примере подключения к шлюзу APIYI (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-шлюз

Шлюзы вроде APIYI обычно совместимы с форматом OpenAI. Вот как нужно изменить код:

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

Настройка переменных окружения

Создайте файл .env для хранения вашего API-ключа:

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

Совет по безопасности: Никогда не прописывайте API-ключ прямо в коде и не фиксируйте его в публичных репозиториях. Используйте переменные окружения для управления конфиденциальными данными.

Сравнение API-шлюзов для приложений из AI Studio

Почему стоит выбрать API-шлюз?

1. Экономия: При том же объеме запросов затраты снижаются на 50–80%.
2. Единый интерфейс: Совместимость с форматом OpenAI позволяет переключать модели без переписывания кода.
3. Стабильность: Прямое соединение, не требующее использования VPN.
4. Мультимодельность: Один ключ позволяет работать с Gemini, GPT, Claude и другими моделями.

Рекомендация: Зарегистрируйтесь на APIYI (apiyi.com), чтобы получить API-ключ. Платформа предоставляет бесплатный тестовый лимит и поддерживает всю серию моделей Gemini.

Развертывание приложения из AI Studio. Шаг 4: Деплой и запуск

Когда код готов, есть несколько способов выкатить его в продакшн.

Способ 1: Деплой на Vercel (рекомендуется)

# Устанавливаем Vercel CLI
npm install -g vercel

# Авторизуемся и деплоим
vercel login
vercel

Не забудьте прописать переменную окружения APIYI_KEY в панели управления Vercel.

Способ 2: Деплой в Cloud Run

AI Studio поддерживает деплой в Google Cloud Run буквально одной кнопкой:

1. Нажмите кнопку «Deploy» в правом верхнем углу.
2. Выберите проект Google Cloud.
3. Настройте переменные окружения.
4. Подтвердите деплой.

Обратите внимание: при деплое через Cloud Run по умолчанию используется API-ключ от AI Studio. Если вы хотите использовать сторонний API-шлюз, лучше сначала экспортировать код, поправить конфиги и развернуть его вручную.

Способ 3: Развертывание на собственном сервере

# Собираем продакшн-версию
npm run build

# Запускаем через PM2 или аналогичные инструменты
pm2 start npm --name "ai-app" -- start

FAQ по развертыванию приложений из AI Studio

Полный цикл развертывания приложения в AI Studio

Итоги

Основные моменты при развертывании приложений из Google AI Studio:

1. Режим Build: быстрое создание React/Angular приложений с помощью промптов на естественном языке.
2. Экспорт кода: загрузка ZIP-архива или синхронизация с GitHub для локальной работы.
3. Замена API: настройка baseURL и ключа для работы через прокси-сервисы.
4. Оптимизация затрат: использование таких платформ, как APIYI, позволяет снизить расходы на 50–80%.

AI Studio — это мощная среда для онлайн-разработки. В связке с экспортом кода и API-прокси она становится идеальным инструментом для быстрого прототипирования и бюджетного запуска проектов.

Для доступа к Gemini API рекомендую использовать APIYI (apiyi.com). Ребята дают бесплатные лимиты для тестов, поддерживают OpenAI-совместимый интерфейс и позволяют удобно работать с разными моделями в одном месте.

📚 Справочные материалы

1. Документация по режиму Build в Google AI Studio: Официальное руководство по использованию режима 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
   • Описание: Детальная инструкция по локальной разработке после экспорта кода из студии.

Автор: Техническая команда
Обсуждение технологий: Будем рады пообщаться в комментариях. Еще больше материалов вы найдете в техническом сообществе APIYI на сайте apiyi.com