Conecta Gemini a tu app Angular con un flujo claro y fiable: define interfaces, configura el service, envía historial para dar memoria, ajusta seguridad y temperatura, y prueba todo con almacenamiento en Firestorm. Aquí verás cómo se arma la integración de extremo a extremo sin trucos ni atajos, lista para producción.
¿Cómo se prepara el service de Angular para la API de Gemini?
Para consumir la API, se organiza primero la capa de tipos e implementación. Arriba están las interfaces de petición y respuesta; debajo, la lógica del service con HttpClient y variables de entorno para la URL y la key. Luego se construye el cuerpo del mensaje con contexto, historial y el nuevo mensaje, y se hace el post.
¿Qué incluyen las interfaces de petición y respuesta?
- La petición exige un contenido con un array de objetos tipo content de Gemini.
- Cada mensaje define un rol: usuario o modelo.
- El contenido viaja como texto en las parts.
- Parámetros de control: máximo de tokens y temperatura.
- Configuración de seguridad: categorías y umbral de bloqueo.
- La respuesta añade, además del texto, métricas como recuento de tokens.
¿Cómo se construye el contexto y el historial?
- Se define un mensaje del sistema con el tono: asistente útil y amigable, en español, especialista en preguntas generales, programación y tecnología, con tono profesional pero cercano.
- Se envían el historial previo y el último mensaje: sin historial no hay memoria y el modelo solo vería el último contexto.
- Un helper convierte el historial interno al formato de Gemini: roles a user/model y parts con el texto.
¿Qué configuración y seguridad conviene ajustar?
Ajustar bien estos parámetros mejora calidad y control de la salida.
- Temperatura: se usa 0.7 para algo más creativo; 1 es más creativo, 0 más conservador.
- Máximo de tokens: limita la extensión de la respuesta.
- Seguridad por categorías y umbrales: se aplican los recomendados por Gemini y se pueden hacer más estrictos o permisivos según el caso.
- Recomendación: si se va a publicar, configurar con cuidado los umbrales para evitar problemas.
¿Cómo se integra con el chat, se manejan errores y se prueba?
Se arma la URL completa, se hace la petición HTTP post con cuerpo y headers, y se mapea la respuesta al modelo de chat para mostrarla en pantalla y guardarla. También se valida configuración y autenticación antes de habilitar el chat.
¿Cómo se manejan errores y estados?
- Verificación inicial: la API key debe existir y no ser el valor de mock.
- Errores capturados por status: 400 petición inválida; 403 sin permiso o key caducada.
- Mensajes de error en español para guiar al usuario.
¿Cómo convierte el helper el historial al formato de Gemini?
- Mapea roles: si es usuario, va como user; si no, model.
- Ajusta parts con el texto de cada mensaje.
- Devuelve los últimos mensajes y el historial completo ya convertido.
- Objetivo: alinear el modelo interno del chat con lo que espera Gemini.
¿Qué cambios se hacen en el chat service y cómo se prueba?
- Se descomenta el service de Gemini y se elimina el mock.
- Se envían los últimos seis mensajes por eficiencia y se convierten con el helper.
- La respuesta real del asistente se guarda y luego se persiste en Firestorm.
- El chat queda listo solo si: configuración de Gemini válida y usuario autenticado.
- Prueba rápida: npm start, abrir en localhost:4200, loguearse, enviar “Estoy hablando con Gemini”. Respuesta esperada alineada al contexto: “Soy un modelo de lenguaje grande entrenado por Google” y oferta de ayuda en conocimiento general, programación y tecnología.
- Persistencia: al desloguear y reingresar, los mensajes se recuperan desde Firestorm. El front-end hace el ordenamiento y respeta formato con asteriscos y saltos de línea.
Habilidades y keywords trabajadas: definición de interfaces, uso de HttpClient y headers, observable para la respuesta, construcción de contexto y prompt, manejo de historial, seguridad por categorías y umbrales, ajuste de temperatura y tokens, validación de configuración, manejo de errores por status, persistencia en Firestorm y ordenamiento en front-end.
¿Te gustaría que agreguemos variantes de contexto o matices de seguridad y temperatura para distintos casos de uso? Comenta cómo lo implementarías y qué comportamiento esperas del asistente.
