Koko Koala Logo
Koko
Visual Builder
CLI

Asistente TUI Interactivo

Experiencia de Consola con Bubble Tea

Koko CLI implementa The Elm Architecture (TEA) en la terminal gracias al framework Bubble Tea y estilos tipográficos con Lipgloss.

✓ Sin parpadeos ni prompts caóticos: la interfaz dibuja un layout coherente y actualizado en tiempo real.
✓ Navegación fluida: utiliza las teclas de flecha [↑/↓] o atajos estilo Vim [k/j] para desplazarte, [Enter] para confirmar y [Esc] para regresar al paso anterior.

Flujo de Selección: Quick vs Manual

Al iniciar `koko init`, el asistente te presentará la pantalla principal con dos rutas:

Ruta 1: Quick Setup

1. Ingresa el nombre de tu proyecto (ej: `my-saas`).

2. Selecciona "Quick Setup".

3. Elige una de las recetas oficiales de producción: ⚡ SaaS Starter, ☕ Java Spring Boot, 🏢 Enterprise NestJS, 💻 MERN Stack, 🚀 PERN Stack, 🐍 FastAPI + React o 📱 Mobile Expo.

4. Koko genera automáticamente todos los archivos, inicializa Git y crea el manifiesto en menos de 1 segundo.

Ruta 2: Manual Configuration

1. Frontend Framework: Elige entre Next.js, React + Vite, Nuxt, Svelte o None.

2. Backend Runtime: Elige entre Express, FastAPI, Go Chi, NestJS, Hono o None.

3. Package Manager: Elige pnpm, npm, bun (o go_mod / pip si es backend puro).

4. Database: Elige PostgreSQL, MongoDB, MySQL, SQLite o None.

5. ORM / Query Builder: Opciones filtradas dinámicamente según tu base de datos y backend.

6. Addons & Tooling: Docker Compose, GitHub Actions CI o ambos.

7. Git: Inicialización de repositorio Git con .gitignore adaptado.

Deshabilitación Dinámica con Motivo

El asistente TUI evalúa cada combinación en tiempo real. Si una opción es incompatible con tus selecciones previas, no solo aparecerá deshabilitada en gris oscuro, sino que mostrará la razón exacta:

✓ Ejemplo: Si seleccionas `React + Vite` (SPA) y `None` en Backend, las opciones de Base de Datos se deshabilitarán con el mensaje: "Incompatible: Client-side SPA (react) cannot connect directly to DBs without a backend".

Ejecución con Spinner y Métricas

Durante la creación física de los archivos, Koko muestra un spinner animado paso a paso indicando la generación en memoria (Virtual File System), escritura segura en disco, inicialización de Git y creación del archivo `koko.config.json` con el tiempo total transcurrido en segundos.

Atajos de Teclado y Controles del Wizard

La interfaz de terminal está diseñada para ser operada 100% mediante el teclado con soporte para ergonomía moderna y atajos estilo Vim:

  • ↑ / ↓ o k / j - Navegar verticalmente entre las opciones de la lista.
  • Enter - Confirmar selección y avanzar a la siguiente etapa de configuración.
  • Espacio (Space) - Alternar selección de addons múltiples (Multi-select).
  • Esc - Volver a la pantalla o campo anterior sin cancelar el proceso.
  • Ctrl + C - Cancelar y salir limpiamente del asistente de inicialización.
← Anterior Stack Soportado Introducción Siguiente → Comandos y Flags CLI