Crear tu primera app
1
Abre App Builder
Desde el panel de Componentes de un proyecto, click en + Nuevo y luego en App.
2
Describe lo que quieres
Escribe en el textarea de la pantalla de inicio. Algunos ejemplos:
3
Revisa y aprueba el plan
Presiona el botón de enviar o
Enter. Primero, un agente analiza tu idea y genera un plan de implementación (objetivo, componentes, esquema de datos y features clave) que aparece en un panel a la derecha. Revísalo, edítalo si hace falta y click en Aprobar y construir.4
Espera la preview
El sistema crea las tablas necesarias, genera el código y compila. Toma entre 30 y 90 segundos según la complejidad. Cuando termina, tu app aparece funcionando en la preview.
Panel de Revisión de Plan
Antes de construir, el plan generado se muestra renderizado en Markdown en un panel a la derecha. Desde ahí puedes:- Ver el plan completo (objetivo, componentes, tablas y features).
- Editar el plan libremente con el botón de edición antes de aprobarlo.
- Descartar para cancelar y volver al chat.
- Aprobar y construir para que el sistema construya la app.
Templates pre-construidos
Si no quieres empezar desde cero, click en Template y elige uno:
Al seleccionar un template, la app se carga de inmediato en el editor, lista para usar o modificar.
Iterar vía Chat
Una vez generada la app, el tab Chat es donde sigues iterando. Ejemplos de solicitudes:Modo Build vs Chat
En la barra inferior del chat hay un selector que define cómo interactúa la IA contigo:- En modo Build, la IA analiza el código actual y aplica los cambios que pides; la app se recompila automáticamente.
- En modo Chat, el agente responde preguntas sobre tu app, sus datos y su funcionamiento. Mantiene historial acumulativo de la conversación y puede ofrecer botones de respuesta rápida cuando necesita más contexto. No cambia el código.
Cambiar de tab o recargar la página reinicia el historial del modo Chat.
Los 4 tabs del editor
Tab Code
Editor de código con:- Explorador de archivos a la izquierda (crear archivos y carpetas, editar, eliminar)
- Editor con syntax highlighting al centro
- Preview siempre visible a la derecha
- 4 sub-pestañas según el archivo: Código, Datos (si existe
data.ts), Theme (si existetheme.ts), Bugs (si hay errores)
Puedes editar el código directamente y luego click en Build para compilar. O usar el chat para que la IA aplique tus cambios de forma más inteligente.
Tab Datos
Si tu app tienedata.ts, puedes editar los datos de forma visual sin tocar código:
Cada cambio regenera
data.ts y recompila automáticamente.
Editor de Theme
Personaliza colores sin escribir código. Accede desde Code y luego Theme (requieretheme.ts).
Presets disponibles
- Default — Neutros, profesional
- Dark — Modo oscuro completo
- Purple — Tonos morados elegantes
- Ocean — Azules oceánicos
- Sunset — Naranjas y rosas cálidos
- Forest — Verdes naturales
Ajuste fino
Cada variable (background, primary, secondary, etc.) tiene sliders Hue / Saturation / Lightness para ajuste preciso.Modo Inspect — editar con click
Disponible cuando estás en el tab Code.1
Activa el modo
Click en Edit (esquina superior derecha del preview).
2
Selecciona un elemento
El cursor cambia. Click sobre cualquier elemento del preview.
3
Edita las props
Se identifica el componente React y se muestran sus props editables en el panel izquierdo.
4
Aplica los cambios
Click en Apply Changes — el código se actualiza y el preview se recompila.
Conectar Databases
App Builder puede leer y escribir Databases del workspace en lugar de usar datos mock.1
Ve al tab Datos
En el menú superior del editor.
2
Conecta una Database
Click en Conectar tabla. Búscala por nombre o ingresa su UUID manualmente.
3
Elige permisos
Selecciona qué puede hacer la app: read (solo lectura), write (insertar y actualizar) o delete (eliminar filas).
4
Confirma
La app deja de usar datos de ejemplo y empieza a leer/escribir directo a la Database. Cada app generada ya trae su acceso configurado automáticamente.
Más detalle sobre Databases
Crea, importa y mantén tus Databases para conectarlas a las Apps.
Gestión de versiones
Cada iteración que haces a una app genera automáticamente una nueva versión en su historial. Puedes ver el historial, cargar versiones anteriores y restaurarlas. En la barra inferior del tab Chat verás un badge con la versión activa:
Click en el badge para abrir el panel de historial, donde cada versión muestra su número y fecha.
Cargar vs Restaurar
- Al cargar una versión, los archivos del editor se reemplazan, la app se recompila y el chat confirma la carga (con aviso si no es la más reciente). Si iteras desde ahí, el builder genera una nueva versión basada en la que cargaste.
- Al restaurar, el contenido de esa versión pasa a ser la versión más reciente del proyecto.
Ninguna de las dos acciones borra versiones del historial. Cada proyecto guarda hasta 20 versiones; al crear la 21, la más antigua se purga automáticamente.
Compartir tu app
1
Click en Compartir
Botón en la esquina superior derecha.
2
Configura el acceso
Elige entre: Desactivado (solo tú), Público (cualquiera con el link) o Invitados (solo emails que autorices).
3
Personaliza el slug (opcional)
Ajusta la parte final de la URL pública para que sea más descriptiva. Debe ser único dentro de tu empresa, con solo letras, números y guiones.
4
Copia el link
La app queda accesible para los usuarios autorizados en una URL del tipo
https://app.puente.xyz/public/tu-slug/.En modo Invitados, escribe el email de cada persona y envíale la invitación. Puedes ver la lista de invitados y revocar acceso cuando quieras.
Auto-fix de errores
Si la compilación falla, aparece la pestaña Bugs con los errores y el Auto-fix entra en acción: envía el error al builder, que corrige únicamente los archivos necesarios y recompila (hasta 3 intentos). Para errores de runtime, usa el botón Solucionar error en el preview. Si después de 3 intentos no logra resolverlo, el sistema vuelve al Chat y te muestra el detalle. Puedes:- Abrir el archivo problemático y editar manualmente
- Pedir al chat: “Corrige el error en el componente X”
- Reescribir el componente desde cero vía prompt
Atajos útiles
Preguntas frecuentes
¿Qué stack genera el App Builder?
¿Qué stack genera el App Builder?
React + TypeScript por defecto. Sin dependencias externas más allá de las del proyecto base. Compila en el browser. También puedes crear apps HTML/CSS/JS puras con el template “HTML Interactive”.
¿Puedo exportar el código?
¿Puedo exportar el código?
Sí. En el tab Code, click en Copiar JSON para obtener todos los archivos, o selecciona un archivo y copia su contenido directamente.
¿Qué pasa si modifico el código y luego uso el chat?
¿Qué pasa si modifico el código y luego uso el chat?
La IA ve los cambios y los respeta. Pero si tu código tiene errores, intenta corregirlos al aplicar la siguiente modificación.
¿Qué pasa si cierro el browser mientras se genera la app?
¿Qué pasa si cierro el browser mientras se genera la app?
El proceso se cancela. Si la app ya fue guardada, puedes volver a abrirla desde tu lista de proyectos.
¿La app funciona en móvil?
¿La app funciona en móvil?
Depende de cómo fue generada. Puedes pedir vía chat: “Hazla responsive para móvil”.
¿Hay límite de iteraciones o apps?
¿Hay límite de iteraciones o apps?
No hay límite de iteraciones por app. El número de apps depende del plan de tu workspace — escribe a octavio@puente.xyz si tienes dudas.