> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About the Blocks AI
## Article: Create with the Blocks AI
## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/get-started/about-the-blocks-ai.md
## Article Content:
# About the Blocks AI
**Editor compatibility**
Wix Blocks apps aren't supported in the Wix Harmony editor. Existing Blocks apps remain available for purchase on the Wix App Market for Wix Editor and Wix Studio sites. To learn more, see [About Wix Harmony and Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-harmony-and-blocks.md).
Blocks AI helps you create and modify Wix Blocks widgets through AI-powered generation and editing capabilities. This article explains how to use Blocks AI to enhance your app development workflow.
`youtube:https://www.youtube.com/watch?v=MibEaqvzeXg`
## The Blocks AI workflow
The Blocks AI offers a three-stage workflow that streamlines your widget development:
* **Generate widget:** Create a new widget with elements, responsive layout, and content.
* **Edit widget:** Refine the widget design and structure based on your requirements.
* **Generate code:** Add functionality and data by generating widget code and collections.
This workflow helps you rapidly build functional widgets by leveraging AI at each development stage, from initial creation to adding business logic and data capabilities.
However, it does not necessarily have to be in this order. You can also start from a widget that you designed by yourself or start from adding a collection, if that makes sense. Just keep it logical - don't try to write code that relates to a UI without creating that UI first.
Click the AI icon  to open the Blocks AI panel. Then, select your option and enter a prompt.
## Generate Widget
The Generate Widget command creates a new widget and its contents, including:
* Widget elements
* Responsive layout and design
* Relevant content, including images and text
### Tips for successfully generating widgets
To get the best results when generating widgets:
* **Provide detailed descriptions** in your prompt, including the UI elements, their position, and their purpose.
* **Try different prompts** if the initial generation doesn't meet your needs.
* **Use structured lists** to organize your requirements clearly and logically. For example:
```md
Create a product card featuring:
- Item details including an image, price, and description of the product.
- Add to Cart: Incorporate a prominent 'Add to Cart' button for easy purchasing.
- Highlight key benefits or features of the product.
```
## Edit Widget
The Edit Widget command makes design changes to your widgets based on your prompt. With this command, you can:
* Add or delete elements
* Reposition elements
* Change element styles
You can also always make manual changes to your widget if needed.
### Tips for successfully editing widgets
To get the best results when editing widgets:
* **Select the correct widget** before using Edit Widget.
* **Select the preset you want to edit**. The Blocks AI cannot switch between presets and will edit the currently viewed preset.
* **Create new presets manually.** Then, you can ask AI to edit them.
* **Use Edit Widget for minor changes only**. For major design changes that transform the entire widget, generate a new widget instead.
### Design changes that require manual implementation
Some design changes are currently not supported by the Edit Widget command and must be done manually:
* Adding design presets
* Adding a Stack or a Flexbox
* Changing the number of items in a Repeater
* Changing button properties
* Changing SVG properties
* Adding a shadow
## Generate Code
Generate Code helps you create and modify both frontend and backend implementations, as well as data structures for your app. You can use it to generate new code or edit existing code, including frontend logic, backend services, and CMS collections for data storage.
With this command, you can generate and edit:
* [Widget code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/about-widget-code-in-blocks.md): Frontend code that controls widget behavior and interactions.
* [Backend code files](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/add-code-files-to-your-app.md#add-backend-files): Server-side code for handling business logic and data processing.
* [CMS collections](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/cms-collections-in-blocks/about-cms-collections-in-blocks.md): Database collections for storing and managing your app's data.
* [Dashboard code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/dashboard-pages/build-a-dashboard-page-in-blocks.md#add-code-to-your-dashboard-page): Code for building custom admin interfaces and settings pages.
### Working with collections
With the Generate Code command, you can perform several operations on collections:
* **Create new collections** by describing the desired fields in your own words (e.g., "Create a collection for blog posts with title, content, author and publish date fields").
* **Generate collections automatically** based on the content structure of your existing widget.
* **Add default data** to populate your collection for testing and development.
* **Edit collection fields** after creation - add, remove, or modify fields.
The Blocks AI will analyze your prompt and generate the appropriate collection structure and configuration based on your requirements.
Warning:
You cannot restore data that you deleted, using the Undo button. Be careful when changing collection data.
Note:
Creating a collection requires [a namespace](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/creating-a-namespace-for-your-app.md) for your app. If you haven't defined a namespace yet, you will be prompted to create one.
### Tips for successfully generating code
To get the best results when generating code:
* **Describe your widget clearly** to give the AI the context it needs. For example: "I have a product card showing product name, price, and an 'Add to Cart' button".
* **Specify trigger events or user actions**. For example: "I want code that runs when a user clicks the Add to Cart button".
* **Reference specific functions or APIs** if you know them. For example: "Use the `onClick` event for the button, and update a dataset called `Cart`".
* **Describe exactly what you want to happen** in the app. For example: "When clicked, increase the cart item count and display a confirmation message".
* **Mention specific element IDs**. For example: "My product card has the following elements: `productName`, `price`, and `productImage`".
* **Specify output location or destination**. Indicate if the results should update the UI, store data in a collection, or trigger another action. For example: "Update the visual cart counter on the page".
* **Include error handling** if needed. For example: "If the product is out of stock, show an error message instead".
### Example prompt
This is an example of a complete prompt that uses the above tips:
```md
Add logic for a "Product Card" app, which displays the `productName` and `productPrice`.
Requirements:
- The "Add to Cart" button has the ID `addToCartBtn`
- Each product also has an `inStock` boolean field
- When the button is clicked, first check if the product is in stock (`inStock: true`)
- If in stock: save the product to a `Cart` collection, update the cart counter shown in `cartCounterLabel`, and display "Added to cart!" message
- If out of stock (`inStock: false`): show an error message saying "Out of stock"
- Add inline comments to explain each step