Contenido del curso
Configura tu API Key de Gemini en Angular
Configurar la API Key de Google Gemini en un proyecto Angular 20 toma menos de cinco minutos y abre la puerta a integrar un agente conversacional dentro de tu aplicación. Esta guía te muestra cómo obtenerla desde Google AI Studio, dónde pegarla en tus environments y qué límites tiene el plan gratuito.
¿Qué es Google AI Studio y cómo accedo?
Google AI Studio es la plataforma oficial donde generas credenciales y pruebas modelos de Gemini antes de llevarlos a producción.
Entra a aistudio.google.com e inicia sesión con tu cuenta de Google. Una vez dentro, vas a ver dos cosas que llaman la atención: el chat directo con Gemini y el modelo NanoBanana, que está de moda para crear y modificar imágenes. Son divertidos, pero no es a lo que venimos.
Lo interesante aquí es que estás trabajando dentro del ecosistema Google completo: Firebase, Angular y Gemini comparten infraestructura, lo que simplifica la integración entre servicios.
¿Para qué sirve Google AI Studio? Es el panel donde generas tu API Key, gestionas el billing y consultas el uso de los modelos de Gemini en tiempo real.
¿Cómo creo la API Key de Gemini para mi proyecto Angular?
El flujo es directo y se conecta con un proyecto de Firebase existente, lo que mantiene todo bajo el mismo paraguas.
Desde AI Studio haz clic en Get API key y copia la URL que aparece, porque es el endpoint al que vas a apuntar tus peticiones desde Angular. Después pulsa Create API key y selecciona la opción Create API key in existing project. Si ya tienes un proyecto como Firebase Angular 20 Chat, te lo va a listar automáticamente y vinculará la key a ese workspace.
Guarda la key generada. Vas a usarla en el siguiente paso.
¿Dónde pego la API Key dentro de Angular 20?
La configuración vive en los archivos de environment, que son los que separan claves de desarrollo y producción.
Abre tu archivo de environment y agrega un objeto nuevo llamado gemini con dos propiedades:
apiUrl: la URL que copiaste desde AI Studio, entre comillas porque es un string.apiKey: la clave que generaste, también como string.La estructura queda parecida a esta:
typescript export const environment = { gemini: { apiUrl: 'https://generativelanguage.googleapis.com/...', apiKey: 'TU_API_KEY_AQUI' } };
Un detalle que muchos olvidan: replica la misma configuración en el environment de producción. Si no lo haces, tu app va a funcionar en local pero va a romperse al desplegarla.
¿Por qué guardar la API Key en environments? Porque separa configuraciones por entorno, evita exponer claves en el código fuente y facilita rotar credenciales sin tocar la lógica de la app.
¿Qué límites tiene el plan gratuito de Gemini?
El plan free alcanza para aprender, prototipar y construir proyectos personales sin pagar nada, pero conviene conocer los topes para no llevarte sorpresas.
Usando el modelo Gemini 2 Flash, que es el que aplica este flujo, los límites del nivel gratuito son:
Si necesitas más capacidad, en AI Studio puedes activar el billing y subir a niveles pagos. El nivel tres desbloquea modelos mucho más avanzados, incluso BO3, y miles de peticiones diarias. La sección de uso te muestra el consumo en tiempo real, aunque al recién crear la key va a aparecer en cero.
¿Qué modelos puedo usar según el plan?
La documentación oficial lista cada modelo con su límite específico. Modelos más potentes suelen tener cuotas más bajas en el plan gratuito, así que elegir el adecuado depende del balance entre calidad de respuesta y volumen de peticiones que necesites.
Para un chat sencillo en Angular, Gemini 2 Flash es la opción equilibrada: rápido, gratuito y con suficiente cuota para desarrollo activo.
¿Qué piezas tengo listas para construir el chat?
Con la API Key pegada en los environments y Firebase ya configurado desde clases anteriores, tienes los dos pilares del proyecto en su lugar.
De aquí en adelante toca escribir el servicio que llame a la API de Gemini desde Angular y conectarlo con la UI del chat. ¿Ya tienes tu key lista? Cuéntame en los comentarios qué modelo de Gemini piensas usar para tu proyecto.