Rol: Ingeniería Full-Stack (Creación de todo el sistema desde cero incluyendo Arquitectura, APIs Backend, Gestión de Estado, UI/UX e Integración de Audio)
Resultado Clave: Un chatbot inmersivo y consciente del contexto (V2) que actúa como el nodo interactivo central del portafolio cyberpunk
Resumen: Un sistema de chatbot V2 profundamente integrado para el Portafolio: Cyberpunk, construido como una evolución masiva sobre el chatbot V1 original (Portafolio: Glass). Simula una terminal de construcción de IA llamada "Oz" que presenta doblaje en tiempo real, ejecución dinámica de herramientas MCP a través de indicadores ToolBadge, comandos de sistema y manejo activo de límites de contexto. Actúa como un agente completamente autónomo que representa a Franz.
El Problema
Desafío: El portafolio cyberpunk requería un chatbot que se sintiera como una terminal integrada o un asistente de IA en lugar de un widget añadido de último momento. A diferencia del chatbot Glass V1, que era una interfaz conversacional estándar, esta iteración V2 necesitaba procesar múltiples comandos a nivel del sistema, renderizar visualmente llamadas a herramientas LLM (como navegar o reproducir música), reproducir doblaje de IA sincronizado sin superposición de audio y manejar ventanas de contexto de manera eficiente.
Audiencia: Reclutadores técnicos, desarrolladores y visitantes que exploran el portafolio.
Restricciones: Una gestión de estado compleja que involucra reproducción de sonido, cambios de diseño en la interfaz, escritura del usuario, renderizado de llamadas a herramientas asíncronas y restricciones de API (manejo de límites de tokens) requirieron una cuidadosa planificación arquitectónica sin comprometer las animaciones a 60fps.
Enfoque y Decisiones
Arquitectura: Componentes separados en funciones modulares: ChatHeader, ChatInput, ChatMessage, ChatHistory, DubPopup y ToolBadge. Se utilizó useChatbotAudio para orquestar los sonidos de forma segura, evitando el spam.
Decisiones Clave:
Ejecución de Herramientas (ToolBadge): Para hacer visibles y transparentes las acciones de la IA, construí el componente ToolBadge. Cuando la IA ejecuta una herramienta MCP (por ejemplo, cambiar la música, descargar un currículum, cambiar el tema o traducir el sitio), una elegante insignia de terminal animada cae en el flujo de chat detallando la acción. Esto separa fundamentalmente el texto normal de las operaciones del sistema.
Identidad y Comportamiento Autónomo: La IA opera bajo el personaje "Oz", sirviendo como un asistente de IA profesional. Maneja dinámicamente flujos de trabajo complejos como Consultas de Precios (mostrando tablas de precios internas ocultas) y Enrutamiento de Formularios de Contacto (donde Oz redacta correos electrónicos para los usuarios pero los obliga a pasar por un estricto ciclo de interfaz de usuario de revisión y aprobación).
Motor LLM y Arquitectura de Respaldo: Se construyó una cadena de respaldo backend resistente. Procesa de forma nativa hasta 1 millón de tokens de contexto con una arquitectura de atención híbrida para respaldar la retención de contexto largo. Las consultas caen en cascada elegantemente desde modelos rápidos primarios hacia redes secundarias robustas si se alcanzan límites de velocidad o interrupciones temporales.
RAG y Gestión de Contexto: Utiliza RAG (query_portfolio_data) para obtener casos de estudio de MDX completos cuando los usuarios hacen preguntas técnicas profundas. Una ventana deslizante adaptativa elimina los mensajes más antiguos al alcanzar el 90-98% del límite de contexto.
Bloqueo de Moderación: Se implementó un sistema de lockdown automatizado donde Oz puede prohibir temporalmente a los usuarios (tiempos de espera cortos, medios o largos) por lenguaje abusivo o spam, totalmente sincronizado con cookies del lado del servidor.
Compensaciones: En lugar de usar Redux para estados complejos, dependí de React Context y useSyncExternalStore para la gestión de estados localizados, lo que optimizó el tamaño del paquete pero requirió un diseño preciso de hooks para evitar re-renderizados innecesarios.
Resultados e Impacto Clave
Resultado: Un asistente llamativo y altamente funcional que mejora la narrativa cyberpunk mientras proporciona una utilidad real (como responder preguntas, controlar la música y mostrar habilidades).
Impacto: Demuestra patrones avanzados de Next.js, integración de sistemas a través de MCP, hooks personalizados y coordinación audiovisual precisa.
Métrica
Resultado
Rendimiento
Optimizado mediante carga diferida y referencias estrictas
Interactividad
Audio, ejecución de herramientas, comandos de terminal
Resiliencia
Tamaño de contexto en vivo y detección de degradación de API
Profundización Técnica
Detalles Notables:
Realiza un seguimiento de los diagnósticos en vivo (tiempo de ida y vuelta, modelos activos, tokens) directamente en la interfaz de usuario.
El Tema de las Llamadas a Herramientas: El componente ToolBadge.tsx se activa cada vez que la IA devuelve un objeto action en lugar de solo texto. Analiza los parámetros de la herramienta (como { type: "toggle_theme", theme: "dark" }) y renderiza una insignia futurista brillante que resume la tarea ejecutada dentro del feed del chat.
TypewriterMarkdown personalizado para renderizar markdown de manera segura con un efecto de máquina de escribir tipo hacker.
El visualizador DubPopup refleja los estados de "IA hablando" de forma asíncrona basándose en acciones de API.
Verificación: Se construyeron límites robustos (estados de bloqueo, protección contra spam) para manejar con gracia el uso abusivo o la limitación de velocidad, reflejando las configuraciones del servidor directamente en la interfaz de usuario.
Calidad del Código: Uso extensivo de interfaces TypeScript para ToolDetail, ChatSession y comprobaciones estrictas de nulos en referencias e interacciones de diseño visual.
Reflexiones
De Manera Diferente: Podría haber desacoplado el motor del reproductor de audio a un worker genérico para eliminar por completo cualquier tartamudeo del hilo principal al decodificar archivos de audio largos en dispositivos móviles.
Éxitos: Conexión perfecta del contexto useMusicPlayer con los comandos de la IA para que el asistente pueda "actuar" verdaderamente dentro del sitio web, cruzando la frontera entre el chat y la navegación del sitio.
Lecciones: Equilibrar los "geniales" efectos cyberpunk (máquina de escribir, herramientas con fallas) con la accesibilidad requiere pruebas constantes. El diseño de ventanas de chat flotantes aptas para dispositivos móviles con posicionamiento fijo y bloqueo de desplazamiento depende en gran medida de las peculiaridades del navegador.
Mis Contribuciones
Arquitectura del Sistema: Diseño del motor de estado de chat, la lógica de sondeo para diagnósticos en vivo y el historial de almacenamiento de sesiones.
Ingeniería de Audio: Programación del doblaje basado en secuencias y ganchos de efectos de sonido (useChatbotAudio).
UI/UX: Estilización de los componentes (ChatSettings, ChatInput) utilizando Tailwind y Framer Motion para lograr una auténtica apariencia de terminal.
Integración: Mapeo de la salida de la IA a herramientas accionables (ToolBadge) que afectan a la aplicación en general (por ejemplo, cambiar idioma, descargar currículum, cambiar tema).
Arquitectura del Proyecto
El directorio components/chatbot/ orquesta la lógica del asistente:
Motor Central: Chatbot.tsx actúa como el controlador principal.
Componentes de UI: ChatMessage.tsx, ChatInput.tsx, ChatHistory.tsx.
Características Especializadas: TypewriterMarkdown.tsx para estilo visual, DubPopup.tsx para presencia de audio, y ToolBadge.tsx para resúmenes de ejecución de herramientas.
Integraciones: Se integra con proveedores globales (useMusicPlayer, useTheme, useLocale).
Vista Previa en Vivo
Enlace de Demostración en Vivo: Experimente el chatbot directamente en el sitio del portafolio en vivo franzdomingo.dev.
Funciones para probar: Escriba /help para comandos, o pídale que "Play music" (Reproduzca música) para ver cómo activa el reproductor de música global.
