Docs Comenzando Guía de Inicio Rápido

Empieza a construir tu primera app en minutos

En Hub Studio, las webs se crean solo con Canvas: un lienzo vivo y el chat del Copilot. Escribes (o dictas) lo que quieres, ves cómo se construye en la preview e iteras hasta publicarla.

1. Crear AppWeb Canvas

Entra en Hub Studio. Lo primero que ves es Mis AppWeb: tus proyectos en tarjetas con miniatura, estado (Canvas / publicada / fallida) y acciones. Pulsa + Nueva AppWeb (o Continuar si ya tienes una abierta). En unos segundos entras al Canvas con el Welcome tipográfico y el Copilot listo para escribir.

Mis AppWeb en Hub Studio: proyectos en tarjetas y botón Nueva AppWeb

2. Describe tu idea en el Copilot

El primer mensaje del Copilot es el que arranca la construcción. Cuéntale el negocio, las pantallas que necesitas, el tono visual y si quieres formularios, datos de prueba u otras funciones. Puedes usar el micrófono para dictarlo, o Adjuntar una captura o PDF de referencia.

Ejemplo de buen mensaje: "Crea una web para una clínica dental moderna llamada Sonrisa Sana. Quiero inicio atractivo, servicios (ortodoncia, implantes) y contacto con formulario. Colores azules y blancos, datos de prueba realistas."

Primer mensaje en el Copilot del Canvas

3. Sigue la construcción en vivo

Mientras el Copilot trabaja, el workspace muestra el progreso en las pestañas Preview, Código, Datos y Proceso. No hace falta conectar secciones a mano: el agente genera y actualiza la app en el lienzo.

  • Preview: la app navegable a medida que avanza.
  • Proceso: el detalle de lo que está haciendo el agente.
  • Código / Datos: el código generado y el contrato de datos cuando existan.
Preview y Proceso mientras Canvas construye la app

4. Itera con Ask, Plan y Agent

Cuando la primera versión está lista, sigues en el mismo chat. El Copilot tiene tres modos:

  • Ask: investiga y define (no aplica cambios).
  • Plan: propone un plan estructurado; puedes lanzar Build cuando te convenza.
  • Agent: aplica los cambios en el workspace vivo.

Usa Adjuntar para pegar capturas o PDFs y guiar el cambio (“hazlo como en esta imagen”). Si Ask te deja un handoff, pulsa Cambiar a Agent e implementar.

Tip de iteración

Pide cambios concretos: “Añade una pantalla de acceso”, “Cambia la paleta a verdes”, “Mejora el hero del inicio”. Un mensaje claro + una captura suele bastar.

Iterar con Ask, Plan y Agent en el Copilot

5. Compilar y URL amigable

Cuando la preview te convenza, pulsa el botón naranja Compilar del header. Genera el dist y activa la URL pública /a/…. Después el botón pasa a Recompilar; usa el chip Abrir / copiar para compartir.

Compilar la AppWeb Canvas y abrir la URL amigable
  • URL amigable: la ruta pública que vas a compartir (chip junto a Compilar).
  • Base de datos: Hub prepara el esquema en Supabase según la estructura de la app, sin que gestiones credenciales a mano.

Guía: Compilar y URL amigable

6. (Opcional) Asistente HUB Flow

Desde el Canvas pulsa Asistente HUB Flow (header) o Conectar Flow (barra / ⋮): elige Telegram o WhatsApp, genera el asistente, pruébalo en el simulador y usa Crear ATZ móvil para abrir Hub Flow.

Asistente HUB Flow desde Hub Studio Canvas

Guía del modal Asistente HUB Flow Conceptos Hub Flow y ATZ

¡Listo!

Ya tienes el ciclo completo: Canvas → mensaje en Copilot → iteración → Compilar. Sigue afinando en el mismo chat cuando quieras.

Para ir más a fondo: Workspace, Compilar, Galería Hub, Crédito IA Hub.