# El Studio

El <Term id="studio">Studio</Term> es el espacio de su <Term id="project">proyecto</Term> en la nube. Guarda su código, ejecuta su aplicación mientras la construye y le da una IA que lee sus datos, escribe código y <Term id="deploy">despliega</Term>. De la idea a la aplicación en vivo, sin cambiar de herramienta.

<Screenshot src="/docs/_media/studio-ai-chat.png" alt="El chat de IA dentro del Studio de un proyecto" caption="La pestaña IA dentro del Studio de un proyecto." />

## Antes de empezar [#antes-de-empezar]

- Primero cree un proyecto. Consulte [Crear un proyecto](/docs/es/projects/create-a-project).
- Un Studio en marcha usa los <Term id="credits">créditos</Term> del espacio de trabajo, cobrados por minuto. Sin uso, se detiene solo y conserva su trabajo.

## Abrir el Studio [#abrir-el-studio]

<ForEveryone>
<Steps>
<Step>
### Busque su proyecto [#busque-su-proyecto]
Vaya a <AppLink to="projects" /> y busque el proyecto.
</Step>
<Step>
### Inícielo [#inícielo]
Seleccione **Iniciar Studio** y confirme. Un Studio en marcha muestra **Abrir Studio**, que lo abre en una pestaña nueva.
</Step>
<Step>
### Espere a En ejecución [#espere-a-en-ejecución]
El Studio verifica su plan y sus créditos, busca capacidad, restaura su espacio de trabajo e inicia el editor. El estado pasa de **Iniciando** a **En ejecución**.
</Step>
</Steps>

<Screenshot src="/docs/_media/dashboard-project-page-not-running.png" alt="Un Studio arrancando, con sus pasos de inicio" />
</ForEveryone>

<ForDevelopers>
```python title="open_studio.py"
import time

from klarety import Nexus

nx = Nexus.connect()
project_id = "YOUR_PROJECT_ID"

nx.studios.open(project_id)
while (studio := nx.studios.get(project_id))["state"] != "READY":
    time.sleep(5)
print(studio["editor_url"])

nx.studios.close(project_id)
```

`studios.open` inicia el Studio, o se une al que ya está en marcha. `studios.close` guarda el espacio de trabajo y lo detiene.
</ForDevelopers>

<Callout type="info" title="Consejo">
Divida la vista para tener la **IA** y la **Vista previa** lado a lado.
</Callout>

## Las pestañas [#las-pestañas]

| Pestaña | Para qué sirve |
| --- | --- |
| **IA** | Hable con Klarety AI o abra su propia herramienta de IA. Consulte [Cómo funciona el AI harness](/docs/es/ai-harness). |
| **Vista previa** | Vea la aplicación que construye, en marcha dentro del Studio. |
| **Código** | Un editor de código completo sobre los archivos del proyecto. |
| **Datos** | Los datos y las conexiones de su proyecto. |
| **Agentes** | Los <Term id="agent">agentes</Term> de este proyecto. Consulte [Agentes](/docs/es/agents). |
| **Despliegue** | Ponga su aplicación en línea y administre sus versiones. Consulte [Desplegar una aplicación](/docs/es/deploy/deploy-an-app). |
| **Configuración** | La configuración del proyecto. Consulte [Configuración del proyecto](/docs/es/projects/settings). |

<Screenshot src="/docs/_media/project-page-running-klarety-code-new-session.png" alt="Un Studio con las pestañas IA y Vista previa lado a lado y el panel lateral abierto" />

Puede ver dos pestañas lado a lado desde el menú de una pestaña, o abrir una en su propia pestaña del navegador.

El panel lateral muestra **Archivos** y **Sesiones de IA**: qué hace cada IA ahora y conversaciones anteriores para **Continuar** o **Leer**.

<Screenshot src="/docs/_media/project-page-studio-code.png" alt="La pestaña Código de un Studio con el árbol de archivos y el editor" />

<Screenshot src="/docs/_media/project-page-terminal.png" alt="La pestaña Terminal de un Studio" />

## El resumen del proyecto [#el-resumen-del-proyecto]

La página del proyecto tiene accesos directos:

- **Su aplicación**: si está en vivo y su dirección.
- **Sus datos**: vea qué cambió y deshágalo.
- **Claves**: contraseñas y ajustes que usa su aplicación. Consulte [Secretos y variables de entorno](/docs/es/projects/project-secrets).
- **Código**: el repositorio de GitHub donde se guarda su código.

La lista de **Actividad** muestra los despliegues y quién abrió el Studio.

<Screenshot src="/docs/_media/project-activity.png" alt="La vista general de un proyecto con su lista de Actividad" />

## Compartir lo que está ejecutando [#compartir-lo-que-está-ejecutando]

Para mostrar una aplicación en marcha a las personas del proyecto, comparta su puerto en la configuración, en **Compartir**: elija el **Puerto** y **Por cuánto tiempo**. Igual inician sesión, y solo ellas pueden abrirla. **Dejar de compartir** termina. Para cualquier otra persona, despliéguela.

## Cuando el Studio se detiene [#cuando-el-studio-se-detiene]

- Tras un tiempo sin escribir, hacer clic ni ejecutar nada.
- Tras un tiempo más largo sin que nadie lo abra, aunque la IA siga trabajando, para que una tarea olvidada no siga gastando créditos.
- Antes muestra un aviso: **Seguir trabajando** lo mantiene abierto. Su trabajo se guarda de todos modos.

**Detener Studio** lo detiene usted mismo, guardando primero. Ajuste estos tiempos en la configuración del proyecto, en **Studio**.

## Si algo sale mal [#si-algo-sale-mal]

<Accordions>
<Accordion title="Este Studio no se inició">
No se perdió nada. Seleccione **Iniciar de nuevo**.
</Accordion>
<Accordion title="El guardado está tardando más de lo normal">
El Studio sigue guardando su espacio de trabajo antes de detenerse. Espere y ábralo de nuevo.
</Accordion>
<Accordion title="Se quedó sin créditos">
Un Studio no puede iniciar sin créditos. Consulte [Créditos](/docs/es/workspace/credits).
</Accordion>
</Accordions>

## Siguientes pasos [#siguientes-pasos]

- [Revisión de código con Buddy](/docs/es/projects/buddy)
- [Cómo funciona el AI harness](/docs/es/ai-harness)
- [Configuración del proyecto](/docs/es/projects/settings)