cavioca

El builder paso a paso

6 min

El builder paso a paso

El builder (/builder) es donde describes una app y cavioca la construye delante de ti. No hay menús, ni asistentes, ni plantillas: una caja de chat a la izquierda, una vista de la app a la derecha, y un par de pestañas para mirar los ficheros o el historial cuando hace falta.

Esta página te lleva por la anatomía de la pantalla y por el ciclo básico de uso. Si vienes con prisa y sólo quieres saber qué teclear, salta a Buenas prácticas de prompt.

La pantalla, de izquierda a derecha

Cabecera

Arriba del todo, una franja fina con:

  • El nombre de la app — un input editable. Empieza como untitled-app; cámbialo cuando tengas claro de qué va.
  • El estado de guardado — draft, saving…, saved, saved 12s ago. Cada vez que el modelo termina de generar, se persiste una iteración nueva y este indicador se actualiza.
  • Share — copia un enlace público a tu app (cavioca.com/a/<id>). Sólo se activa cuando la app está publicada.
  • Publish — sube la última versión a la URL pública. Detalles en Publicar.

Panel de chat (40% izquierdo en escritorio)

Aquí es donde escribes. Tres cosas a saber:

  • Cmd / Ctrl + Enter envía el mensaje. Pulsar Enter sólo añade línea — útil cuando estás describiendo algo largo.
  • Mientras el modelo trabaja verás indicadores en orden: planning… → writing N files… → validating… → repairing… → done. Cada fase corresponde a una etapa real de la pipeline; no es decoración.
  • El botón Cancel aborta una generación en curso y deshace los ficheros que ya hubiera escrito (rollback automático). Úsalo si ves que el modelo se ha ido por donde no debía — es más barato cortar y reformular que esperar al final.

Si una generación falla, el mensaje del asistente muestra el error y un botón try again que reenvía el mismo prompt.

Panel derecho con pestañas (60% restante)

Tres pestañas que comparten espacio:

preview

Una iframe con la app que el modelo acaba de construir, ensamblada desde los ficheros del store. Se actualiza en directo a medida que llegan archivos nuevos durante la generación. El punto verde de la cabecera del panel parpadea cuando estás viendo la versión live; el punto naranja indica que estás en modo preview de una versión antigua (ver más abajo).

files

El árbol de ficheros generados. Click en cualquier nodo y entras al editor (lectura, edición ligera). Vuelves al árbol con ← tree arriba a la derecha del panel.

El contador junto al título (files · 12) refleja los archivos de la versión que estás viendo, no los de la app entera.

history

La lista de iteraciones, de la más reciente arriba. Cada entrada muestra:

  • número de versión (v3)
  • resumen del prompt que la generó (los primeros 2 000 caracteres)
  • fecha
  • número de ficheros

Y tres acciones:

  • preview — carga esa versión en la pestaña preview sin tocar el store actual. Mientras estás en preview, el chat se desactiva.
  • restore — copia esa versión al estado actual y crea una iteración nueva con el resumen restored from <id>. No pierdes el trabajo posterior: queda en el historial.
  • export — descarga un .zip con todos los ficheros, un _meta.json y un _conversation.md con la transcripción.

El ciclo básico

  1. Escribe un prompt describiendo la app. No pidas la luna en el primer turno — pide el esqueleto.
  2. Espera a done. La generación típica tarda entre 10 y 40 segundos según el tamaño.
  3. Mira el preview. Cambia a files si quieres ver qué se ha generado.
  4. Itera. Manda un segundo prompt con un cambio concreto: "haz el botón de enviar más grande", "añade un campo email al formulario", "quita la animación del header". Cada mensaje aplica un diff sobre los ficheros existentes — no rehace toda la app.
  5. Cuando quieras, Publish para sacar la URL pública.

Regenerar parcial vs. total

cavioca por defecto aplica diffs: cada turno toca sólo los ficheros relevantes al prompt. Eso es lo que quieres el 95% de las veces.

Si necesitas empezar de cero — por ejemplo, decidiste que la app es de otro tipo — abre una app nueva desde el dropdown del nombre. stub El "restart from scratch" como acción dentro de la misma app llegará en una versión futura del builder.

Si lo que quieres es rehacer una parte concreta (toda la lógica del carrito, todo el estilo), díselo explícitamente en el prompt: "rehaz el carrito desde cero usando localStorage, ignora la implementación actual".

Atajos útiles

  • Cmd / Ctrl + Enter — enviar prompt.
  • Click sobre un fichero en files — abrir el editor.
  • Click sobre una iteración antigua → preview — comparar sin perder lo actual.
  • exit (esquina superior derecha del preview) — salir del modo preview y volver a live.

Móvil

En pantallas estrechas el panel derecho se convierte en un toggle entre chat y preview (las pestañas files y history quedan accesibles desde preview). Es funcional, pero recomendamos escritorio para sesiones largas — el chat se beneficia mucho del teclado físico.

Qué viene después