# The Studio

The <Term id="studio">Studio</Term> is your <Term id="project">project</Term>'s workspace in the cloud. It holds your code, runs your app while you build, and gives you an AI that reads your data, writes code and <Term id="deploy">deploys</Term>. Idea to live app, without switching tools.

<Screenshot src="/docs/_media/studio-ai-chat.png" alt="The AI chat inside a project's Studio" caption="The AI tab inside a project's Studio." />

## Before you start [#before-you-start]

- Create a project first. See [Create a project](/docs/projects/create-a-project).
- A running Studio uses your workspace's <Term id="credits">credits</Term>, priced per minute. Unused, it stops on its own and keeps your work.

## Open the Studio [#open-the-studio]

<ForEveryone>
<Steps>
<Step>
### Find your project [#find-your-project]
Go to <AppLink to="projects" /> and find the project.
</Step>
<Step>
### Start it [#start-it]
Select **Start Studio** and confirm. A running Studio shows **Open Studio**, which opens it in a new tab.
</Step>
<Step>
### Wait for Running [#wait-for-running]
The Studio checks your plan and credits, finds capacity, restores your workspace and starts the editor. The status goes from **Starting** to **Running**.
</Step>
</Steps>

<Screenshot src="/docs/_media/dashboard-project-page-not-running.png" alt="A Studio starting, with its start-up steps" />
</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` starts the Studio, or attaches to the one already running. `studios.close` saves the workspace and stops it.
</ForDevelopers>

<Callout type="info" title="Tip">
Split the view to keep the **AI** and the **Preview** side by side.
</Callout>

## The tabs [#the-tabs]

| Tab | What it is for |
| --- | --- |
| **AI** | Talk to Klarety AI or open your own AI tool. See [How the AI harness works](/docs/ai-harness). |
| **Preview** | See the app you are building, running inside the Studio. |
| **Code** | A full code editor on your project's files. |
| **Data** | Your project's data and connections. |
| **Agents** | The <Term id="agent">agents</Term> this project runs. See [Agents](/docs/agents). |
| **Deploy** | Put your app online and manage its versions. See [Deploy an app](/docs/deploy/deploy-an-app). |
| **Settings** | The project's settings. See [Project settings](/docs/projects/settings). |

<Screenshot src="/docs/_media/project-page-running-klarety-code-new-session.png" alt="A Studio with the AI and Preview tabs split side by side and the side panel open" />

In a tab's menu, **Split to the left** or **Split to the right** shows two tabs side by side, and **Open in a new browser tab** moves it out.

The side panel shows **Files** and **AI sessions**: what each AI is doing (Working, Waiting, Finished) and earlier conversations to **Continue** or **Read**.

<Screenshot src="/docs/_media/project-page-studio-code.png" alt="The Code tab in a Studio with the file tree and editor" />

<Screenshot src="/docs/_media/project-page-terminal.png" alt="The Terminal tab in a Studio" />

## The project overview [#the-project-overview]

The project page has shortcuts:

- **Your app**: whether it is live, and its address.
- **Your data**: see what changed, and undo it.
- **Keys**: passwords and settings your app uses. See [Secrets and environment variables](/docs/projects/project-secrets).
- **Code**: the GitHub repository your code is saved in.

The **Activity** list shows deploys and who opened the Studio.

<Screenshot src="/docs/_media/project-activity.png" alt="A project's overview with its Activity list" />

## Share what you are running [#share-what-you-are-running]

To show a running app to the project's people, share its port in project settings under **Sharing**: choose the **Port** and **For how long**. They still sign in, and only they can open it. **Stop sharing** ends it. For anyone else, deploy it.

## When the Studio stops [#when-the-studio-stops]

- After a set time with no typing, clicks or runs.
- After a longer time with nobody opening it, even if the AI is busy, so a forgotten task cannot keep spending credits.
- A notice shows first: **Keep working** keeps it open. Your work is saved either way.

**Stop Studio** stops it yourself, saving first. Set these times in project settings, under **Studio**.

## If something goes wrong [#if-something-goes-wrong]

<Accordions>
<Accordion title="This Studio did not start">
Nothing was lost. Select **Start again**.
</Accordion>
<Accordion title="Saving is taking longer than it should">
The Studio is still saving your workspace before it stops. Wait, then open it again.
</Accordion>
<Accordion title="You are out of credits">
A Studio cannot start without credits. See [Credits](/docs/workspace/credits).
</Accordion>
</Accordions>

## Next steps [#next-steps]

- [Code review with Buddy](/docs/projects/buddy)
- [How the AI harness works](/docs/ai-harness)
- [Project settings](/docs/projects/settings)