> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibely.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Implement changes in Build mode

> Build mode is the default way Vibely works. Describe a change and Vibely makes it in your project, and it answers questions without touching your code.

<Tip>
  **Choose a mode**

  The project chat has two modes:

  * **Build mode** (the default) → implement changes, or get an answer when you ask a question
  * [**Plan mode**](/features/agent/plan-mode) → investigate and write a plan you edit and approve before anything is built

  Build mode changes the app. Plan mode defines how to build it first. You can switch at any time, and the conversation carries across both.
</Tip>

<Frame>
  <img src="https://cdn.vibely.sh/doc/v1/agent-build-mode.webp" alt="Implement changes in Build mode" width="1200" height="675" />
</Frame>

## Overview

Build mode is Vibely's default mode. Everything you send in the project chat runs in Build mode unless you turn on the **Plan** toggle.

When you give Vibely a task, it takes it from start to finish. It reads your project for context, edits the files that need to change, installs dependencies, rebuilds the preview, and fixes problems it runs into along the way. You can follow each step in the project chat while it works and review the result when it's done.

Build mode also handles questions. There is no separate chat mode to switch into. When your message is a question rather than a request for a change, Vibely answers it without changing your code. See [Ask questions without changing code](#ask-questions-without-changing-code).

## What Build mode is for

Use Build mode to:

* Implement a feature or a change once you know what you want
* Fix bugs and errors
* Refactor code across multiple files
* Apply coordinated changes across pages, components, the database, and configuration
* Connect services, such as your Supabase project or a connector
* Generate images for your app
* Ask how something in your project works, or talk through an idea

All changes are applied directly to your project. Each response lists the files Vibely created or changed, and you can roll any change back from [version history](/features/projects/history).

## How to use Build mode

Build mode is active whenever the **Plan** toggle next to the send button is off. Describe what you want and send your message. Clear requirements and constraints help Vibely get it right the first time.

**Be specific about what you want**

```text wrap theme={"system"}
Add a contact form with name, email, and message fields. Validate the email format and show error messages inline.
```

**Describe expected behavior**

```text wrap theme={"system"}
When users click "Add to cart", show a success message and update the cart count in the header. Store cart items in local storage.
```

**Provide context for complex changes**

```text wrap theme={"system"}
Update the dashboard to show sales from the last 30 days. Use the existing Chart component and match the styling on the analytics page.
```

**Set guardrails for sensitive areas**

```text wrap theme={"system"}
Add a settings page. Do not modify src/components/Layout.tsx or the existing authentication logic.
```

For larger or riskier changes, Vibely can decide on its own to switch into planning first. It stops, writes a plan, and waits for your approval before it builds. You can also do this yourself with [Plan mode](/features/agent/plan-mode).

## Ask questions without changing code

You don't need to switch modes to ask a question. Before each message runs, Vibely reads it and decides whether you are asking for a change or asking something.

* **Questions and discussion** get a direct answer in the chat. Vibely can read your project's code to answer, search the web, use [skills](/features/context/skills), and use your connected tools, but it does not create, edit, or delete any files.
* **Requests for a change** run as a normal build.

Vibely decides by reading the message, not by matching keywords, and it takes the previous exchange into account, so a follow-up like "yes, do that" is understood as a request to build what was just discussed.

```text wrap theme={"system"}
How does the checkout flow work today? Walk me through what happens after someone clicks "Buy".
```

```text wrap theme={"system"}
Is it worth adding a loyalty program here, or is there a simpler version to try first?
```

A few things always count as a request for a change, whatever the wording:

* An attached image, such as a screenshot or mockup
* Elements you selected in the preview with [Edit from the preview](/features/design/visual-edits)
* A sketch you drew on the preview

When Vibely can't tell, it treats the message as a build, because a build can still just answer, while an answer can't make the change. If you want to be sure your code isn't touched, say so in the message ("don't change anything yet, just explain…"), or use [Plan mode](/features/agent/plan-mode), which never changes code.

## Follow the work

While Vibely works, the project chat shows each step as it happens: the files it reads and edits, the commands it runs, and the tools it uses, such as web search or image generation. For larger requests, Vibely may send read-only [subagents](/features/agent/subagents) to investigate parts of your project in parallel, and those show up as their own rows.

This helps you:

* Follow progress on longer builds
* Understand what Vibely is doing and why
* Spot early when the work is heading somewhere you didn't intend

## Send follow-ups while Vibely works

You don't have to wait for Vibely to finish before you type the next message. Messages you send while Vibely is working are queued and run in order as their own requests after the current one ends. You can reorder, edit, or remove queued messages, pause the queue, or choose **Send now** to stop the current request and run that message next. See [Queue your next message](/features/projects/chat#queue-your-next-message).

## Debugging and verification

Build mode does more than make sure the code compiles. As it works, Vibely can:

* Read build errors and fix them before it finishes
* Read runtime errors from your running preview
* Check your database schema when a change touches data
* Run a security scan of your project

When the preview shows an error, an error card appears in the project chat with **Try to fix · Free**. Fixes started from that card don't use credits.

For how to test your app and what Vibely checks, see [Test your app](/features/testing/overview).

## Pricing

Build mode is **usage-based**. The cost of a message depends on the work Vibely does to complete it, such as:

* How much of the project it needs to read
* How many files it changes
* How many steps and tools it uses, such as web search or image generation

A build message that finishes without running any tools, for example one that only answers you, is not charged as a build. A question that Vibely answers in the chat is charged for the work it took, priced the same way as a build message.

To see what a message cost, open the **…** menu below Vibely's response. It shows **Worked for** and **Credits used**. See [Credits](/features/account/credits).

### Control the cost of a Build mode request

* **Scope each prompt narrowly.** Ask for one change at a time and name the files or areas to touch. Broad prompts like "clean up the app" explore more of the codebase and change more files, which costs more.
* **Plan first for large or unfamiliar changes.** A [Plan mode](/features/agent/plan-mode) message reads and proposes without writing code, so you can check the approach before you spend credits on the build.
* **Stop a request in progress.** Click **Stop**, or press **Esc** when you're not typing in a field. Vibely keeps the work done so far, and you're charged only for that work. To discard it too, use **Undo last change** or [version history](/features/projects/history).
* **Watch the steps.** If the task is growing beyond what you intended, stop early and send clearer direction.
* **Check your balance before large tasks.** See your remaining credits in **Settings → Plans & credit usage**.

## FAQ

<AccordionGroup>
  <Accordion title="Does Vibely modify my project directly in Build mode?">
    Yes. Vibely applies changes directly to your project. Each response lists the files it changed, and you can restore an earlier version at any time from [version history](/features/projects/history).
  </Accordion>

  <Accordion title="Is there a separate Chat mode?">
    No. Build mode answers questions on its own. When your message is a question, Vibely replies in the chat and doesn't change any files. For a structured plan you approve before anything is built, use [Plan mode](/features/agent/plan-mode).
  </Accordion>

  <Accordion title="Vibely answered my request instead of making the change. What do I do?">
    Reply with a direct instruction, such as "Yes, make that change" or "Go ahead and build it." Vibely reads the previous exchange, so a short confirmation is enough.
  </Accordion>

  <Accordion title="What happens if errors occur during implementation?">
    Vibely reads build and runtime errors and keeps fixing until the issue is resolved or it needs your input. If an error remains, click **Try to fix · Free** on the error card. See [Debug your app](/prompting/debugging).
  </Accordion>

  <Accordion title="Can I send messages while Vibely is working?">
    Yes. They queue and run in order after the current request. Use **Send now** on a queued message to stop the current request and run that one next.
  </Accordion>

  <Accordion title="How do I stop a request, and what happens when I do?">
    Click **Stop**, or press **Esc** when you're not typing in a field. Vibely keeps the changes made so far and charges only for the work completed. To remove those changes, use **Undo last change** or restore an earlier version.
  </Accordion>

  <Accordion title="When should I switch to Plan mode?">
    Switch to [Plan mode](/features/agent/plan-mode) when you want to:

    * Think through a complex change before implementation
    * Compare approaches
    * Review or edit a plan before any code changes
    * Investigate an issue and agree on a fix first
  </Accordion>

  <Accordion title="Can I reference a specific file in the project chat?">
    Yes, in web projects. Type `@` and pick a file from your project, then describe the change:

    ```text wrap theme={"system"}
    @src/components/UserProfile.tsx add a loading state here
    ```

    To reference another project in your workspace, see [Cross-project referencing](/features/context/cross-project-referencing).
  </Accordion>
</AccordionGroup>

## Related topics

<CardGroup cols={2}>
  <Card title="Plan mode" icon="list-check" href="/features/agent/plan-mode">
    Review and approve a plan before Vibely builds.
  </Card>

  <Card title="Project chat" icon="messages" href="/features/projects/chat">
    Everything you can do in the project chat.
  </Card>

  <Card title="Cross-project referencing" icon="diagram-project" href="/features/context/cross-project-referencing">
    Reuse code from other projects in your workspace.
  </Card>

  <Card title="Credits" icon="coins" href="/features/account/credits">
    How credits are counted and where to see your balance.
  </Card>
</CardGroup>


## Related topics

- [Plan a change in Plan mode](/features/agent/plan-mode.md)
- [Subagents](/features/agent/subagents.md)
- [Iterate](/features/web-apps/iterate.md)
- [Reference other projects in your workspace](/features/context/cross-project-referencing.md)
- [From idea to the App Store](/guides/from-idea-to-store.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.