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

# Using Chat to App

Webdraw's **Chat Mode** allows you to **build, edit, and iterate** on your apps using natural language. Instead of manually coding, you can describe the changes you want, and Webdraw will apply them **instantly**. This is Webdraw’s **primary interface** for app editing, where you can also access your app’s **code**.

## When do you use chat mode?

You are redirected to the **Chat Mode editor** when:

1. **✨ Creating a new app:**

   * After setting up a new app, the chat editor opens for you to **preview and modify** it further.

2. **🎨 Remixing an app:**

   * When you **remix an existing app**, the chat editor opens with a **copy** of the original app, ready for customization.

3. **📂 Opening an existing app from your filesystem:**

   * Open any saved app from your **filesystem** and continue working in Chat Mode.

   * Select the app and choose **Chat to App** to load it into the chat editor **instantly**.

***

## Understanding the chat mode interface 

### 👁️ Preview Tab

* **Live preview** of your app with the latest changes.

* Interact with elements, test inputs, and see real-time updates.

* Supports **desktop, tablet, and mobile views** for responsive testing.

* Easily **resize or reposition** within the **golden layout** (explained below).

### 💬 Chat Tab

* The space where you **interact** with Webdraw by typing modification requests.

* Webdraw **instantly applies** changes based on your descriptions.

* Press **Enter** or click the **green send button** to submit a request.

* You can ask Webdraw to:

  * **Modify elements** (e.g., *"Increase button size"*).

  * **Suggest improvements** or answer questions.

  * **Debug errors** and explain functionality.

### **🔮** Reference Prompts and Files

* Click *@ Reference Prompts and Files* on the text area or type @ to **reference system prompts or saved files**. This opens a menu with:

  * **Prompts**: Add **AI capabilities** to your app.

  * **Files**: Embed assets or reference project elements.

<Note>
  Only files within the current project folder are accessible here.
</Note>

**Example Usage:**

1. Select **Create Video from Image** from the prompt menu.

2. In the same message, add instructions like:&#x20;

> "*Add a button that generates a video based on user input. Include a field for specific animation instructions (e.g., 'Capybara eating pizza' or 'Capybara dancing while eating pizza')."*

Press **Enter** to apply the changes. Webdraw confirms the update, and a **grey box** appears below the response. Click it to view the exact code modifications.

### 🎯 Select Element Tool

* Click **Select Element** at the bottom of the chat to modify specific UI components.

* Hover over the **Preview Panel**, then click an element to tag it in the chat box.

* You can select multiple elements before describing modifications.

* This removes the need for manual descriptions—just **select and edit!**

### 🆕 Version History Tab

* Tracks all changes made to the app.

* Allows restoring previous versions.

* Click on an older version to preview it; click **Restore** to revert.

### 🧑‍💻 Code Tab

* Displays the app’s underlying code in real-time.

* Click the **grey update box** below a chat response to see code differences.

* If needed, you can manually edit the code directly.

### **📂** Files

* Click the **dropdown** under the app’s name (e.g., *index.html*) to access project files.

* Switch between different files and assets.

* You can also access all project files via the **blue folder icon** in the top-left sidebar.

* Inside the folder view, you can **rename, download, or delete files**.

* Essential for complex apps requiring multiple files.

### 🎨 Golden Layout - Customizing your workspace

Webdraw’s flexible **golden layout** lets you adjust your workspace for better productivity:

* **Move Tabs:** Drag and drop panels (Preview, Chat, Code, etc.) to reorganize.

* **Resize Panels:** Hover over panel edges to adjust size.

* **Close & Reopen Tabs:** Close unnecessary tabs and reopen them via the **left sidebar menu**.

* **Multiple Screens:** Extend panels to additional screens for multi-monitor setups.

***

## 🤔 FAQs & Common Issues

<AccordionGroup>
  <Accordion title="I made a change but don’t see the grey update box!" defaultOpen={false}>
    * Webdraw may not have detected a code-level modification.

    * Try rewording your request.

    * Refresh the page and resubmit the command.

    * Check the **Version History** tab for changes.
  </Accordion>

  <Accordion title="My panel layout looks messy! How do I reset it?" defaultOpen={false}>
    * Drag panels back to their default positions.

    * Close unnecessary tabs and reopen them from the **left sidebar menu**.

    * Refresh the page to reset the layout.
  </Accordion>

  <Accordion title="Can I manually edit the code if needed?" defaultOpen={false}>
    Yes! Open the **Code Tab**, locate the file, and edit directly.
  </Accordion>
</AccordionGroup>