> ## Documentation Index
> Fetch the complete documentation index at: https://012e27a-docs-2.manicule.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For every page in one file, fetch https://012e27a-docs-2.manicule.dev/llms-full.txt (large).
> To search and read these docs as tools, connect the MCP server at https://012e27a-docs-2.manicule.dev/api/mcp.
> Every agent surface: https://012e27a-docs-2.manicule.dev/.well-known/llms-manifest.json

# Cloud Studio Overview (/studio/overview)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 1056 · updated: 2026-11-12 -->
Related: [AI Chat & Context Pinning](/studio/ai-chat.md), [In-Browser Code Editor](/studio/code-editor.md), [Live Web Preview & Responsive Testing](/studio/live-preview.md), [Version Control & Git](/studio/version-control.md), [Integrated PTY Terminal](/desktop/terminal.md)

> Tour of the BhaiCode Cloud Studio browser workspace at app.bhaico.de.

**BhaiCode Cloud Studio** is an in-browser development workspace at
[app.bhaico.de](https://app.bhaico.de). Build, preview, and deploy production web
applications entirely in your browser — no compilers, Node.js, or local dev tools.

<CardGroup cols="3">
<Card title="Nothing to install" icon="browser">The compiler runs as WebAssembly in your browser.</Card>

<Card title="Live where you type" icon="eye">Sub-second hot reload with device viewports and a live console.</Card>

<Card title="Ship in one click" icon="rocket">Databases, edge hosting, and SSL provisioned for you.</Card>
</CardGroup>

## Workspace layout

| Area                        | What it does                                                                                                                           |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| **Top bar and hotbar**      | Project title, database and branch badges, purple **Deploy**, preview/code toggle, device viewports, inspect, plugins, reload, pop-out |
| **File explorer** (left)    | Full project tree; drag in assets, create folders, delete files                                                                        |
| **Studio sidebar**          | Navigation and settings; auto-collapses on open, toggle with `Cmd + B` / `Ctrl + B`                                                    |
| **AI chat pane** (center)   | Streaming edits, tool status, and diff cards from **Bhai**                                                                             |
| **Live preview** (right)    | Hot-reloading iframe running the real app                                                                                              |
| **Console drawer** (bottom) | `console.log`, warnings, failed requests, and database query logs                                                                      |

<Tip>Press `Cmd + P` / `Ctrl + P` any time to jump to a file, and `Cmd + S` / `Ctrl + S` to save.</Tip>

## Hotbar controls

| Control                       | Action                                                 |
| ----------------------------- | ------------------------------------------------------ |
| **Preview / Code**            | Switch between the running app and source files        |
| **Desktop · Tablet · Mobile** | 100%, 768px, and 375px viewports                       |
| **Inspect element**           | Click any element in the preview to open its component |
| **Plugins**                   | Shows active MCP plugins and connectors                |
| **Reload / Pop-out**          | Restart the preview or open it in a standalone tab     |
| **Deploy**                    | Publish to BhaiCode Global Edge, Vercel, or Netlify    |

## From prompt to production

<Steps>
<Step title="Open a project">Start from a prompt or a [starter template](/getting-started/templates). The
WebAssembly compiler boots instantly.</Step>

<Step title="Iterate with Bhai">Describe changes in English or any supported Indian language. Edits stream into the
preview, and each turn shows a diff card you can undo.</Step>

<Step title="Add a database (optional)">Open the **Databases** drawer and provision [Cloudflare D1](/databases/cloudflare-d1),
[Neon Postgres](/databases/neon-postgres), or [Supabase](/databases/supabase-postgres).</Step>

<Step title="Deploy">Pick a target in the Deploy dialog and publish — you get a live URL immediately.</Step>
</Steps>

## Explore Cloud Studio

<CardGroup cols="2">
<Card title="AI chat and context pinning" icon="message-square" href="/studio/ai-chat">Multi-turn iteration and `@file` references.</Card>

<Card title="In-browser code editor" icon="file-code" href="/studio/code-editor">Monaco with IntelliSense and AST-safe edits.</Card>

<Card title="Live preview and testing" icon="eye" href="/studio/live-preview">Responsive breakpoints, pop-out, and console debugging.</Card>

<Card title="Version control" icon="git-branch" href="/studio/version-control">Checkpoint snapshots and sync to GitHub or GitLab.</Card>
</CardGroup>