Cloud Studio Overview
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. 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
- 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.
- Left File Explorer: Full tree view of project files. Drag and drop assets, create folders, or delete files.
- Collapsible Studio Sidebar: Auto-collapses on project open to give maximum workspace space. Toggle manually anytime with
Cmd + B/Ctrl + B. - AI Chat Pane: Conversational interface with Bhai. Displays streaming code edits, tool execution status, and diff cards.
- Live Web Preview: Hot-reloading iframe compiling code via in-browser WebAssembly.
- Console Drawer: Bottom drawer showing client-side
console.log, warnings, network requests, and database query executions.