> ## 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.

# Work with Vibely in the project chat

> Everything you can do in the project chat, from writing prompts and attaching files to planning, queueing follow-ups, answering questions, and fixing errors.

The project chat is the panel on the left side of the editor where you work with Vibely on your app. You describe what you want in plain language, Vibely builds it or plans it depending on the mode you choose, and each response shows what it did so you can review it, steer it, or roll it back.

<Frame>
  <img src="https://cdn.vibely.sh/doc/v1/projects-chat.webp" alt="Work with Vibely in the project chat" width="1200" height="675" />
</Frame>

Behind every message, Vibely's agent works in a loop: it reads your conversation and your project, takes action with tools, and checks the result before moving on. You'll see that loop reflected below, from the steps it shows while it works to the questions it asks.

<Tip>
  You can ask Vibely anything, not just build requests. When your message is a question, such as how a feature works or what a term means, Vibely answers in chat without changing your code.
</Tip>

## The prompt box

Type your message into the text field at the bottom of the chat panel, then press **Enter** or click the send button. **Shift+Enter** starts a new line. Describe the outcome you want rather than the implementation:

```text wrap theme={"system"}
Add a sign-up form with email and password fields.
```

See [Prompting best practices](/prompting/best-practices) for more guidance, and the [prompt library](/prompting/library) for ready-made prompts.

Around the text field you'll find:

