Cómo usar Puente Studio con Claude Code, Cursor, ChatGPT y otros coding agents.
Puente Studio incluye un skill (skill_puente_studio.md) — un markdown estructurado que enseña a cualquier coding agent cómo crear y editar apps de Puente OS vía API REST.El flujo es siempre el mismo: cargas el skill como contexto, le das al agente tu BASE_URL y STUDIO_KEY, y le pides lo que quieras hacer. El agente arma las llamadas HTTP por ti.
Esto NO es Model Context Protocol (MCP). Es un patrón más simple: skill markdown + un agente que sabe leerlo. Funciona en cualquier agente que pueda hacer llamadas HTTP (la mayoría) sin instalar nada extra.
Una vez cargado el skill, le puedes pedir cosas como:
Crea una app de inventario con tabla de productos y un dashboard de stock bajoBaja la app con id 545, agrega un botón para exportar a CSV, sube los cambiosCrea una tabla de clientes con columnas nombre, email, plan (select: free/pro/enterprise)y conéctala a la app 545 con permisos read+writeRegenera la API key del artefacto 545 — me filtraron una credencial
El agente sigue las reglas de comportamiento del skill (preserva app_content completo en updates, confirma operaciones destructivas, guarda IDs y keys al crear, etc.).
Cuando trabajes con apps de Puente OS, sigue ESTRICTAMENTE lasinstrucciones del archivo skill_puente_studio.md de este repo.Lee el .env para obtener BASE_URL y STUDIO_KEY antes de cualquieroperación. Nunca expongas la STUDIO_KEY en outputs ni código de app.
3
Abre el composer (Cmd+I)
Pídele algo como:
Crea una app de tickets de soporte con vista Kanban.Después crea una tabla de tickets y conéctala a la app.
Cursor lee el skill, ejecuta los curls y te muestra IDs y URL final.
Puedes crear un Custom GPT en ChatGPT con el skill como instructions y los endpoints de Puente como Actions vía OpenAPI.
1
Crear un nuevo GPT
En ChatGPT → Explore GPTs → Create.
2
Pegar el skill como Instructions
Copia el contenido de skill_puente_studio.md en el campo Instructions.Reemplaza los placeholders {BASE_URL} y {STUDIO_KEY} con tus valores reales.
Si el GPT es público, NO pegues tu STUDIO_KEY real ahí — cualquier usuario la vería. Para un GPT público, deja un placeholder y haz que el usuario configure su propia key vía Actions auth.
3
Configurar Actions (opcional)
Para llamadas HTTP nativas, agrega un schema OpenAPI con los endpoints de /studio/.... ChatGPT puede invocarlos sin armar curls manuales.Importa el OpenAPI desde la referencia de API o desde el spec que provee Puente directamente.
4
Probar
Lista mis artefactos.
Para uso personal (no publicar), poner la STUDIO_KEY directo en las Instructions funciona — solo tú la ves.
En la app web de Claude puedes crear un Project con el skill como knowledge base.
1
Nuevo Project
Claude.ai → New project → ponle nombre Puente Dev.
2
Agregar el skill al knowledge
Sube skill_puente_studio.md como archivo del project. Claude lo lee en cada conversación.
3
Custom instructions del project
Eres Puente Dev. Sigue las reglas del archivo skill_puente_studio.md.Mi BASE_URL: https://puente-backend-721178029791.southamerica-west1.run.app/Mi STUDIO_KEY: puente_studio_xxxxxxxxxxxxxxxxxxxxCuando necesites ejecutar requests, escríbelos como curly yo los corro localmente, después te paso el output.
4
Conversar
El project preserva el contexto entre sesiones. Cada conversación arranca con el skill cargado.
Cualquier coding agent que pueda leer un markdown y ejecutar comandos sirve. El patrón es siempre:
Cargar skill_puente_studio.md como contexto inicial o knowledge
Hacer accesible BASE_URL + STUDIO_KEY (vía env vars o pegado en el prompt)
Pedir tareas en lenguaje natural — el agente arma los curls
Para Continue: agrega el skill como @File reference.Para Aider: pasa el archivo con aider skill_puente_studio.md.
[Tú]Crea una app de seguimiento de pedidos con:- Vista principal: tabla de pedidos con filtros por estado- Detalle: panel lateral al hacer click en un pedido- Tabla de pedidos con: cliente, monto, estado (pendiente/pagado/enviado), fecha[Agente]Propongo esta estructura:ARCHIVOS:- index.tsx- App.tsx (estado global + routing simple)- data.ts (interfaces TS)- theme.ts- components/PedidosList.tsx- components/PedidoDetail.tsxTABLA: pedidos- cliente (text, requerido)- monto (number, requerido)- estado (select: pendiente/pagado/enviado, requerido)- fecha (date, requerido)Confirma para crear el artefacto y la tabla.[Tú] Sí, dale.[Agente]1. Creando artefacto... → POST /studio/artefactos → id: 547 → public_id: 9a8b7c6d-... → api_key: puente_artifact_xxxxx (GUARDA ESTA - solo se muestra una vez)2. Creando tabla "pedidos"... → POST /studio/tablas → tabla_id: f733d7a9-7e1d-457c-...3. Concediendo acceso del artefacto a la tabla... → POST /studio/artefactos/547/tablas-acceso → permisos: ["read", "write"]4. App pública disponible en: https://app.puente.xyz/public/9a8b7c6d-.../¿Qué quieres ajustar?
