Documentation

Vibe Studio quickstart

Open a workspace, edit a file with the agent, deploy to SpinForge.

This walks the full builder loop end to end. By the finish line you have a working dev environment, a file the AI just edited for you, and a public URL.

Before you start

You need:

  • An AppMint account. Sign up at appmint.io.
  • A modern browser. The studio uses Monaco, ResizeObserver, and the Web Audio API — Chrome 110+, Firefox 110+, Safari 16+.
  • A few minutes. The first deploy takes about 90 seconds; subsequent deploys are faster.

The flow at a glance

  1. 1

    Open Vibe Studio

    Go to https://studio.appmint.io and sign in. The first screen lists your dev environments — empty if this is your first visit.

  2. 2

    Create a dev environment

    Click New project. The studio asks for a project name and an optional description.

    • Name — kebab-case, no spaces. This becomes the SpinForge subdomain (<orgId>-<name>.spinforge.dev).
    • Description — what you want to build. If you fill this in, session-manager skips the HTML scaffold so the agent can pick the right framework based on your description.

    session-manager calls POST /api/dev-envs to allocate a workspace folder, stamp .vibe/project.json, and return the project record. You're redirected into the editor.

  3. 3

    Look around

    Three panes:

    • Left — file tree and tabs. The new workspace has index.html, main.js, and a CLAUDE.md rules file. Click any to open in the editor.
    • Centre — Monaco editor for the open file.
    • Right — preview iframe pointing at /preview/<orgId>/<projectName>/. session-manager serves the workspace as static files at this URL so the iframe always reflects the current state on disk.
    • Bottom — chat with the agent.
  4. 4

    Ask the agent for something

    Type a request into the chat panel. Be specific:

    Replace the contents of index.html with a centered hero
that says "Welcome to my site" and a button that scrolls
to a contact section. Use Tailwind from a CDN.

    The agent (running inside session-manager as a-full or a-mini) streams its plan, then streams tool calls — Read index.html, Write index.html, etc. After each Write, the preview pane refreshes and you see the change live.

  5. 5

    Tweak by hand

    You can edit in Monaco directly. The agent watches the file system, so the next time you ask a question it sees your changes too. There's no "lock the file while the agent works" — both you and the agent edit the same files.

    If you and the agent are about to clobber each other (you're typing while it's writing), the editor shows a yellow indicator. Save manually before re-prompting.

  6. 6

    Use the planner

    Open the planner panel (top right). It's a kanban view of cards stored in .vibe/planner.json. Drag cards between Backlog / In Progress / Done.

    The agent can also read and write planner cards — try asking "Plan out the next three features as planner cards." Each card stores acceptance criteria and a log; the agent appends to the log as it works.

  7. 7

    Commit your work

    Open the git panel. session-manager wraps git commands so you can git init, git commit, set a remote, and git push without a terminal. The repo is real git on disk in the workspace folder.

    > git status
On branch main
Untracked files: index.html, main.js, CLAUDE.md

> git init && git commit -am "initial scaffold"

    The studio shows status and stages files; clicking commit calls POST /api/git/<orgId>/<projectName>/commit on session-manager.

  8. 8

    Deploy to SpinForge

    Click Launch in the top right, then Deploy to SpinForge. The studio:

    1. Reads attached custom domains from AppMint.
    2. POSTs /api/deploy/spinforge/<orgId>/<projectName> on session-manager with your AppMint JWT.
    3. session-manager returns a jobId immediately and starts the deploy in the background.
    4. The studio subscribes to /api/deploy/job/<jobId>/stream (SSE) and shows each step's message: init → build → create-site → package → upload → done.

    When the job finishes, the studio shows the live URL. Click it to open https://<orgId>-<projectName>.spinforge.dev in a new tab.

  9. 9

    Iterate

    Edit, ask the agent, deploy again. Each deploy is a fresh package — there's no incremental upload, but for small workspaces the whole thing is quick.

    To roll back, look at deploy job history (GET /api/deploy/jobs/<orgId>/<projectName>) and re-deploy from a previous commit by checking it out first.

Common first-run snags

  • "Workspace not found" — .vibe/project.json is missing or malformed. Reload the studio; the back-fill route (POST /api/dev-envs/<orgId>/<projectName>/sync-ai-instructions) will recreate it.
  • The agent ignores .vibe/project.json — verify the file exists and has orgId, projectName, owner. The agent's instructions hard-require these.
  • Deploy fails at package — the workspace probably has a node_modules/ that's too big to zip. Add node_modules to .gitignore and re-deploy; the package step skips ignored paths.
  • Live URL 404s — DNS hasn't propagated. SpinForge takes ~30 seconds for fresh subdomains. Wait, refresh.

Next