Guía completa para el despliegue de aplicaciones en Google AI Studio: Tutorial práctico para exportar código e integrar una API de bajo costo

Nota del autor: Guía detallada sobre el proceso completo de despliegue de aplicaciones con el modo Build de Google AI Studio. Aprenderás a exportar el código a tu IDE local e integrar servicios como APIYI y otros proveedores de bajo coste para reducir drásticamente los gastos de desarrollo.

El despliegue de aplicaciones desde Google AI Studio es un tema que interesa a muchos desarrolladores. El modo Build de AI Studio permite crear rápidamente aplicaciones React/Angular usando lenguaje natural, pero los precios de la API oficial pueden ser elevados. Por eso, saber cómo reducir costes es fundamental.

Valor principal: Al terminar de leer este artículo, dominarás el proceso completo de despliegue de aplicaciones de AI Studio, sabrás cómo exportar el código a tu IDE local y cómo conectar un intermediario de API económico, lo que puede reducir tus costes de desarrollo entre un 50% y un 80%.

Puntos clave del despliegue en AI Studio

¿Por qué exportar el código para usar un proxy de API?

Aunque el desarrollo online en Google AI Studio es muy cómodo, presenta un problema crítico: utiliza la API oficial a precio de mercado.

Precios oficiales de Gemini API (enero 2026):

Para aplicaciones que requieren un gran volumen de llamadas a la API, los costes aumentan rápidamente. Sin embargo, a través de intermediarios de API (como APIYI apiyi.com, wentuo.ai, etc.), se pueden obtener precios mucho más competitivos.

El problema es: el editor online de AI Studio no permite modificar directamente la dirección de las solicitudes API. La solución es exportar el código a un IDE local (como Cursor o VS Code), ajustar la configuración y luego desplegarlo.

Paso 1 del despliegue en AI Studio: Crear aplicaciones con el modo Build

Acceder al modo Build

1. Visita aistudio.google.com
2. Haz clic en "Build" en el menú de navegación de la izquierda.
3. Selecciona "Create new app".
4. Describe en lenguaje natural la aplicación que quieres crear.

Ejemplo de indicación:

Crea una aplicación de traducción con IA. El usuario introduce texto y se llama a la API de Gemini para traducirlo al idioma especificado. Debe soportar traducciones entre chino, inglés, japonés y coreano. La interfaz debe ser minimalista y moderna, con un tema oscuro.

Características del modo Build

El modo Build generará automáticamente la estructura completa del proyecto, que incluye:

• geminiService.ts: La lógica para las llamadas a la API.
• Archivos de componentes: El código de la interfaz de usuario (UI).
• Archivos de configuración: Las dependencias y ajustes del proyecto.

Sugerencia: El código generado por el modo Build utiliza el SDK de GenAI para TypeScript para realizar las llamadas a la API de Gemini. Una vez que lo exportes, podrás modificarlo fácilmente para apuntar a otros endpoints de API.

Paso 2 del despliegue en AI Studio: Exportar el código a local

El editor en línea de AI Studio no permite modificar la dirección de las solicitudes de la API; esta es la razón principal por la que necesitamos exportar el código.

Método de exportación 1: Descarga en ZIP

1. En la interfaz del modo Build, haz clic en el botón "Download" en la esquina superior derecha.
2. Selecciona "Download as ZIP".
3. Descomprime el archivo en una carpeta de tu ordenador.
4. Abre el proyecto con un IDE como Cursor o VS Code.

Método de exportación 2: Enviar a GitHub

1. Haz clic en el icono de GitHub en la esquina superior derecha.
2. Si es la primera vez que lo usas, deberás autorizar el acceso mediante OAuth.
3. Selecciona "Create new repository" o envíalo a un repositorio que ya tengas.
4. Clona el repositorio en tu entorno local para seguir desarrollando.

Método de exportación 3: Obtener fragmentos de código

