Guia completo para implantação de aplicativos no Google AI Studio: exportar código + tutorial prático de acesso a API de baixo custo

Nota do Autor: Guia detalhado sobre o fluxo completo de implantação de aplicativos no modo Build do Google AI Studio. Aprenda como exportar o código para uma IDE local, conectar-se a proxies de API de baixo custo como o APIYI e reduzir drasticamente os custos de desenvolvimento.

A implantação de aplicativos no Google AI Studio é um tópico de interesse para muitos desenvolvedores. O modo Build do AI Studio permite criar rapidamente aplicativos React/Angular usando linguagem natural, mas os preços da API oficial são elevados, tornando a redução de custos um fator crucial.

Valor Central: Ao ler este artigo, você dominará o fluxo completo de implantação de aplicativos do AI Studio, aprenderá a exportar o código para sua IDE local e a conectar-se a proxies de API econômicos, reduzindo os custos de desenvolvimento em 50% a 80%.

Pontos Chave da Implantação no AI Studio

Por que exportar o código e usar uma API via proxy?

Embora o desenvolvimento online no Google AI Studio seja conveniente, há um problema fundamental: ele utiliza a API oficial com preço de tabela.

Tabela de Preços Oficial da API Gemini (Janeiro de 2026):

Para aplicativos que exigem um grande volume de chamadas de API, os custos acumulam-se rapidamente. Ao utilizar um proxy de API (como APIYI em apiyi.com, wentuo.ai, etc.), você pode obter preços muito mais vantajosos.

O problema é: o editor online do AI Studio não permite modificar diretamente o endereço de requisição da API. A solução é exportar o código para uma IDE local (como Cursor ou VS Code), ajustar as configurações e então realizar a implantação.

Implantação de apps no AI Studio Passo 1: Criando um app no modo Build

Entrando no modo Build

1. Acesse aistudio.google.com
2. Clique em "Build" na barra de navegação à esquerda
3. Selecione "Create new app"
4. Descreva o app que você deseja criar usando linguagem natural

Exemplo de comando:

Crie um app de tradução por IA onde o usuário insere o texto, 
chama a API do Gemini para traduzir para o idioma especificado, 
suporta tradução mútua entre quatro idiomas (chinês, inglês, japonês e coreano), 
com uma interface limpa e moderna e tema escuro.

Características do modo Build

O modo Build gera automaticamente a estrutura completa do projeto, incluindo:

• geminiService.ts: Lógica de chamada da API
• Arquivos de componentes: Código da interface do usuário (UI)
• Arquivos de configuração: Dependências e configurações do projeto

Dica: O código gerado no modo Build usa o SDK GenAI para TypeScript para chamar a API do Gemini. Após exportar, você pode facilmente modificá-lo para outros endpoints de API.

Implantação de apps no AI Studio Passo 2: Exportando o código para o ambiente local

O editor online do AI Studio não permite modificar o endereço das requisições de API, e este é o principal motivo pelo qual precisamos exportar o código.

Método de exportação 1: Download via ZIP

1. Na interface do modo Build, clique no botão "Download" no canto superior direito
2. Selecione "Download as ZIP"
3. Descompacte na sua pasta local
4. Abra o projeto usando um IDE como Cursor ou VS Code

Método de exportação 2: Enviar para o GitHub

1. Clique no ícone do GitHub no canto superior direito
2. Na primeira vez, será necessária a autorização via OAuth
3. Selecione "Create new repository" ou envie para um repositório existente
4. Clone o repositório localmente para realizar o desenvolvimento

Método de exportação 3: Obter trechos de código

Para apps simples, você pode obter diretamente o código de chamada da API:

1. Clique no botão "Get code"
2. Escolha a linguagem: Python / JavaScript / REST API
3. Copie o código para o seu projeto

Rodando o projeto exportado localmente

# Após descompactar o ZIP, entre no diretório do projeto
cd seu-app-do-ai-studio

# Instale as dependências
npm install

# Inicie o servidor de desenvolvimento
npm run dev

O projeto rodará localmente, utilizando ainda a chave de API original e o endpoint oficial.

Implantação no AI Studio Passo 3: Conectando a um intermediário de API de baixo custo

Este é o passo crucial para reduzir custos. Vamos usar como exemplo a conexão ao APIYI (apiyi.com).

Localize o arquivo de chamada da API

No projeto exportado, procure por geminiService.ts ou um arquivo similar de chamada de API. A estrutura típica do código é a seguinte:

// Código original - Usando a API oficial
import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });

Mude para a API do intermediário

Intermediários como o APIYI geralmente são compatíveis com o formato da OpenAI. Veja como modificar:

// Após a alteração - Usando o intermediário APIYI
import OpenAI from "openai";

const client = new OpenAI({
    apiKey: "sua-chave-apiyi",  // Substitua pela sua Key do APIYI
    baseURL: "https://vip.apiyi.com/v1"  // Endpoint do APIYI
});

