Skip to main content
Puente Studio es el dev kit que te permite operar Puente OS fuera del editor visual — desde tu terminal local, desde un coding agent (Cursor, Claude Code, Continue, etc.) o desde cualquier cliente HTTP. Te da control completo sobre los artefactos (apps web React/TypeScript hosteadas en Puente) y las tablas de datos que esas apps consumen.

​
Cuándo usar Studio vs. App Builder

Usa App Builder cuando...

  • Quieres iterar rápido con un prompt en lenguaje natural
  • Estás explorando ideas o haciendo un MVP rápido
  • No necesitas integrar con tu workflow de dev local

Usa Puente Studio cuando...

  • Quieres versionar el código en Git de tu equipo
  • Editas la app desde tu IDE con LSP, linter, etc.
  • Operas con un coding agent (Cursor, Claude Code)
  • Necesitas crear apps programáticamente (CI/CD, scripts)
Las apps creadas vía Studio y vía App Builder son el mismo tipo de artefacto. Puedes crear una app en App Builder y seguir editándola desde Studio (o al revés).

​
Qué incluye Studio

PiezaPara qué sirve
CLI scripts (Node.js)Bajar y subir artefactos entre tu disco local y Puente
API REST /studio/...Endpoints privados para crear/leer/actualizar artefactos y tablas
Skill markdownDocumentación estructurada que cargas como system prompt en coding agents

​
Vocabulario

Es una app web hosteada en Puente OS. Puede ser una app React/TypeScript multi-archivo (recomendado) o un HTML simple (legacy).Cada artefacto tiene:
  • Un id numérico para operar vía API privada
  • Un public_id (UUID) que lo identifica de forma única
  • Una api_key propia (puente_artifact_xxx) generada al crearlo
Tu credencial maestra de tipo Platform API Key. Empieza con puente_studio_xxx. Se genera desde app.puente.xyz → Configuración.Da acceso a todos los artefactos y tablas del equipo asociado. Solo se usa en endpoints privados (/studio/...).
Nunca embebas la STUDIO_KEY en el código del artefacto. Es credencial de administración.
Credencial por artefacto (puente_artifact_xxx) que se genera automáticamente al crearlo. El frontend del artefacto la usa para leer/escribir sus tablas.Es la única credencial que es seguro embeber en el bundle del artefacto.
Estructura de datos persistente. Cada tabla tiene un uuid y una lista de columnas tipadas (text, number, date, boolean, select).Para que un artefacto pueda leer/escribir una tabla, debe tener acceso explícito con permisos (read, write, delete).
UUID que identifica un artefacto. Lo obtienes con GET /studio/artefactos/{id}/meta.

​
Flujo típico

1

Generar tu STUDIO_KEY

Desde app.puente.xyz → Configuración → API Keys.
2

Setup local

Clona puente_studio_repo y crea tu .env. Ver Setup.
3

Editar desde tu editor o coding agent

Baja un artefacto, lo editas con LSP, lo subes. O dejas que un coding agent haga todo el flujo. Ver Coding agents.
4

(Opcional) Conectar tablas

Crea tablas, concede acceso al artefacto y consume los datos desde el frontend.

​
Stack del artefacto

Las apps de Puente OS son React + TypeScript multi-archivo, sin dependencias externas más allá de lo que el runtime de Puente provee. 
index.tsx                    Punto de entrada
App.tsx                      Componente raíz
data.ts                      Tipos + datos
theme.ts                     Tokens de diseño
components/
  Dashboard.tsx
  VistaA.tsx
  • No importes archivos CSS desde index.tsx. El bundler inyecta estilos automáticamente.
  • No uses módulos de Node (os, fs, path, crypto, etc.). El runtime es browser.
  • Estilos: usa exclusivamente clases Tailwind y variables CSS del tema.

​
Siguiente paso

Setup local

Clonar el repo, configurar tu .env y correr los scripts.

Coding agents

Usar el skill con Claude Code, Cursor y otros agentes.

API Reference

Referencia completa de endpoints REST.