Vibe Studio is the workspace IDE. Customers open it from studio.appmint.io, pick a dev environment, and get a code editor, a live preview, and an AI agent in one screen. The agent edits files in the workspace; the preview pane re-renders. When the customer is ready, one click deploys the app to a SpinForge subdomain.
The repo is /Users/imzee/projects/agent-zero/vibe-studio/. It's a Vite + React + TypeScript app — index.html, src/, Tailwind, Zustand for state, the usual stack.
What you can do in it
- Edit code — Monaco-based editor with file tree, multi-file tabs, and find-in-files.
- Talk to an AI agent — chat panel that drives agent-zero. The agent reads the workspace, edits files, runs shell commands, and explains what it changed.
- Live preview — iframe pane pointing at the workspace's preview URL, refreshes after each edit.
- Manage dev envs — create, rename, delete, and switch between projects under your org.
- Plan work — a kanban-style planner stored at
.vibe/planner.json, editable by both you and the agent. - Git operations — init, clone, commit, push, pull, set remote — without leaving the studio.
- Deploy to SpinForge — one button. Status streams over SSE.
- Attach custom domains — point your own domain at the dev env, validate DNS, get TLS automatically.
The workspace identity
Every workspace has a .vibe/project.json file that pins its identity — orgId, projectName, owner.email, appAudience, framework, domains. The agent reads this on every turn; the file is the source of truth that prevents the AI from inventing organization ids, audience types, or domain names. See Workspace identity for the schema and mutation rules.
The runtime split
Vibe Studio is the front-end. It doesn't run the agent itself — that happens inside session-manager. The split looks like this:
| Concern | Lives in |
|---|---|
| Editor UI, file tree, preview iframe, planner UI, deploy button | Vibe Studio (Vite/React) |
| Workspace files on disk | session-manager (workspaces folder) |
| Agent process | session-manager (spawns agent-zero per session) |
| Socket bridge between editor and agent | session-manager (bridge.service.ts) |
| SpinForge partner key | session-manager environment |
| Authoritative orgId / projectName / audience | AppEngine + workspace .vibe/project.json |
Vibe Studio is conceptually thin — most of the smarts are in session-manager and agent-zero. This split is deliberate: the browser never sees credentials it shouldn't, and the agent runs server-side where it can call AppEngine without CORS pain.
State management
The studio uses Zustand (src/store/) for app state. Notable slices:
- Active dev env (orgId, projectName, identity from
project.json). - Open files, dirty flags, cursor positions.
- Chat thread with the agent — message history, streaming state, tool calls.
- Planner cards (mirrored from
.vibe/planner.json). - Deploy job status.
Zustand was picked over Redux because the studio's state is mostly local — files open in tabs, current chat thread, current planner view — and the few pieces that need to survive reload (last-opened project, theme) go to localStorage directly.
Why Vite, not Next.js
The studio is a single-page app. There's no SEO, no SSR, no server rendering of any kind — every page is a client-side route inside the editor shell. Vite's dev server is faster than Next's for this use case, and the production build is a static bundle that can be served from any CDN. session-manager doesn't host the studio; session-manager only handles workspace sessions and deploys.
Audience
Two distinct user types use Vibe Studio:
- Builders — the people who own the workspace. Most of the docs target this audience.
- Cohost guests — view-only collaborators invited via a cohost token. They can watch the editor and the agent stream but can't edit or deploy. The cohost flow is in
session-manager/src/services/cohost.service.ts.
End users of the app being built never touch Vibe Studio — they hit the deployed site at <orgId>-<projectName>.spinforge.dev (or the attached custom domain).
When to read which page
- First time using it — Quickstart.
- Understanding the identity model — Workspace identity.
- Confused about who the auth applies to — Actors and auth.
- Want better outputs from the agent — Working with the agent.
- Detected framework is wrong — Frameworks.
- Ready to ship — Deploy to SpinForge and Domains.