Caso de estudio

Agente de voz interactivo para portafolio

Interacciones de voz en tiempo real usando la API de Gemini Live y Web Audio.

// Rol: Full-Stack / AI Engineer
// Contexto: Proyecto personal integrado en este mismo sitio web
// Stack: Gemini Live API, Web Audio API, WebSockets, Astro, PHP

Problema

Un portafolio estático no demuestra de manera interactiva lo que puedes construir. Los visitantes necesitan una forma rápida y natural de explorar mis proyectos y experiencia.

La solución fue permitirles hablar en vivo con un agente de voz que explica mi experiencia y responde preguntas sobre mi trabajo.

Arquitectura

Un flujo de audio bidireccional en tiempo real que conecta el navegador con Gemini Live de manera segura:

flowchart TD
User["Browser (Mic/Speaker)"] -->|"Bidirectional Audio"| VoiceClient["Frontend Client"]
VoiceClient -->|"Request Token"| TokenEndpoint["Token Endpoint"]
VoiceClient -->|"Live API (WebSocket)"| Gemini["Google Gemini Live"]
VoiceClient -->|"Beacon (start/end)"| SessionEndpoint["Observability Endpoint"]
SessionEndpoint --> SessionsLog["Metrics Storage"]

classDef default fill:#0f172a,stroke:#38bdf8,stroke-width:1px,color:#e2e8f0
classDef frontend fill:#1e1b4b,stroke:#818cf8,stroke-width:1px,color:#e0e7ff
classDef backend fill:#881337,stroke:#f43f5e,stroke-width:1px,color:#fecdd3
classDef storage fill:#022c22,stroke:#10b981,stroke-width:1px,color:#d1fae5

class User,VoiceClient frontend
class TokenEndpoint,SessionEndpoint backend
class SessionsLog storage
class Gemini default

FrontendCaptura el audio del micrófono usando la Web Audio API y un AudioWorklet, lo transmite directamente hacia Gemini y reproduce la respuesta en tiempo real.

Tokens efímerosUn endpoint en el servidor emite tokens de corta duración para autenticar la conexión a la API de Gemini Live desde el cliente. Las peticiones están limitadas por IP, asegurando que ninguna clave de API quede expuesta en el navegador.

ObservabilidadSe registran métricas básicas de sesión (inicio, fin y duración) mediante `navigator.sendBeacon` hacia un endpoint de servidor.

InfraestructuraFrontend estático construido con Astro + endpoints ligeros, alojados directamente en Hostinger.

Decisión clave de arquitectura

Decisión clave: Conectarse directamente a Gemini Live desde el navegador usando tokens efímeros para minimizar la latencia y evitar un proxy, manteniendo seguras las credenciales principales.

Resultados

Métricas observadas durante el lanzamiento:

Impresiones

2,300+en LinkedIn el día del lanzamiento

Interacciones

~20personas hablaron con el agente en las primeras horas

Costo marginal

Nivel 1costo casi nulo por sesión usando la capa gratuita de Gemini (150K TPM)

Qué aprendí / siguiente paso

>Tokens efímeros para exponer la API de forma segura en el lado del cliente.
>Audio bidireccional nativo en el navegador (restricciones de la Web Audio API).
>Observabilidad mínima sin dependencias (registros JSONL y navigator.sendBeacon).