# 5. Editing your app in the Design Tab

To make changes using AI:

1. Open the **Design** tab and select a screen via the select dropdown at top left above the preview.
2. Open the **AI** panel (top right in the top toolbar) of the screen editor if it's not already open.
3. Enter a new prompt describing the changes you want (e.g. "Add a search bar at the top", "Change layout to two columns", "Include a button to export data").

The AI will regenerate that screen's layout and components based on your instruction. You can undo or adjust as needed.

<figure><img src="https://1771273900-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3HPEoFCyP7Q88dV3CmqD%2Fuploads%2FA6X2qclWlpc38pikux44%2FScreenshot%202025-09-24%20at%2012.07.20.png?alt=media&#x26;token=2a70393b-8f27-4ae6-8de0-13116cfb5661" alt=""><figcaption><p>You can open and close the navigation and chat panels as needed to give you more room.</p></figcaption></figure>

To make manual changes:

1. With the **Design** tab open and the correct screen selected, switch the **Preview** panel to **Edit mode** via the toggle control (top right).
2. You can select items either directly in the preview, or via the **Layers / Elements** panel on the left - they will be selected.
3. Use the controls in the **Properties** panel on the right to make changes - the options available here will depend on the nature of the element you selected.

> 💡 Tip: You can mix AI edits with manual design edits at any time.

You can insert new components into a screen:

1. With the **Design** tab open, the correct screen selected and the **Preview** panel in **Edit mode**, select the area or component on the screen where you want to insert a new item
2. Select the **Assets** tab in the left panel
3. **Assets** (pre-built Buzzy components) are listed by type/category (you can also search)
4. Select an asset, and a preview window opens - you can preview the component (and select the theme to preview it in)
5. To use the component, choose **Before**, **After**, or **Inside** - this will insert it relative to the area you currently have selected in the **Preview** panel.

<figure><img src="https://1771273900-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3HPEoFCyP7Q88dV3CmqD%2Fuploads%2FvPwFJX5RpCqhhAAh7mDg%2FScreenshot%202026-02-24%20at%2010.27.25.png?alt=media&#x26;token=c3cbd84d-1547-4c67-948b-ee4e2cbaf3d2" alt=""><figcaption></figcaption></figure>

***

For more examples and help, visit the [Buzzy AI Prompt Guide](https://docs.buzzy.buzz/getting-started-with-buzzy/buzzy-ai/example-prompts).
