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.tsenvexport 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.
