> ## Documentation Index
> Fetch the complete documentation index at: https://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://docs-2.manicule.dev/llms-full.txt (large).
> To search and read these docs as tools, connect the MCP server at https://docs-2.manicule.dev/api/mcp.
> Every agent surface: https://docs-2.manicule.dev/.well-known/llms-manifest.json

# Cloud Studio Overview (/studio/overview)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 692 · updated: 2026-11-11 -->
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 Integration](/studio/version-control.md), [Integrated PTY Terminal](/desktop/terminal.md)

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

**BhaiCode Cloud Studio** is an in-browser development workspace at [app.bhaico.de](https://app.bhaico.de). It lets you build, preview, and deploy production web applications entirely in your browser.

***

## Workspace Layout

```text
┌────────────────────────────────────────────────────────────────────────────────────────┐
│ [BhaiCode]  My Project (Next.js 15)   [DB: Supabase]  [Git: main]      [Share] [ Deploy ]│
├─────────────┬───────────────────────────┬──────────────────────────────────────────────┤
│ FILE TREE   │ AI CHAT (Bhai)            │ LIVE WEB PREVIEW / CODE EDITOR               │
│ ├ src/      │                           │                                              │
│ │ ├ app/    │ Prompt:                   │ ┌─ Preview ─────────── [Mobile|Tablet|Desk]─┐│
│ │ ├ comp/   │ "Add currency toggle and  │ │                                           ││
│ │ └ lib/    │  responsive glass cards"  │ │  [ INR ₹ | USD $ ]                        ││
│ ├ public/   │                           │ │                                           ││
│ └ config    │ Edits streamed live.      │ │  Interactive Live Preview                 ││
│             │ [Inspect Diff]            │ └───────────────────────────────────────────┘│
├─────────────┴───────────────────────────┴──────────────────────────────────────────────┤
│ CONSOLE & LOGS: In-browser WebAssembly compiler ready (0 errors)            [Terminal] │
└────────────────────────────────────────────────────────────────────────────────────────┘
```

### Key Panels

1. **Top Navigation & Hotbar**: Project title, database indicator, Git branch, and the purple **Deploy** button. The floating hotbar includes:
   * **Preview / Code Toggle**: Switch between live interactive application and source code.
   * **Device Viewports**: Desktop (fluid), Tablet (768px), Mobile (375px).
   * **Inspect Element**: Click any UI element in preview to jump to its source component.
   * **Plugins Count**: Shows active MCP plugins and connectors.
   * **Refresh & Pop-out**: Reload preview or open in a standalone browser tab.
2. **Left File Explorer**: Full tree view of project files. Drag and drop assets, create folders, or delete files.
3. **Collapsible Studio Sidebar**: Auto-collapses on project open to give maximum workspace space. Toggle manually anytime with `Cmd + B` / `Ctrl + B`.
4. **AI Chat Pane**: Conversational interface with **Bhai**. Displays streaming code edits, tool execution status, and diff cards.
5. **Live Web Preview**: Hot-reloading iframe compiling code via in-browser WebAssembly.
6. **Console Drawer**: Bottom drawer showing client-side `console.log`, warnings, network requests, and database query executions.