Skip to main content
The app editor is where you build an app. You describe changes in the chat, and the AI writes the code while you watch the result in a live preview. Open it by clicking an app card on the Apps page. Only Owners, Admins and Editors who have edit access to the app can open the editor. See Access and sharing.

​
Layout

On a computer, the editor has two panels:
  • Chat on the left, where you talk to the AI.
  • Workspace on the right, with tabs for the preview, code, data and more.
Drag the divider to resize them. Vybe remembers the split. On a phone, you see the chat only. Tap the play icon (Open preview) to see the preview, tap Chat to go back, and publish from the preview’s header. If the app is published, another icon opens the live app. Workspace tabs aren’t available on a phone. The header above the chat shows:
  • The app’s icon and name. Click the name to rename the app. Renaming doesn’t change the app’s URL.
  • + (tooltip “Create a new conversation”). Starts a fresh conversation with the AI.
  • The history button (tooltip “Show conversation history”). Opens Conversation History, where you switch to an earlier conversation or delete one. You can’t delete the last remaining conversation.
Conversations belong to the app, so everyone who edits it sees the same history. All conversations work on the same code. A new conversation starts without the earlier messages, but the AI still sees every file, including the README it keeps about the app. When an AI coworker works on the app, its work also appears in the history, labelled with the coworker’s name. You can’t open or delete those entries from the editor.
Start a new conversation when you move on to an unrelated feature. A very long conversation can eventually become too long for the model to process.

​
Chat with the AI

Type in the box (“Ask me anything…”) and press Enter to send. Shift + Enter adds a new line.

​
Agent and Ask modes

The mode selector (tooltip “Switch Agent mode”) sits at the bottom of the message box: Use Ask to understand how something works before you change it:
How does the approval flow decide who gets notified?
If you ask for a change while in Ask mode, the AI can show a Switch to Agent mode button.

​
Choose a model

The model selector defaults to Auto, which picks a suitable model for each conversation. You can pick a specific model instead. See AI models. The mode and model are your personal settings. They apply to every app you build and don’t change anything for other builders or for coworkers.

​
Attach images

Open the + menu and choose Upload image, or paste or drag an image into the chat. You can attach up to 10 images per message, 5 MB each. Screenshots of a design you like or of an error are both useful. The app chat accepts images only, not documents. The same + menu has Connect integration, so you can connect a tool without leaving the editor.

​
While the AI works

The AI shows each step as a line in its reply, such as “Ran type check” or “Installed react-flow”. Some steps stand out:
  • Exploring: … / Explored: … — the AI is reading through your code to answer a question before it changes anything.
  • Coding: … / Coded: … — the AI handed a piece of work to a coding helper.
  • Large file detected, optimizing… — a file grew past 800 lines, so the AI splits it into smaller files. This happens automatically and keeps the code easier to change.
You can keep typing while the AI works. Sending a message adds it to a queue (Queue message), and you can edit or remove queued messages before they’re sent. With an empty message box, the send button becomes Stop, which ends the current response. Sometimes the AI asks a question in a card above the message box, for example to choose between two layouts. Pick an option, or type your own answer. When a reply changes code, it ends with “Your progress has been saved.” and a Restore button. See Version history.

​
What the AI can do

In Agent mode, the AI can:
  • Read, search, create, edit and delete files.
  • Install packages from Vybe’s approved list. See Tech stack.
  • Create and change tables in the app’s database, and query other databases your organization has connected, including shared organization databases.
  • Run data queries and custom APIs, and use your integrations and MCP servers.
  • Run the app’s unit tests and type checks.
  • Restart the preview and read its logs.
  • Publish the app, check its publish status and read publish logs. See Publishing.
  • Show a button to connect an integration or an external database, or to contact support.
  • Generate images.
It can’t run terminal commands. Neither can you. See Limitations.

​
Standing instructions

Instead of repeating the same rules in every prompt, write them down once:
  • Custom AI Instructions in Settings → Personal → Preferences apply to every app you build, including when a coworker codes on your behalf. They also apply when you chat with coworkers.
  • Organization AI Instructions in Settings → Organization → General apply to everyone’s apps and to coworkers. Only Owners and Admins can edit them.
For example:
For decisions that only apply to one app, ask the AI to record them in that app’s README.md. The AI reads the README before it starts new work. See Working with code.

​
Workspace tabs

The workspace opens with Preview, Code and Data. Add more from the + (Add tab) menu: Close a tab with its × when more than one is open. Vybe remembers your open tabs. You can also link straight to a tab by adding ?tab= to the editor URL, for example ?tab=code.

​
The preview

The Preview tab runs a development copy of your app in a private sandbox. It updates as the AI changes code, and you can click through it like a real user. The bar above the preview has:
  • Reload preview.
  • A page selector listing the app’s pages. Pages that need a value in the URL, like /orders/[id], are listed but can’t be selected. Reach them through the app’s own links.
  • A lock icon to restrict who can open individual pages. See Access and sharing.
  • Full screen / Exit full screen.
Keep these in mind while testing:
  • Nobody is signed in inside the preview. Features that depend on the current user show placeholder data there. Check them in the published app.
  • The preview and the published app share one database. Records you create while testing show up in the live app. See App data.
  • Only people who can edit the app see the preview. To share the app, publish it. See Publishing.

​
Status messages

​
When the app shows an error

If the app hits an unhandled error in the preview’s browser, for example a crash that shows the app’s own error page, Vybe asks the AI to fix it for you. You see “The preview crashed. Asking the builder to fix it…”, and a message with the error goes to the AI, which fixes it and then carries on with your request. Errors the app catches and handles itself aren’t sent. Automatic fixes only run after you’ve sent a message since opening the editor. They wait while the AI is busy with a reply, a build or a question for you, and while the editor’s browser tab is in the background. To avoid loops:
  • The same error is only sent once.
  • The AI gets at most three automatic fix requests per message you send.
  • Clicking Stop turns automatic fixes off until you send your next message.
If the app’s server hits an error, the preview shows an App error detected card instead:
  • Error Details expands the error log. Copy to clipboard copies it.
  • Fix with AI sends the error to the chat as “I’m getting an error: …” so the AI can fix it.
  • Retry reloads the preview.
For other problems, see Troubleshooting.

​
Builds and Auto Build

A build checks that your app compiles and that its tests pass. Auto Build controls whether this happens after every change. Find it in Settings → Personal → Preferences (“Automatically build the app after each change”). It’s on by default.
  • On: after each AI reply that changes code, Vybe builds the app and runs its tests. If something fails, the errors go to the AI automatically so it can fix them. When everything passes, you see “Your app is ready”.
  • Off: the preview just refreshes after each change. Run a build yourself with Build app.
If you allow browser notifications (“Enable notifications”), Vybe also notifies you when your app is ready, so you can work in another tab.

​
The … menu

The … menu at the top right of the workspace has these actions. They only affect the preview, not the published app. Next to the menu are the Access button (tooltip “Set app access”) and the Publish button. See Access and sharing and Publishing.

​
The sandbox

Each app’s preview runs in its own isolated sandbox. When you open the editor, Vybe starts the sandbox if needed and brings it up to date with the app’s latest code. Your code is stored separately from the sandbox, so restarting or recreating the sandbox never loses code. If a sandbox has been removed, Vybe recreates it when you next open the editor.

​
Error screens