Interaction mode

Use interactions to modify UI elements, adjust layouts, and update styling without writing code.

Don't waste time describing 'the blue button on the left' and customise your project visually without writing any code. You can simply click it, add your instruction, and attach it as a smart reference directly into your message.

Key benefits

Traditional AI chat often struggles with "hallucinations" regarding your code structure. By selecting the particular element, you provide the AI with the properties of the element. This results in:

1. Higher Accuracy: Code snippets generated by the AI will match your existing class names and styling conventions.

2. Less Typing: You don't need to explain where an element is; the pill handles the location, you just handle the logic.

3. Contextual Awareness: The AI understands the relationship between the element you selected and the rest of your design.

How it Works

The Interaction feature works by capturing the technical metadata of an element (tag, selector, styles) and bundling it with your instruction inside the chat box.

Step 1: Enter Interaction Mode

Navigate to the Preview Tab of your project. Click on the Interact button to enter the interaction mode.

As you move your mouse over the interface, you will notice elements being highlighted with a blue overlay. This indicates which element is currently "targetable."

Step 2: Select and Instruct

Once you find the element you want to modify or ask about:

1. Click on the highlighted element.

2. An Instruction Box will appear immediately over the selection.

3. Type exactly what you want the AI to do with this specific element (e.g., "Change this to a secondary ghost button style" or "Make this text wrap on mobile").

4. Click Save.

Step 3: Manage your Pills

After saving, you will notice an yellow pill along with your instructions will appear in your main chat input.

• The Pill contains everything: The AI now sees the exact CSS styles, the HTML structure, and your specific instruction.

• Smart Deletion: If you change your mind, simply press Backspace or click the X on the pill to remove the entire reference.

Step 4: Multi-Element Selection

You are not limited to one interaction per message! You can repeat this process for multiple elements.

• Select a header, add an instruction.

• Select a card, add an instruction.

• Send the message.

The AI will process all selected elements in context with each other, allowing for complex layout change requests in a single prompt.

Pro Tips for Better Results

• Be Specific: Instead of saying "Fix this," use the instruction box to say "Update the padding to 16px and change the font weight to bold."

• Combine with Images: You can attach screenshots and element interactions in the same message to give the AI both visual and structural context.

• Visual Feedback: If an element isn't highlighting, try hovering over its parent container; sometimes high-level layout changes are easier to prompt by selecting the parent element.