Docs Comenzando Workspace de Canvas

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 el header y la barra también tienes Compilar / Recompilar (URL amigable), Asistente HUB Flow / Conectar Flow, Galería Hub, catálogo de recursos, Editar menú y el menú ⋮ (pausar, Compilar y validar, 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: selector de rutas, viewports Escritorio / Tablet / Móvil, Recargar y Abrir en otra pestaña.

Galería Hub Editar menú

Preview y Proceso en el workspace de Canvas

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. Puedes Copiar actividad del turno desde esta pestaña.

Material de la red

En Proceso hay un panel plegable Material de la red: investiga en la web (marca, producto…) o pega una URL para traer referencias a carpetas de Hub.

Tipos: Imágenes, Vídeos, Enlaces, Documentos, Redes (activa o desactiva lo que necesites).
Buscar o Añadir URL.
En cada fuente: Quitar (no usar) para excluirla de la AppWeb.

No sustituye a la Galería Hub ni a Adjuntar del chat: es investigación web para material de referencia del turno.

Abre Editar menú desde la barra del workspace, el menú ⋮ o el chrome de la Preview cuando está lista. Renombras etiquetas, agrupas, reordenas u ocultas ítems del menú visible de la app.

Nombre visible y Grupo / submenú opcionales.
Subir / Bajar, Quitar del menú (la página no se borra), Ocultar Inicio, Añadir elemento.
Pulsa Guardar menú para aplicar. Si no hay menú detectado aún, el modal lo indica.

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.
Compilar / Recompilar: botón naranja del header; activa o actualiza la URL amigable /a/…. Ver guía Compilar y URL.
Compilar y validar: en el menú ⋮ genera un dist de comprobación; no sustituye al Compilar del header para la URL pública.

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.

Modelo y razonamiento

En el composer, junto a Ask/Plan/Agent, eliges el modelo del turno ( Auto · rápido → preciso, DeepSeek V4 Flash/Pro o MiMo. Con Editar razonamiento ajustas el esfuerzo (Off / High / XHigh según modelo). Hub sigue enrutando tareas; esto fija preferencia del turno. Detalle en Modelos e IA.

Cola · Encolar

Si Copilot está trabajando y envías otro mensaje, se Encola (verás En cola · nº N y el aviso de cola en el chat). Cuando termina el turno actual, sigue con lo pendiente.

Limpiar chat

En la cabecera del panel Copilot: Limpiar chat borra el historial de conversación (el contexto del chat). No borra el código ni las versiones de la app. Si hay un turno en curso, también detiene ese turno y la cola pendiente (te lo pide confirmar).

Ejemplos de buenos mensajes

Pide cambios concretos. Un mensaje claro suele bastar; una captura ayuda aún más.

Datos "Crea listas de citas y pacientes con campos realistas y 5 registros de prueba. Quiero verlas en Datos."

Recursos "Añade un mapa de Geoapify en contacto y pagos con Stripe en el checkout."

Media / diseño "Cambia el hero del inicio por la foto adjunta, tipografía más grande y CTA 'Reservar cita'."

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.

Guía: clic derecho en media

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.

Guía práctica de Recursos

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

Compilar, URL amigable y Flow

Compilar / Recompilar (header) genera el dist y activa la URL amigable /a/…. Asistente HUB Flow / Conectar Flow abre el modal de canal móvil, simulador y Crear ATZ móvil.

Guía: Compilar y URL Guía: Asistente HUB Flow Hub Flow y ATZ

Guía de Inicio Rápido Recursos e integraciones