About the Blocks AI

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.

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:

  Copy

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: Frontend code that controls widget behavior and interactions.

• Backend code files: Server-side code for handling business logic and data processing.

• CMS collections: Database collections for storing and managing your app's data.

• Dashboard code: 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.

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: