Configuración de API key de Google Gemini en Angular 20

Potencia tu chat en Angular 20 conectándolo con Google Gemini dentro del ecosistema de Google. Aquí verás cómo crear y configurar la API key en Google AI Studio, organizar las variables en environments y comprender los límites del plan free para evitar sorpresas.

¿Qué es Google Gemini y cómo integrarlo con Angular 20?

Este modelo de Google permite crear un chat con un agente y aprovechar el ecosistema integrado: Firebase es de Google, Angular es de Google y la API key de Gemini también. La coherencia del stack simplifica la configuración y reduce fricción.

• Acceso desde: ai.studio.google.com.
• Probar el modelo: chatear con la IA de Gemini desde el estudio.
• Explorar opciones: modelo “Nano Banana” para generar y editar imágenes de forma creativa.
• Objetivo principal: crear y usar la API key en un proyecto de Angular 20.

¿Cómo crear y configurar la API key en Google AI Studio?

El flujo es directo y guiado. La clave es copiar la URL de la API y ligar la clave al proyecto correcto.

• Entrar a Google AI Studio y hacer clic en “get API key”.
• Copiar la API URL que indica a dónde apuntar las peticiones.
• Crear la clave con “create API key”.
• Elegir “create API key in existing project” para enlazarla con el proyecto existente de Firebase (por ejemplo: “Firebase Angular 20 Chat”).
• Copiar la API key generada.

¿Cómo definir variables en environments de Angular?

Organiza la configuración en environment para uso en desarrollo y producción.

// environment.ts
envexport const environment = {
  gemini: {
    apiUrl: 'PEGAR_API_URL',  // string copiado de Google AI Studio
    apiKey: 'PEGAR_API_KEY'   // string generado para el proyecto existente
  }
};

• Crear una entrada “Gemini” con dos claves: API URL y API key.
• Pegar los valores entre comillas porque son strings.
• Repetir la configuración en el archivo de producción: environment.prod.ts.

¿Cómo verificar uso y facturación con billing?

Para mantener control sin costos, selecciona el plan free y monitorea el consumo.

• Panel de uso: verás las estadísticas cuando empieces a hacer peticiones.
• Billing: puedes agregar información si necesitas subir límites.
• Recordatorio: en plan gratuito hay un límite de uso.

¿Qué límites tiene el plan free y qué modelos ofrece?

El nivel gratuito utilizado, llamado 2 flash, maneja cifras claras para planificar pruebas y demos sin costo.

• Tasa por minuto: quince respuestas por minuto o un millón de tokens por minuto.
• Tasa por día: doscientas respuestas por día.
• Si eliges otros modelos, los límites pueden ser más bajos.
• Con suscripciones pagas (nivel uno, dos, tres) accedes a modelos más avanzados y miles de peticiones por día.
• En nivel tres aparecen modelos de gama alta como VEO3, entre otros.

¿Qué habilidades y conceptos aplicas en este flujo?

• Configuración de credenciales y endpoints: copiar y usar la API URL y la API key.
• Gestión de environments en Angular 20: separar desarrollo y producción.
• Integración en ecosistema Google: Firebase, Angular y Gemini con una sola cuenta.
• Control de consumo: lectura de límites por minuto, por día y por tokens.
• Criterios de escalabilidad: plan free para pruebas, billing para ampliar.

¿Quieres que ampliemos con ejemplos de consumo de la API en un servicio de Angular o dudas sobre billing y límites? Deja tu comentario y avanzamos juntos.