* **The + button**: Attach files, take a screenshot, pick a skill, choose connectors, or pick a database. The options are listed under **The + menu** below.
* **Edits**: Turn on element selection in the preview, so your next message is about the element you click. See [Edit directly from the preview](/features/projects/preview#edit-directly-from-the-preview).
* **Plan**: Switch between Build and Plan mode. See [Modes](#modes).
* **Project access**: A globe or lock icon that shows whether the project is open to your **Workspace** or **Restricted**. Project owners and admins can change it here.

Two shortcuts work inside the prompt box:

* Type **@** to reference a file in your project, or another project in your workspace. See [Cross-project referencing](/features/context/cross-project-referencing).
* Type **/** to pick a skill for this message. See [Skills](/features/context/skills).

## Modes

The **Plan** toggle next to the chat input switches how Vibely responds:

* **Build** (the default, toggle off): Vibely makes changes directly in your project. This is the right choice for most requests, from small tweaks to whole features. See [Build mode](/features/agent/build-mode).
* **Plan** (toggle on): Vibely investigates and writes a plan without touching your code. Review it, edit it, and click **Approve & Build** when you're happy. Use it for bigger features or anything you want to think through first. See [Plan mode](/features/agent/plan-mode).

You can switch at any time, and the conversation carries across both.

## The + menu

Click the **+** button next to the chat input to open the menu:

* **Add files or photos**: Attach files from your computer. See [Attach files as context](#attach-files-as-context).
* **Take a screenshot**: Opens your browser's screen capture dialog so you can pick a tab, window, or screen. Vibely attaches the image to your message.
* **Skills**: Pick a skill to run with this message, or go to **Manage skills** and **Add skill**. See [Skills](/features/context/skills).
* **Connectors**: Turn a connected service on or off for this build, or go to **Manage connectors** and **Add connector**. Turning a connector off here leaves it connected; it only stops Vibely from using it in this build. See [Connectors](/integrations/connectors/overview).
* **Database**: Pick the Supabase organization and project Vibely should build against. See [Supabase](/integrations/supabase).

## Attach files as context

Attachments show Vibely what you mean. Attach a design mockup to match, a screenshot of a bug to fix, or a document to build from, like a product brief or a spreadsheet of data. Attachments work the same on the home screen, so you can attach files to the very first prompt of a new project.

To add files, use **Add files or photos** in the **+** menu, drag files into the chat, or paste them. You can attach images (PNG, JPEG, GIF, WebP, SVG), PDF, Word, Excel, PowerPoint, text, Markdown, and CSV files, Figma `.fig` files, and short videos (MP4, MOV, WebM).

You can attach up to **5 files** per message, and each file can be up to **10 MB**. Larger files are skipped with a message telling you which ones.

Attachments show as chips above the input before you send and stay on the sent message. Click an image to open it full size, or a readable document to open it in a preview panel.

To put an image into your app itself rather than show it to Vibely, attach it and tell Vibely where it goes:

```text wrap theme={"system"}
Replace the logo in the navbar with this image.
```

## While Vibely works

Vibely working on one request doesn't block you.

### Queue your next message

Anything you send while Vibely is working joins a queue above the chat input instead of interrupting the current run. Queued messages run one at a time, in order, when the current run finishes. From the queue you can:

* Reorder messages with **Move up** and **Move down**.
* **Edit** or **Remove** a queued message.
* **Send now** to send a message without waiting.
* Pause and resume the whole queue, or **Clear** it.

If a queued message fails to send, it shows the attempt count and a **Retry** button.

<Tip>
  If you have several changes in mind, send them as one message rather than many rapid ones. Vibely is more reliable with one clear list.
</Tip>

### Follow the work

While Vibely works, the chat shows what it's doing: the files it reads and writes, the commands it runs, its checklist for bigger requests, and any [subagents](/features/agent/subagents) it hands research to. The **Code** view also shows files updating live as Vibely writes them.

### Stop mid-task

Click the **Stop** button while Vibely is responding, or press **Esc** when you're not typing in a field. Vibely keeps the work completed so far. You can then send a new message with better direction.

## Answer Vibely's questions

When Vibely needs more direction, it pauses and shows a question card instead of guessing. Each question has answer options, and you can pick one or write your own answer.

* Move between questions and review your answers before submitting.
* Skip a single question, or skip them all. Your other answers still go through.
* For open-ended visual work, Vibely can show design directions to choose from, so you steer the look before it builds. See [Design guidance](/features/design/design-guidance).

When Vibely needs an API key or other secret, the card asks you to **Add secret** instead. Secrets are stored securely and never shown in chat. See [Secrets](/features/backend/secrets).

## Act on Vibely's responses

When Vibely finishes a task, a row of actions under its response lets you react without typing:

* **Like** / **Dislike**: Rate the response, with an optional note about what worked or didn't.
* **Copy**: Copy the response text.
* **More options** (**⋯**): Shows **Worked for**, how long Vibely worked on the message, and **Credits used**, what it cost. See [Credits](/features/account/credits).

## Edit a message and try again

If an earlier request sent things the wrong way, hover over one of your own messages and click **Edit and try again**. Rewrite the message and confirm with **Revert and resend**: your project's files go back to how they were before that message, that message and everything after it leave the conversation, and Vibely runs your new version instead.

This works on your own messages only, and not while Vibely is still working. Your database is not rolled back. See [Version history](/features/projects/history).

## Fix errors and get unstuck

Two cards can appear in the chat on their own:

* **Build error**: The build broke. Click **Try to fix · Free** and Vibely reads the error and attempts a fix. **Show technical details** reveals the raw output.
* **Runtime error**: Your running app threw an error. **Try to fix · Free** sends it to Vibely. **Restore last version** rolls your files back to the newest version from before the errors started.

Both fixes are free and don't use credits. Dismissing a card hides the errors on screen; a different error later raises the card again.

If an error keeps coming back, or your app runs but doesn't behave the way you intended, work through these steps instead of retrying the same prompt:

<Steps>
  <Step title="Ask Vibely to investigate">
    Describe what you see and what you expected. Vibely can read errors, logs, and console output.

    ```text wrap theme={"system"}
    The login form does nothing on mobile. Walk me through what's happening.
    ```
  </Step>

  <Step title="Revert and re-prompt">
    Use **Edit and try again** on the message where things went wrong, and give a clearer, more specific instruction.
  </Step>

  <Step title="Plan before rebuilding">
    Turn on **Plan** and ask Vibely to outline an approach first. Review the plan, adjust it, then approve it.
  </Step>
</Steps>

See [Debugging prompts](/prompting/debugging) for more.

## Suggestions from Vibely

After a response, Vibely may suggest what to build next as chips above the chat input. Click one and it fills the prompt box with the full prompt, so you can adjust the wording before sending. Nothing is sent until you send it.

## FAQ

<AccordionGroup>
  <Accordion title="Do messages in the project chat cost credits?">
    Yes. Each message that Vibely works on uses credits from the workspace that owns the project. **More options** on a response shows **Credits used**. **Try to fix · Free** on an error card doesn't use credits. See [Credits](/features/account/credits).
  </Accordion>

  <Accordion title="Can I send several instructions at once?">
    Yes. Put them in one message, or keep typing while Vibely works: each message you send joins the queue and runs after the current one. See [Queue your next message](#queue-your-next-message).
  </Accordion>

  <Accordion title="How do I undo what a message did?">
    Hover your message, click **Edit and try again**, and confirm **Revert and resend**. If your app is throwing errors, **Restore last version** on the runtime error card rolls back to the last version from before the errors. See [Version history](/features/projects/history).
  </Accordion>

  <Accordion title="How do I attach images and files?">
    Use **Add files or photos** in the **+** menu, drag files into the chat, or paste them. **Take a screenshot** in the same menu captures your screen. See [Attach files as context](#attach-files-as-context).
  </Accordion>

  <Accordion title="Can I change the code myself instead of using chat?">
    You can read every file in the **Code** view. To edit code yourself, connect the project to GitHub and work in your own tools; your commits sync back into Vibely. See [View your project's code](/features/projects/code-editor) and [GitHub](/integrations/github).
  </Accordion>

  <Accordion title="What happens if I close my browser while Vibely is working?">
    Vibely keeps working. Your request runs on Vibely's servers, not in your browser, so you can come back later and find the result in chat.
  </Accordion>

  <Accordion title="What happens if I run out of credits while Vibely is working?">
    The run pauses and a card appears in chat. Click **Add credits** to keep going. See [Credits](/features/account/credits).
  </Accordion>

  <Accordion title="Can Vibely notify me when it's done?">
    Yes. Vibely may show an **Enable notifications** banner above the chat input. Enable it to get a browser notification when Vibely completes a task, or dismiss it and keep working.
  </Accordion>
</AccordionGroup>

## Related topics

<CardGroup cols={2}>
  <Card title="Find your way around the editor" icon="table-columns" href="/features/projects/editor">
    Where every tool in a project lives.
  </Card>

  <Card title="Plan mode" icon="list-check" href="/features/agent/plan-mode">
    Plan a change before Vibely builds it.
  </Card>

  <Card title="Iterate on your web app" icon="arrows-rotate" href="/features/web-apps/iterate">
    What to type, and when to use each tool.
  </Card>

  <Card title="Prompting best practices" icon="lightbulb" href="/prompting/best-practices">
    Get better results from every message.
  </Card>
</CardGroup>


## Related topics

- [Find your way around the editor](/features/projects/editor.md)
- [Undo and restore with version history](/features/projects/history.md)
- [App and chat connectors](/integrations/connectors/catalog.md)
- [Publish your Vibely project](/features/deploy/publish.md)
- [Reference other projects in your workspace](/features/context/cross-project-referencing.md)


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