Para aplicaciones más sencillas, puedes obtener directamente el código de la llamada a la API:

1. Haz clic en el botón "Get code".
2. Selecciona el lenguaje: Python / JavaScript / API REST.
3. Copia el código y pégalo en tu proyecto.

Cómo ejecutar el proyecto exportado en local

# Entra en el directorio del proyecto tras descomprimir el ZIP
cd tu-app-de-ai-studio

# Instala las dependencias
npm install

# Inicia el servidor de desarrollo
npm run dev

El proyecto se ejecutará localmente, utilizando todavía la API Key original y el endpoint oficial de Google.

Paso 3 de la implementación de aplicaciones en AI Studio: Conexión a un intermediario de API de bajo costo

Este es el paso fundamental para reducir costos. Tomaremos como ejemplo la conexión a APIYI (apiyi.com).

Localiza el archivo de llamada a la API

En el proyecto exportado, busca geminiService.ts o un archivo similar encargado de las llamadas a la API. La estructura típica del código suele ser así:

// Código original - Usando la 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" });

Modificación para el intermediario de API

Los intermediarios como APIYI suelen ser compatibles con el formato de OpenAI. Aquí tienes cómo modificarlo:

// Después de la modificación - Usando el intermediario APIYI
import OpenAI from "openai";

const client = new OpenAI({
    apiKey: "tu-clave-apiyi",  // Reemplaza con tu Key de APIYI
    baseURL: "https://vip.apiyi.com/v1"  // Punto de enlace de APIYI
});

async function generateContent(prompt: string) {
    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",  // El nombre del modelo se mantiene igual
        messages: [{ role: "user", content: prompt }]
    });
    return response.choices[0].message.content;
}

// geminiService.ts - Versión modificada completa
import OpenAI from "openai";

// Configuración del intermediario APIYI
const client = new OpenAI({
    apiKey: process.env.APIYI_KEY || "tu-clave-apiyi",
    baseURL: "https://vip.apiyi.com/v1"
});

// Ejemplo de función de traducción
export async function translateText(
    text: string,
    targetLang: string
): Promise<string> {
    const systemPrompt = `Eres un traductor profesional. Traduce el texto al ${targetLang} y devuelve solo el resultado de la traducción.`;

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

// Función 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 || "";
}

Configuración de variables de entorno

Crea un archivo .env para guardar tu clave API:

# Archivo .env
APIYI_KEY=tu-clave-apiyi

Consejo de seguridad: Nunca incluyas tu clave API directamente en el código ni la subas a repositorios públicos. Utiliza siempre variables de entorno para gestionar información sensible.

Comparativa de intermediarios de API para implementación en AI Studio

Comparativa de soluciones API: Oficial vs Intermediario

API Oficial de Google

Gemini 2.5 Pro $1.25 / $10.00 por millón de tokens

Gemini 3 Pro Preview $2.00 / $12.00 por millón de tokens

✗ Requiere VPN/Proxy para acceso ✗ Solo admite formato Google SDK ✗ Limitado a la serie Gemini ✗ Cuota gratuita restringida ✗ Costo elevado para gran escala

VS

Intermediario APIYI

Llamadas al mismo modelo Reduce costos un 50%-80%

Formato compatible OpenAI Un código para varios modelos

✓ Conexión directa sin VPN ✓ Compatible con OpenAI SDK ✓ Soporta Gemini/GPT/Claude, etc. ✓ Incluye cuota de prueba gratuita ✓ Apto para producción a gran escala

Plan recomendado: Exportar código y conectar a APIYI

Recomendamos APIYI: Intermediario de API de Modelos de Lenguaje Grandes estable, económico y con prueba gratuita

¿Por qué elegir un intermediario de API?

