# Interaction mode

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.

<figure><img src="https://3249760354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV8GfqSvH6vHDgFIKWOOu%2Fuploads%2Fw3OZc2g4FX9SmOio7NNW%2Fimage.png?alt=media&#x26;token=44a4f8f4-8e5f-4b7d-ac71-cbab74b441ee" alt=""><figcaption></figcaption></figure>

#### Step 1: Enter Interaction Mode

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

<figure><img src="https://3249760354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV8GfqSvH6vHDgFIKWOOu%2Fuploads%2FmfhFGHEU4btNMWnsNfkE%2Fimage.png?alt=media&#x26;token=8471d9d9-50a5-4016-ad03-a4760ee2a828" alt=""><figcaption></figcaption></figure>

&#x20;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**.

<figure><img src="https://3249760354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV8GfqSvH6vHDgFIKWOOu%2Fuploads%2FuTOBKbN1EtV4ejEDsUaf%2Fimage.png?alt=media&#x26;token=fb46b3a5-c29a-48b7-9c23-fa4ef7e5b432" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="https://3249760354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV8GfqSvH6vHDgFIKWOOu%2Fuploads%2F5mzDjeXwoeB7E2azIb5Q%2Fimage.png?alt=media&#x26;token=9f08436e-0b31-42f9-bd1d-3fa8052d7dc7" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="https://3249760354-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV8GfqSvH6vHDgFIKWOOu%2Fuploads%2FOI5MleXMxFiTGlxVwcGI%2Fimage.png?alt=media&#x26;token=6e7fcbe8-a2e8-4691-85a6-d1176f6e857d" alt=""><figcaption></figcaption></figure>

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.