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.

Example Usage:

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

2. In the same message, add instructions like:

“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