1. Ventaja en costos: Para el mismo volumen de llamadas, los costos pueden reducirse entre un 50% y un 80%.
2. Interfaz unificada: Gracias a la compatibilidad con el formato de OpenAI, puedes cambiar de modelo sin modificar tu código.
3. Acceso estable: Permite conexión directa sin necesidad de herramientas de red adicionales (VPN).
4. Soporte multimodelo: Con una sola clave puedes acceder a Gemini, GPT, Claude y muchos otros modelos.

Recomendación: Regístrate en APIYI (apiyi.com) para obtener tu clave API. La plataforma ofrece una cuota de prueba gratuita y es compatible con toda la serie de modelos Gemini.

Despliegue de aplicaciones en AI Studio Paso 4: Lanzamiento y despliegue

Una vez que hayas terminado de modificar el código, tienes varias opciones para desplegar tu aplicación.

Opción 1: Desplegar en Vercel (recomendado)

# Instalar Vercel CLI
npm install -g vercel

# Iniciar sesión y desplegar
vercel login
vercel

Configura la variable de entorno APIYI_KEY en el panel de control de Vercel.

Opción 2: Desplegar en Cloud Run

AI Studio permite el despliegue con un solo clic en Google Cloud Run:

1. Haz clic en el botón "Deploy" en la esquina superior derecha.
2. Selecciona tu proyecto de Google Cloud.
3. Configura las variables de entorno.
4. Confirma el despliegue.

Nota: El despliegue directo en Cloud Run sigue utilizando la API Key de AI Studio. Si necesitas usar la API de un servicio puente, te sugerimos exportar el código, modificarlo y luego realizar el despliegue de forma manual.

Opción 3: Desplegar en un servidor propio

# Construir la versión de producción
npm run build

# Ejecutar usando herramientas como PM2
pm2 start npm --name "ai-app" -- start

Preguntas frecuentes sobre el despliegue en AI Studio

Resumen del proceso completo de despliegue de aplicaciones en AI Studio

Resumen

Puntos clave para el despliegue de aplicaciones desde Google AI Studio:

1. Modo Build: Creación rápida de aplicaciones React/Angular mediante lenguaje natural.
2. Exportación de código: Descarga en ZIP o envío a GitHub para continuar el desarrollo de forma local.
3. Sustitución de API: Modificación de la baseURL y la Key para conectar con el servicio intermediario (puente).
4. Optimización de costes: Reducción de entre un 50% y un 80% en los costes mediante el uso de intermediarios como APIYI.

AI Studio es una potente plataforma de desarrollo en línea que, combinada con la exportación de código y los puentes de API, permite lograr la combinación perfecta: prototipado rápido y despliegue a bajo coste.

Se recomienda acceder a la API de Gemini a través de APIYI (apiyi.com). La plataforma ofrece cuotas de prueba gratuitas, una interfaz compatible con OpenAI y llamadas unificadas para múltiples modelos.

📚 Referencias

1. Documentación del modo Build de Google AI Studio: Guía oficial de uso del modo Build

   • Enlace: ai.google.dev/gemini-api/docs/aistudio-build-mode
   • Descripción: Introducción detallada a las funciones del modo Build y la exportación de código.

2. Página de precios de la API de Gemini: Información oficial sobre los precios de la API

   • Enlace: ai.google.dev/gemini-api/docs/pricing
   • Descripción: Precios actualizados y cuotas gratuitas para cada modelo.

3. Tutorial para desplegar de AI Studio a Cloud Run: Codelab oficial de Google

   • Enlace: codelabs.developers.google.com/deploy-from-aistudio-to-run
   • Descripción: Flujo completo para el despliegue en Google Cloud con un solo clic.

4. Guía para ejecutar proyectos de AI Studio localmente: Tutorial de la comunidad

   • Enlace: medium.com/lets-code-future/how-to-run-your-google-ai-studio-project-locally
   • Descripción: Pasos detallados para el desarrollo local tras exportar el código.

Autor: Equipo técnico
Intercambio técnico: Te invitamos a debatir en la sección de comentarios. Para más recursos, visita la comunidad técnica de APIYI en apiyi.com.