async function generateContent(prompt: string) {
    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",  // O nome do modelo permanece o mesmo
        messages: [{ role: "user", content: prompt }]
    });
    return response.choices[0].message.content;
}

// geminiService.ts - Versão modificada completa
import OpenAI from "openai";

// Configuração do intermediário APIYI
const client = new OpenAI({
    apiKey: process.env.APIYI_KEY || "sua-chave-apiyi",
    baseURL: "https://vip.apiyi.com/v1"
});

// Exemplo de função de tradução
export async function translateText(
    text: string,
    targetLang: string
): Promise<string> {
    const systemPrompt = `Você é um tradutor profissional. Traduza o texto para ${targetLang} e retorne apenas o resultado da tradução.`;

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

// Função de chat genérica
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 || "";
}

Configuração de Variáveis de Ambiente

Crie um arquivo .env para armazenar sua API Key:

# Arquivo .env
APIYI_KEY=sua-chave-api-apiyi

Dica de Segurança: Nunca deixe sua API Key exposta diretamente no código ou em repositórios públicos. Use variáveis de ambiente para gerenciar informações sensíveis.

Comparativo de Intermediários de API para Implantação no AI Studio

Por que escolher um intermediário de API?

1. Vantagem de Custo: Para o mesmo volume de chamadas, o custo pode ser reduzido em 50%-80%.
2. Interface Unificada: Compatibilidade com o formato da OpenAI, permitindo trocar de modelo sem alterar o código.
3. Estabilidade de Acesso: Conexão direta e estável, sem necessidade de configurações complexas de rede.
4. Suporte a Múltiplos Modelos: Com uma única chave, você pode acessar Gemini, GPT, Claude e vários outros modelos.

Recomendação: Registre-se no APIYI (apiyi.com) para obter sua API Key. A plataforma oferece saldo de teste gratuito e suporta toda a série de modelos Gemini.

Implantação de aplicativos no AI Studio Passo 4: Publicação

Com as alterações de código finalizadas, existem diversas opções de implantação disponíveis.

Opção 1: Implantar na Vercel (Recomendado)

# Instalar a Vercel CLI
npm install -g vercel

# Fazer login e implantar
vercel login
vercel

No console da Vercel, configure a variável de ambiente APIYI_KEY.

Opção 2: Implantar no Cloud Run

O AI Studio permite a implantação com um clique no Google Cloud Run:

1. Clique no botão "Deploy" no canto superior direito
2. Selecione o projeto do Google Cloud
3. Configure as variáveis de ambiente
4. Confirme a implantação

Observação: A implantação no Cloud Run ainda utiliza a chave de API do AI Studio. Caso precise usar uma API de um provedor intermediário, recomendamos exportar o código, fazer as alterações e, então, realizar a implantação manual.

Opção 3: Implantar em servidor próprio

# Gerar a versão de produção
npm run build

# Executar usando ferramentas como o PM2
pm2 start npm --name "ai-app" -- start

Perguntas Frequentes sobre Implantação no AI Studio

Resumo do Fluxo Completo de Implantação de Aplicações no AI Studio

Resumo

Pontos centrais para implantar aplicações do Google AI Studio:

1. Modo Build: Criação rápida de aplicações React/Angular usando linguagem natural.
2. Exportação de código: Download em ZIP ou push para o GitHub para continuar o desenvolvimento localmente.
3. Substituição de API: Modificar o baseURL e a Key para conectar a um serviço intermediário.
4. Otimização de custos: Redução de 50% a 80% nos custos através de intermediários como o APIYI.

O AI Studio é uma plataforma de desenvolvimento online poderosa. Combinando a exportação de código com intermediários de API, você consegue a união perfeita entre prototipagem rápida e implantação de baixo custo.

Recomendamos obter acesso à API do Gemini através do APIYI (apiyi.com). A plataforma oferece créditos de teste gratuitos, interface compatível com OpenAI e chamadas unificadas para diversos modelos.

📚 Referências

1. Documentação do modo Build do Google AI Studio: Guia oficial de uso do modo Build

   • Link: ai.google.dev/gemini-api/docs/aistudio-build-mode
   • Descrição: Introdução detalhada às funcionalidades do modo Build e exportação de código

2. Página de preços da API Gemini: Informações oficiais de preços da API

   • Link: ai.google.dev/gemini-api/docs/pricing
   • Descrição: Preços mais recentes e cotas gratuitas para cada modelo

3. Tutorial de implantação do AI Studio no Cloud Run: Codelab oficial do Google

   • Link: codelabs.developers.google.com/deploy-from-aistudio-to-run
   • Descrição: Fluxo completo de implantação em um clique no Google Cloud

4. Guia para rodar projetos do AI Studio localmente: Tutorial da comunidade

   • Link: medium.com/lets-code-future/how-to-run-your-google-ai-studio-project-locally
   • Descrição: Passos detalhados para o desenvolvimento local após a exportação do código

Autor: Equipe Técnica
Discussão Técnica: Sinta-se à vontade para discutir na seção de comentários. Para mais materiais, acesse a comunidade técnica APIYI em apiyi.com