El Problema
Distribuir código fuente puro y estilos dinámicos en múltiples entornos de cliente requiere más que un simple hosting de archivos estáticos. Se necesita un sistema capaz de manejar metadatos, versionado y contexto en tiempo real para asistentes de IA, todo manteniendo una alta disponibilidad y baja latencia.
La Solución
Construí una API modular que centraliza la lógica del sistema de diseño. No solo sirve archivos; procesa solicitudes para entregar la versión exacta de un componente, resuelve sus dependencias y entrega los tokens de CSS necesarios según el tema seleccionado por el usuario.
Módulos Clave
- Registry Module: Gestiona el almacenamiento y recuperación del código fuente de los componentes React. Analiza metadatos para que el CLI sepa exactamente qué dependencias instalar.
- Themes Module: Un motor de estilos dinámicos que sirve variables CSS basadas en OKLCH. Permite que el CLI inyecte diferentes identidades visuales en un proyecto sin tocar una sola línea del código de los componentes.
- AI Service: Una capa de integración con Groq y Vercel AI SDK que ofrece ayuda contextual, combinando la documentación del sistema de diseño con la configuración local del proyecto del usuario.
Decisiones Técnicas
- Arquitectura NestJS: Elegido por su modularidad e inyección de dependencias, lo que hace que el sistema sea altamente mantenible y fácil de testear.
- Drizzle ORM: Implementado por su seguridad de tipos (type-safety) y un overhead casi nulo, asegurando que las consultas a la base de datos sean tan rápidas como el SQL nativo.
- Distribución Basada en Plantillas: En lugar de harcodear funciones de utilidad como cn, la API las sirve como plantillas, permitiendo actualizaciones globales para todos los usuarios sin necesidad de actualizar el CLI.
- Respuestas en Streaming: El módulo de IA utiliza streaming para ofrecer feedback en tiempo real en el comando chat del CLI, mejorando significativamente la experiencia del desarrollador (DX).
Desafíos y Aprendizajes
- Sanitización de Código Fuente: Implementación de lógica para limpiar y formatear código antes de la distribución, asegurando que se integre perfectamente con el linter y formateador del usuario.
- Esquema de Metadatos Escalable: Diseño de un esquema de base de datos que rastrea eficientemente las relaciones de componentes, árboles de dependencias y variables de temas.
- Comunicación M2M: Optimización de la API específicamente para la interacción máquina a máquina (CLI a API), enfocándose en payloads JSON y códigos de estado que el CLI pueda interpretar de forma confiable.