Vibe Coding en Acción: Construcción de un Editor Colaborativo en Tiempo Real con Nuxt UI, Jazz e IA
El paradigma del desarrollo asistido por inteligencia artificial, conocido coloquialmente como Vibe Coding, ha comenzado a transformar la forma en que los ingenieros de software abordan proyectos de mediana y alta complejidad. Lejos de ser una moda pasajera, esta metodología implica una colaboración iterativa entre el desarrollador humano y agentes de IA, donde el primero actúa como arquitecto de decisiones mientras el segundo ejecuta, verifica y refina el código generado. En este contexto, un desarrollador documentó recientemente su experiencia construyendo un editor de texto colaborativo en tiempo real utilizando el stack formado por Nuxt UI y Jazz, con la asistencia constante de herramientas de inteligencia artificial a lo largo de todo el ciclo de desarrollo.
Motivación: El Ecosistema Nuxt como Eje Central del Proyecto
La decisión de construir un editor colaborativo desde cero, en lugar de integrar una solución prefabricada como Notion, Quill o TipTap embebido en un servicio externo, no fue arbitraria. La razón principal radicó en la necesidad de mantener el proyecto dentro del ecosistema de Nuxt, el framework progresivo basado en Vue.js que ofrece renderizado híbrido, convenciones de estructura de archivos y un sistema de módulos altamente extensible. Al optar por este camino, el desarrollador garantizó el control absoluto sobre el código fuente, eliminando dependencias de terceros cuyo comportamiento, licencias o ciclos de vida escapen a su dominio.
Esta elección tiene implicaciones técnicas profundas. Mantener la base de código dentro de un único ecosistema coherente reduce la fricción de integración, facilita el mantenimiento a largo plazo y permite la implementación de personalizaciones avanzadas que las soluciones SaaS simplemente no ofrecen. Funcionalidades como lógica de permisos a nivel de bloque, integración con sistemas de autenticación propios o pipelines de procesamiento de imágenes personalizados se vuelven factibles cuando el código es completamente propio. En contraposición, depender de un widget externo limita al desarrollador a las opciones expuestas por la API pública de dicho servicio.
Stack Técnico: Nuxt UI y Jazz en Combinación
Nuxt UI es la biblioteca de componentes oficialmente respaldada por el ecosistema Nuxt, construida sobre Tailwind CSS y Headless UI. Ofrece componentes accesibles, altamente configurables mediante tokens de diseño y perfectamente alineados con las convenciones del framework. Para la interfaz del editor, esta biblioteca proveyó los bloques visuales fundamentales: paneles, tooltips, modales, botones de acción y controles de formulario, todos integrados de forma nativa sin requerir configuración adicional.
Por su parte, Jazz es un framework de sincronización de datos en tiempo real para aplicaciones locales-primero (local-first). Su arquitectura se basa en CoJSON (Collaborative JSON), una estructura de datos que permite la edición concurrente sin conflictos mediante algoritmos CRDT (Conflict-free Replicated Data Types). A diferencia de soluciones basadas en WebSockets tradicionales con un servidor centralizado como fuente de verdad, Jazz distribuye el estado entre los clientes participantes, lo que reduce la latencia percibida y mejora la resiliencia ante desconexiones temporales. La integración de Jazz con el ecosistema Vue/Nuxt se realiza mediante composables reactivos que se alinean naturalmente con el modelo de reactividad de Vue 3.
Funcionalidades Implementadas en el Editor
El producto resultante no es un prototipo mínimo, sino un editor funcional con características propias de herramientas de productividad profesionales. Las capacidades implementadas incluyen sincronización en tiempo real para múltiples usuarios concurrentes, una interfaz de comentarios contextual al estilo Notion y soporte para el manejo de imágenes embebidas en el documento.
- Sincronización en tiempo real: múltiples usuarios pueden editar simultáneamente el mismo documento, con los cambios propagándose de forma inmediata y sin conflictos gracias a la capa CRDT de Jazz.
- Interfaz de comentarios tipo Notion: los usuarios pueden anclar comentarios a fragmentos específicos del texto, con hilos de respuesta y resolución de discusiones, replicando la experiencia de anotación colaborativa de herramientas como Notion o Google Docs.
- Manejo de imágenes: soporte para la inserción, previsualización y almacenamiento de recursos visuales directamente en el flujo del documento, con gestión del estado de carga integrada en la interfaz.
- Presencia de usuarios: visualización de los cursores y selecciones activas de cada participante en tiempo real, proporcionando conciencia de contexto durante la edición colaborativa.
- Persistencia local-primero: los cambios se almacenan localmente antes de sincronizarse, lo que garantiza que el trabajo no se pierda ante fallos de conectividad.
El Proceso de Vibe Coding: Estrategias y Lecciones Aprendidas
El aspecto más relevante de esta experiencia desde una perspectiva metodológica es la forma en que el desarrollador estructuró su interacción con los agentes de IA. Una de las técnicas más destacadas fue la provisión del archivo llms.txt como contexto inicial para el agente. Este archivo, un estándar emergente en la comunidad de desarrollo, actúa como una hoja de ruta estructurada que describe la arquitectura del proyecto, las convenciones adoptadas, las dependencias clave y el propósito de los módulos principales. Al entregarle esta información al modelo de lenguaje antes de formular cualquier petición, el desarrollador logró que las sugerencias de código generadas fueran coherentes con el contexto real del proyecto, reduciendo drásticamente la cantidad de iteraciones correctivas necesarias.
La segunda estrategia clave consistió en forzar al agente a verificar su propio trabajo de forma autónoma en el navegador. En lugar de limitarse a generar código y asumir su corrección, el flujo de trabajo incluyó un paso de validación donde el agente, a través de herramientas de automatización de navegador, ejecutaba el resultado y comprobaba su comportamiento visual y funcional. Esta práctica convierte al agente de un generador pasivo de código en un colaborador activo del ciclo de prueba-error, acortando significativamente el bucle de retroalimentación. La autonomía del agente para detectar regresiones o discrepancias visuales sin intervención humana constante fue identificada como uno de los factores de mayor impacto en la productividad del proyecto.
"Proporcionar al agente de IA un archivo de contexto estructurado como
llms.txty obligarle a verificar autónomamente su trabajo en el navegador transforma radicalmente la eficiencia del Vibe Coding, pasando de una herramienta de autocompletado avanzado a un colaborador técnico genuino."
Consideraciones Técnicas sobre la Arquitectura CRDT de Jazz
Desde un punto de vista de ingeniería, uno de los desafíos más interesantes del proyecto fue la integración correcta del modelo de datos de Jazz con la lógica del editor de texto enriquecido. Los CRDTs, si bien resuelven elegantemente los conflictos de concurrencia, imponen restricciones sobre qué operaciones son directamente representables en su modelo. En el caso de un editor de texto, operaciones como la inserción, eliminación y formateo de rangos de caracteres deben mapearse a primitivas CRDT de forma que sean conmutativas y asociativas, garantizando convergencia independientemente del orden de recepción de los cambios.
Jazz expone estas abstracciones mediante tipos de datos colaborativos de alto nivel, lo que simplifica considerablemente la implementación en comparación con construir la capa CRDT manualmente. No obstante, el desarrollador debió diseñar cuidadosamente el esquema de datos del documento para que cada bloque de contenido (párrafos, encabezados, imágenes, comentarios) fuera un nodo independiente en el grafo colaborativo de Jazz, evitando dependencias de estado que pudieran introducir inconsistencias bajo condiciones de red adversas.
Disponibilidad y Contribución Abierta
El proyecto completo ha sido publicado como software de código abierto en GitHub, poniendo a disposición de la comunidad de desarrolladores tanto el código fuente como la documentación del proceso. Esta decisión refleja el espíritu colaborativo inherente a la comunidad de Nuxt y al movimiento de código abierto en general. Cualquier desarrollador interesado puede clonar el repositorio, estudiar la arquitectura implementada, adaptar los componentes a sus propios proyectos o contribuir mejoras mediante pull requests.
La publicación abierta del proyecto tiene un valor didáctico especialmente significativo en el contexto actual del Vibe Coding. Los archivos de configuración del agente, incluyendo el llms.txt y los prompts estructurados utilizados durante el desarrollo, forman parte del repositorio, convirtiendo este proyecto no solo en una referencia de implementación técnica sino también en un caso de estudio replicable sobre metodologías de desarrollo asistido por IA. Para la comunidad que trabaja en el ecosistema Nuxt, disponer de un ejemplo funcional y documentado de integración con Jazz representa un punto de partida sólido para explorar aplicaciones colaborativas de nueva generación.
