> ## Documentation Index > Fetch the complete documentation index at: https://docs.vybe.build/llms.txt > Use this file to discover all available pages before exploring further. # The app editor > Chat with the AI, preview your app and manage its development sandbox 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](https://docs.vybe.build/apps/access-and-sharing.md). ## 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. ## Header 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. > [!TIP] > > 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: | Mode | What the AI does | | - | - | | **Agent** (default) | Builds and changes the app: edits code, changes the database, installs packages and uses your connections. | | **Ask** | Reads your code and answers questions. It can't change files, change database rows, or create, update or delete anything in your integrations. | 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](https://docs.vybe.build/reference/ai-models.md). 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](https://docs.vybe.build/apps/version-history.md). ### 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](https://docs.vybe.build/apps/tech-stack.md). * 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](https://docs.vybe.build/apps/publishing.md). * 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](https://docs.vybe.build/apps/limitations.md). ### 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: ``` Format dates as "Jan 15, 2026". Never show ISO dates in the UI. Show currency in USD with two decimals. A "deal" is a sales opportunity. An "account" is a company we sell to. Tables show 25 rows per page and are sorted newest first. ``` 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](https://docs.vybe.build/apps/working-with-code.md). ## Workspace tabs The workspace opens with **Preview**, **Code** and **Data**. Add more from the **+** (Add tab) menu: | Tab | What it shows | Details | | - | - | - | | **Preview** | The running app | This page | | **Code** | The app's files, which you can edit | [Working with code](https://docs.vybe.build/apps/working-with-code.md) | | **Data** | The app's database | [App data](https://docs.vybe.build/apps/data.md) | | **Analytics** | Who uses the published app and which pages | [Analytics and APIs](https://docs.vybe.build/apps/analytics-and-apis.md) | | **Logs** | The preview's server, package install and browser logs | [Troubleshooting](https://docs.vybe.build/apps/troubleshooting.md) | | **External DB Queries** | A log of queries the app ran against external databases | [App data](https://docs.vybe.build/apps/data.md) | | **APIs** | The app's API routes and API tokens | [Analytics and APIs](https://docs.vybe.build/apps/analytics-and-apis.md) | | **Workflows** | The app's background jobs | [Background jobs](https://docs.vybe.build/apps/background-jobs.md) | 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](https://docs.vybe.build/apps/access-and-sharing.md). * **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](https://docs.vybe.build/apps/data.md). * **Only people who can edit the app see the preview.** To share the app, publish it. See [Publishing](https://docs.vybe.build/apps/publishing.md). ### Status messages | Message | What's happening | | - | - | | "Loading your app..." | The preview is starting. The first start after opening the editor can take a while, because the sandbox installs packages and starts the server. | | "Checking your app..." | Vybe is building the app and running its tests. | | "Restarting preview\..." | The preview server is restarting. | | "Updating packages..." | The app's packages are being reinstalled. | | "Reconnecting to sandbox..." | Vybe is recreating the sandbox from your saved code. | ### 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](https://docs.vybe.build/apps/troubleshooting.md). ## 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. | Action | When to use it | | - | - | | **Build app** | Build the app and run its tests now. You see "App built successfully" or "Failed to build app". Failures go to the AI, which starts fixing them. | | **Restart server** | The preview is stuck or stopped responding. | | The option to update packages (package icon) | The preview reports a missing package or module. It reinstalls the app's packages, then reloads the preview. | | **Restart sandbox** | Nothing else works. Vybe asks you to confirm: "This will recreate your development environment from scratch. Your app code is safe, but the sandbox will be temporarily unavailable while it restarts." | Next to the menu are the **Access** button (tooltip "Set app access") and the **Publish** button. See [Access and sharing](https://docs.vybe.build/apps/access-and-sharing.md) and [Publishing](https://docs.vybe.build/apps/publishing.md). ## 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 | Screen | Why you see it | What to do | | - | - | - | | **App Archived** | "The app you're looking for has been archived." | Restore it from the **Archived** filter on the **Apps** page. See [Apps overview](https://docs.vybe.build/apps/overview.md). | | **App Not Found** | "This app does not exist or you do not have access to it." | Check the link, or ask the app's creator for access. | | **Wrong Organization** | You have access to this app through a different organization. | Click **Switch Organization**. | | **Access Denied** | Your role can't open the editor. | Ask an Owner or Admin to change your role. See [Members and roles](https://docs.vybe.build/organization/members-and-roles.md). | This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.