Skip to main content

Vibecode

Vibecode is the AutoBot inside the App Builder. Describe the app you want — "a client portal where customers chat with my SupportAgent and see their invoices" — and it explores your files and published resources, proposes a plan, and writes the code as per-file diffs you review and apply, with the live preview refreshing as changes land.

What it's for​

The App Builder hosts real React apps, and writing one by hand means files, routing, styling, and wiring calls to your agents, tools, and tables. Vibecode compresses that into a conversation: it reads your existing files, knows your published tools, agents, and AutessaDB schemas, and produces working code you can refine — in chat or directly in the editor, since everything it writes is ordinary app source. It's the only AutoBot with resumable sessions, so a build can span days without losing the thread.

Open an app in the App Builder and click the AutoBot button in the editor toolbar (in narrow windows it moves into the More actions menu). The editor switches to a two-pane layout — chat on the left, live preview on the right — with a draggable divider between them. Minimizing collapses the chat to a Resume Autobot pill so you can hand-edit code and pop back in.

Key concepts​

  • Sessions — Vibecode conversations persist per app. The welcome screen offers Start New Conversation plus your recent sessions ("Or continue where you left off"), each with an auto-generated summary, timestamps, and a state badge (active, Pending when changes await your decision, or closed). Resuming reloads the full history; the header's conversation switcher jumps between sessions mid-build.
  • Plan cards — before touching code, AutoBot posts an Implementation Plan card: a summary, numbered steps, and the files each step affects. The plan is informational — your approval gate comes at the changes card — but it's the moment to redirect the design cheaply, before any code is written.
  • Changes cards — proposed edits arrive as an amber "N file(s) will be modified" card. Each file row is badged CREATE, EDIT, DELETE, or RENAME and expands to a line-by-line diff (or a preview of new files). Apply Changes writes them and refreshes the preview; Reject Changes discards. The chat input locks until you decide — or flip on the Auto apply toggle in the input footer to have changes land automatically.
  • Tool-call cards — every action AutoBot takes (viewing and searching files, listing your published tools, agents, and tables, web searches, proposing plans) shows as a collapsible card with a status indicator; expand one to see the exact arguments and result.
  • Frontend changes only — a toggle on the session-start screen. When on, AutoBot builds frontend-only and won't read your backend resources (tables, agents, tools) — useful for mocking up UI before the backend exists. It's fixed per conversation; start a new session to change it.
  • Credits — Vibecode draws on your company's daily and weekly AI credit allowances. When a limit is hit, a Daily/Weekly Credit Limit Reached banner appears and generation pauses until the window resets. See Usage & Limits.
  • Resource registration (autessa.config.json) — every Autessa resource an app uses (tables, agents, tools) is registered by logical name in the app's autessa.config.json, and the generated code looks resources up through it rather than hardcoding IDs. You rarely touch this file: when you name a table or agent in chat, AutoBot discovers it with its listing tools and registers it for you. If generated code can't find a resource, this file is the first place to look.

How to build with Vibecode​

  1. In your app's editor, click AutoBot, then Start New Conversation (enable Frontend changes only first if you want a mock-data build).
  2. Describe the app in terms of outcomes — the screens, who uses them, and which agents, tools, or tables they should connect to. Name existing resources so AutoBot wires to them instead of inventing stand-ins.
  3. Review the Implementation Plan card; if the structure is off, say so before code gets written.
  4. When the changes card appears, expand the diffs, then Apply Changes — the file tree updates and the preview reloads. Iterate in chat, or edit any file yourself; press the red stop button anytime to interrupt a generation mid-stream.
  5. When you're happy, close AutoBot and publish the app as usual.

Everything Vibecode writes is marked AI-generated in the panel header — review diffs before applying, especially deletes and renames, exactly as you would a teammate's pull request.

Tips​

  • One feature per message — "add an invoices page reading from my Invoices table" beats a paragraph of five asks; the plan and diff stay reviewable.
  • Use sessions as branches of thought — start a new conversation for a new area of the app rather than steering one giant thread.
  • Auto apply is for flow, not for trust — great when iterating on styling with the preview open; switch it off for structural changes you want to read first.
  • Mock first, wire later — build the UI in a frontend-only session, then start a normal session to connect real agents and tables.