Add a Vibe Block from the Block Library to your page. You can find it in the "Other" category or directly in the list of categories.

Enter a prompt in the chat input field to generate the block. After that click on the "Send" button or press Enter on your keyboard.

To select an AI model for code generation, click the model name in the block.

To attach an image, file, or video to your prompt, click the paperclip icon. You can use the file as block content or as a reference.

Click the question mark icon to view example prompts or create your own prompt using these.

Click any example prompt to use it.

You can also preview an example prompt as a live demo on a separate page, such as a cover page example.

To copy the example and create the block on the page, click "Take the code."

Click "Apply prompt" to open the editor and modify your request.

Once the block has been generated, the AI chat will display a "Done!" message indicating that the block is ready to use. Below the prompt, you'll see the options to copy, regenerate, or delete it.

In the chat, you can expand the AI response to view and copy the code.

To see the full code, click "Code" in the top panel to open the editor, where you can manually edit the generated code of block.

To get the best result, you can regenerate the block code using the same prompt, refine your original prompt, or enter a new request.

For example, you can simply describe what needs to be changed in the block, and the AI will update the code.

By default, the block shows the latest generated version. To view a previous version, click the eye icon. To apply it, click "Apply."

Using this option, you can switch between different versions and select the suitable version. To save your result, simply close the AI chat window.

To edit the block again after closing the chat, click the "Edit with AI" button.

To edit an element in a created block, click it. The style and content panel will open.

To quickly switch to another element, click the Layers icon. The Layers panel will open.

Switch between different layers to select the element or group you need. The selected layer is highlighted in gray.

You can also quickly open the Layers panel from the Vibe Block code. Click the Layers icon, then select the required layer. The style panel will open.

Click the arrow icon to quickly select the parent group of a nested group or element.

Click the code icon to edit the element in the code.

To copy an element, click the duplicate icon. To delete it, click the trash icon. Use the up and down arrows to move the element in the Layers panel and change its order.

To edit an element with AI, click "Edit with AI." A panel for entering a prompt will open. The field will already include the path to the element you want to change.

The things that you can edit in the Content field depend on the selected element.

For a text element, you can edit the text in the Content field.

For an image, you can replace or remove the file, upload a new one, or select an image from the Image Library.

For a form, the Services button will appear. Use it to connect Tilda CRM or another data collection service.

For a group containing elements, the code will be displayed. You can edit it in the Content field or open it directly in the code editor.

To configure the responsiveness of a group or element, select the required screen icon in the Breakpoints field.

Four breakpoints are available by default, but you can add custom values. Click the gear icon, select "Add," enter the required screen width, and save the changes.

For a group or element, you can configure the width and height, corner radius, opacity, as well as minimum and maximum dimensions.

You can also configure flex settings for elements.

For groups and elements, you can configure margins and padding and change the background color.

To add a border to a group or element, click "Border." The available options will open in the style panel.

You can also configure additional effects or add properties to an element, such as animation.

Vibe Block has free request limits that are included in all pricing plans by default. The table below shows how many requests you can make every 12 hours and per month depending of your pricing plan.

If you have reached your account's request limit, you can purchase additional requests. To do this, go to the AI ​​Request Purchases page or click on the "Buy Requests" button in the pop-up menu in the block chat.

In the same window, you can also view your request limit for the current day and the total remaining usage limits included in the plan.