El workspace de Canvas
Cuando ya tienes una AppWeb abierta en Studio, el Canvas es tu mesa de trabajo: a un lado el chat del Copilot y al otro las pestañas para ver la app, el código, los datos y lo que está haciendo el agente.
Esta guía complementa la Guía de Inicio Rápido (crear → publicar). Aquí profundizamos en cada superficie del workspace para el día a día.
Anatomía del Canvas
El layout típico tiene dos zonas:
- Panel del Copilot: escribes, dictas o adjuntas; eliges modo Ask, Plan o Agent.
- Área del workspace: pestañas Preview, Código, Datos y Proceso.
En la barra también tienes Publicar / Live, Conectar Flow, Galería Hub, catálogo de recursos y el menú ⋮ (pausar, compilar, deshacer, etc.).
Preview
La app navegable en vivo. Mientras el Copilot construye o itera, la preview se actualiza. Úsala para comprobar pantallas, formularios y el aspecto real antes de publicar.
- Selector visual (icono cursor): clic para señalar, doble clic para editar texto, clic derecho sobre imagen/fondo para media.
- Navegación: recorre las rutas de la app como lo haría un usuario final.
Guía: Galería Hub y clic derecho en media
Código
Muestra los archivos generados de la versión actual. Sirve para revisar qué ha tocado el agente. No editas el código a mano: pides el cambio al Copilot y se crea una versión nueva.
Datos
Vista operativa de lo que guarda tu app. Hub prepara la base (Supabase) según el contrato de datos; las listas aparecen cuando las pides en el chat.
Dentro de Datos hay tres subvistas:
Registros
Listas de tu app. Busca, crea, edita o elimina filas de prueba o de producción según el estado de la app.
Mapa de datos
Esquema visual de listas y campos. El esquema lo gestiona la IA por chat; aquí lo entiendes sin tocar SQL.
Archivos
Archivos del runtime (fotos, PDFs…). Si faltan, pídeselos al Copilot o súbelos en la Galería Hub.
Tip: @datos en el chat
Si estás en la pestaña Datos (o escribes @datos), el Copilot recibe más contexto del plano de datos para afinar listas, campos o semillas de prueba.
Proceso
Feed de actividad del turno: qué está haciendo el agente, en qué paso va y si hay avisos. Ideal cuando la preview tarda. No es un editor de flujo; es la “caja negra abierta” del Copilot.
Versiones
En Hub las versiones son inmutables: cada cambio aplicado con Agent crea una versión nueva (vN → vN+1). No se edita el código de una versión existente a mano.
- Deshacer turno: desde el chat o el menú ⋮ (Deshacer último cambio) puedes revertir el trabajo reciente sin “parchear” una versión vieja.
- Publicar / Live: la URL pública apunta a la versión productiva. Tras iterar en Canvas, usa Live para republicar los cambios.
- Compilar y validar: en el menú ⋮ genera un dist de preview; no publica por sí solo la URL
/a/.
Si la Preview falla
Cuando hay una incidencia en la preview, Hub muestra un briefing con el resumen del fallo. El flujo habitual:
- Abre la pestaña Proceso para ver en qué paso se quedó el agente.
- Revisa el briefing de la preview (mensaje + comprobaciones fallidas).
- Si el fallo es de la app, pulsa Enviar a Copilot (modo Agent) para que intente repararla.
- Si el fallo es del motor Hub, el briefing te invita a Enviar a Hub (Ops / Errores).
También puedes describir el síntoma en el chat (“la página de contacto no carga”, “el formulario no envía”) en modo Agent. Un mensaje concreto + captura con Adjuntar acelera la reparación.
Herramientas del Copilot
El chat es la forma principal de cambiar la app. Tres modos:
- Ask: investiga y define; no aplica cambios.
- Plan: propone un plan; puedes lanzar Build cuando te convenza.
- Agent: aplica los cambios en el workspace vivo.
Adjuntar
Capturas, PDFs o referencias visuales. Ideal para “hazlo como en esta imagen”.
Micrófono
Dicta el brief o el cambio. Hablar es tan natural como escribir.
Ejemplos de buenos mensajes
Pide cambios concretos. Un mensaje claro suele bastar; una captura ayuda aún más.
Galería Hub
Repositorio de medios (imágenes, vídeos, PDF). Sube o genera con IA. Para cambiar una foto de la web: Selector visual → clic derecho sobre la media → Galería / subir / regenerar.
Recursos y capacidades
Mapas, Stripe, LLMs, imágenes IA… se piden al Copilot en el mensaje. También puedes abrir el catálogo de recursos desde la barra (+) del Canvas.
Mis AppWeb (proyectos)
Mis AppWeb es el home de Studio: la lista de tus proyectos. Desde ahí creas, abres y gestionas apps sin entrar aún al Canvas.
- Nueva AppWeb / Crear AppWeb Canvas: arranca un proyecto vacío con Copilot listo.
- Continuar: vuelve al último proyecto abierto.
- Por tarjeta: abrir, renombrar, duplicar, enviar copia a otro usuario Hub o eliminar.
Guía: Enviar copia (vs duplicar y URL pública)
En móvil
En pantallas estrechas el Canvas alterna superficies: chat del Copilot o la vista activa (Preview, Código, Datos, Proceso). Usa la barra superior para cambiar y el menú ⋮ para el resto de acciones.
Costes en el día a día
Copilot (Ask, Plan, Agent) y los recursos IA de tu app publicada descuentan del mismo Crédito IA Hub. Tu plan incluye saldo; puedes recargar packs 1:1. Si se agota, la app sigue online y solo se pausa la IA.
Guía: Crédito IA Hub Modelos y crédito
Publicar, Live y Flow
Publicar define la URL pública. Cuando ya hay producción, el botón pasa a Live para abrir o republicar. Conectar Flow enlaza un asistente (WhatsApp, Telegram, etc.) con tu AppWeb.