# The build workspace

> A tour of the workspace where you build: the chat, the preview, the code and vault tabs, the model picker, and publish.

The build workspace is where you spend most of your time. It is designed so you can describe a change and immediately see it, without switching contexts.

## The layout

- **Chat, on the left.** This is where you talk to the Vaulter agent. Ask for features, fixes, and design changes in plain language, and attach images or documents when showing beats telling. The agent shows its work as progress pills while it runs, then replies with what changed.
- **The main panel, on the right.** Three tabs across the top switch what you see:
  - **Preview.** A live, running copy of your app.
  - **Code.** The real source files behind your app, in a full code editor with a file tree.
  - **Vault.** Your app's settings hub. This is where the Database, Auth, Connectors, Domains, Analytics, SEO, Deployments, Storage, and Team panels live.

## The preview

The preview is your app actually running, not a static picture. Click buttons, fill in forms, and move between pages just like a visitor would. It rebuilds automatically after every change the agent makes; a short loading cover appears while a new build compiles, then the app paints fresh.

The preview toolbar gives you:

- A **device toggle** to switch between desktop and mobile widths.
- A **page navigator** that lists your app's pages so you can jump straight to any of them.
- A **Share** menu that, once your app is published, copies the live link or shares it to X, LinkedIn, Facebook, WhatsApp, or Gmail.

## Chat modes: Build and Plan

The chat has two modes:

- **Build** is the default. You ask, the agent changes the app.
- **Plan** is for thinking before building. The agent can read your project and ask you structured questions, but it cannot change anything. It produces a written plan (goal, scope, approach, affected areas, open questions) that you can then hand to Build mode. Plan mode is a paid feature and always runs on the most capable model.

## The model picker

Near the chat you choose which Vaulter agent model powers your requests, or leave it on **Auto** and let Vaulter pick. See [Choosing a model](/docs/building/choosing-a-model).

## Edit Mode

Some changes are quicker to point at than to describe. Edit Mode opens a drawer over the chat and lets you click any element in the preview to change its text, colors, size, spacing, and more, with undo and redo. See [Chat vs Edit Mode](/docs/building/chat-vs-edit-mode).

## The Vault

The Vault tab is the control room for everything around your app:

- **Database.** Browse tables, edit rows, run SQL, and see migration history. See [Your app's database](/docs/data/database).
- **Auth.** Manage your app's users, sign-in providers, and who can register. See [Users and auth](/docs/auth/add-sign-in).
- **Connectors.** Connect third-party services like Stripe, Slack, and OpenAI. See [Integrations](/docs/integrations/connectors).
- **Domains.** Buy or connect a custom domain. See [Publishing and domains](/docs/publish/buy-a-domain).
- **Analytics.** Visitor and conversion analytics for your published app. See [Analytics](/docs/growth/analytics).
- **SEO.** Titles, descriptions, social previews, and branding.
- **Deployments.** Your publish history.
- **Storage.** Files and images your app uses.
- **Team.** Who can work on this project with you.

## Publishing

When your app is ready, **Publish** takes it live. You can keep building after publishing and ship updates whenever you want; visitors only ever see the last version you published. See [Publishing your app](/docs/publish/publishing).