Skip to main content
Screenshot 2026 06 03 At 3 44 39 PM
App Builder es el constructor de aplicaciones web de Puente OS. Describes lo que quieres en lenguaje natural, el sistema genera un plan, construye React + TypeScript, lo compila en tu navegador y te muestra una preview funcional. Después puedes iterar vía chat, editar código directamente o usar el modo Inspect para editar elementos haciendo click.

​
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:
Un CRM simple con lista de clientes, oportunidades y dashboard con métricas

App de gestión de inventario con tabla de productos, filtros y formulario

Tablero Kanban para gestionar tasks con columnas To Do, In Progress y Done
Click en Mejorar y la IA reformulará tu prompt agregándole detalle. También puedes usar Sorpréndeme para rellenar el input con un prompt de ejemplo.
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.
Editar el plan antes de aprobar es la forma más rápida de corregir el rumbo. Si algo no está bien descrito, ajústalo aquí en lugar de reconstruir después.

​
Templates pre-construidos

Si no quieres empezar desde cero, click en Template y elige uno:
TemplatePara qué sirve
CRMGestión de clientes, oportunidades, pipeline
HelpdeskSistema de tickets de soporte con estados
App BaseEstructura base lista para iterar
HTML InteractiveTemplate HTML/CSS/JS puro (sin React)
PomodoroTimer + lista de tasks
QA ComponentsShowcase de todos los componentes disponibles
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: 
Agrega un gráfico de barras en el dashboard con las ventas por mes
Cambia el color primario a azul marino y agrega modo oscuro
Si el cambio afecta a un componente específico, menciónalo por nombre: “En ClientesView, agrega un campo de notas”. Así la IA hace cambios más precisos y quirúrgicos.

​
Modo Build vs Chat

En la barra inferior del chat hay un selector que define cómo interactúa la IA contigo:
ModoQué hace
Build 🔨La IA modifica el código de tu app. Es el modo por defecto.
Chat 💬Conversas con un agente sobre tu app sin tocar el código.
  • 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.
Usa Build para hacer cambios y Chat para entender el funcionamiento o explorar opciones antes de pedir una modificación.
Cambiar de tab o recargar la página reinicia el historial del modo Chat.

​
Los 4 tabs del editor

TabPara qué sirve
PreviewTu app en pantalla completa
ChatEditor de chat + preview lateral
CodeExplorador de archivos + editor + preview
DatosConexión con Databases dinámicas

​
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 existe theme.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 tiene data.ts, puedes editar los datos de forma visual sin tocar código:
AcciónCómo
Editar celdaClick en la celda para editar inline
Agregar filaBotón ”+ Fila” al final de la tabla
Eliminar filaIcono de papelera en la fila
Agregar columnaBotón ”+ Columna”
Eliminar columnaClick en el encabezado y elige eliminar
Cada cambio regenera data.ts y recompila automáticamente.

​
Editor de Theme

Personaliza colores sin escribir código. Accede desde Code y luego Theme (requiere theme.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.
También funciona vía chat: “Cambia el tema a verde oscuro con tipografía moderna”.

​
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.
Click en el ícono de ojo junto a una tabla conectada para previsualizar sus primeras filas.

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:
BadgeSignificado
v3 (gris)Estás en la versión más reciente
v1 (amarillo)Estás editando una versión anterior — no es la más reciente
Click en el badge para abrir el panel de historial, donde cada versión muestra su número y fecha.

​
Cargar vs Restaurar

CargarRestaurar
Qué haceTrae el contenido de esa versión al editor para previsualizar o iterarVuelve definitivamente a esa versión, creando una nueva versión más reciente
Genera versión nuevaSolo si iteras despuésDe inmediato
BadgeAmarillo si no es la más recienteVuelve a gris (nueva versión más reciente)
  • 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:
  1. Abrir el archivo problemático y editar manualmente
  2. Pedir al chat: “Corrige el error en el componente X”
  3. Reescribir el componente desde cero vía prompt
Ve a Code → Bugs para ver el detalle técnico del error.

​
Atajos útiles

AtajoAcción
Enter (en chat)Enviar prompt
Shift + EnterSalto de línea en chat
EscCancelar edición de título o slug
Cmd/Ctrl + S (en code)Guardar y recompilar
Cmd/Ctrl + BBuild manual
Arrastra el divisor vertical entre el panel izquierdo (editor/chat) y el preview para ajustar el espacio de cada uno.

​
Preguntas frecuentes

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”.
Sí. En el tab Code, click en Copiar JSON para obtener todos los archivos, o selecciona un archivo y copia su contenido directamente.
La IA ve los cambios y los respeta. Pero si tu código tiene errores, intenta corregirlos al aplicar la siguiente modificación.
El proceso se cancela. Si la app ya fue guardada, puedes volver a abrirla desde tu lista de proyectos.
Depende de cómo fue generada. Puedes pedir vía chat: “Hazla responsive para móvil”.
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.