> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tai42.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Studio

> The desktop workbench for a running server — browse and exercise every surface from the browser.

The Studio is the visual workbench for a [server](/concepts/layering). It is a
React web UI that drives a running skeleton over its `/api/*` HTTP surface —
the same surface the [`tai` CLI](/reference/cli/index) calls — so anything you
do in the Studio you can also do from a terminal, and the reverse.

You browse and run [tools](/concepts/tools-and-extensions), apply
[extensions](/concepts/tools-and-extensions), author
[agents](/concepts/agents), render [templates](/concepts/storage-and-resources),
watch [live operations](/concepts/live-operations), install plugins from the
[marketplace](/marketplace/index), and provision API keys — all against one
self-hosted server.

<Frame caption="The Studio, signed in on the Tools screen.">
  <img className="block dark:hidden" src="https://mintcdn.com/tai42/xZQ4KkTcYRU0f7y9/images/studio/tools-light.png?fit=max&auto=format&n=xZQ4KkTcYRU0f7y9&q=85&s=44784161ed838c2583a34a8245bdd0b0" alt="The Studio Tools screen listing the tools a server loaded." width="1440" height="900" data-path="images/studio/tools-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/tai42/xZQ4KkTcYRU0f7y9/images/studio/tools-dark.png?fit=max&auto=format&n=xZQ4KkTcYRU0f7y9&q=85&s=82132675dd7b6deca0b2623aff528ef0" alt="The Studio Tools screen listing the tools a server loaded." width="1440" height="900" data-path="images/studio/tools-dark.png" />
</Frame>

<CardGroup cols={2}>
  <Card title="The screens" icon="table-columns" href="/studio/screens">
    A tour of every surface in the sidebar.
  </Card>

  <Card title="Running tools" icon="play" href="/studio/running-tools">
    Synchronous runs versus detached background runs.
  </Card>

  <Card title="Admin console & live ops" icon="sliders" href="/studio/admin-console">
    Health, metrics, settings, and live reloads.
  </Card>

  <Card title="API keys" icon="key" href="/studio/api-keys">
    Sign in and provision keys for a deployment.
  </Card>

  <Card title="Deploying the Studio" icon="cloud-arrow-up" href="/studio/deploy">
    Serve the built app from the skeleton.
  </Card>

  <Card title="Authoring a plugin" icon="puzzle-piece" href="/studio/plugins">
    Extend the shell with pages, panels, tabs, and nav entries.
  </Card>

  <Card title="Studio SDK reference" icon="code" href="/reference/studio-sdk/index">
    The plugin contract, hooks, and shared components.
  </Card>
</CardGroup>

<Note>
  The Studio has no user database of its own. It holds a deployment API key in the
  browser and sends it on every request — treat that key like a password. See
  [API keys](/studio/api-keys) for how sign-in works.
</Note>

The screenshots throughout this section are captured from a live server booted
with the standard toolbox and the ready-made agents. Your own screens show the
tools, agents, and content your [manifest](/concepts/manifest) loads.