Select an element

“Change the button”: which one? When your page has ten of them, the easiest is to point at it. Select an element lets you click a heading, a button, an image or a card in the preview: it’s attached to your next message, and the agent knows exactly what you mean.

Select an element

1. In the chat, click the + to the left of the input, then Select an element (“Click an element in the preview to attach it to your message”).

2. The editor switches to the Preview tab and shows “Click an element in the preview · Esc to cancel”. As you hover over the app, the element under your mouse is highlighted.

3. Click the element you want. It’s attached to your message and the input gets the focus back, with the prompt What should change on this element?

4. Type your request and send it:

   Make this button stand out more: solid background, bigger text, and a small arrow on the right.

If the left panel was collapsed, it reopens on the chat by itself.

How the element shows up

The chosen element shows as a chip above your text, with:

• the name of the component it belongs to (for example PricingCard), or its tag otherwise;
• its HTML tag in angle brackets (for example button);
• the start of its text in quotes, if it has any.

Hover the chip to see the details: the page it’s on, the chain of components around it and its selector.

Once the message is sent, the chip stays above your message in the history: you can easily tell what your request applied to.

Remove or change the element

• Remove: click the small cross on the chip (Remove the selected element). Your text stays in the input.
• Change: start Select an element again and click another element. It replaces the previous one: a message targets one element at a time.
• Cancel the selection in progress: press Esc, or choose Select an element again in the + menu.

The element is removed automatically after sending: your next message doesn’t target anything, unless you select another one.

What the agent receives

Along with your message, the agent gets a description of the element: the page, the components around it, its tag, its text and its classes. It finds it in the code and applies your request to that element only, without touching the rest.

Tip

For a simple, purely visual change (a text, a color, a margin), you don’t need the agent: Edit directly in the same + menu opens Design mode, where you edit the element yourself, for free. Keep Select an element for things that need code: a behavior, an animation, a new section next to it, a redesign.

Example requests

Add a "Frequently asked questions" section right after this section.

When someone clicks this card, open a detail page with the full description of the class.

This heading wraps onto two lines on mobile: shorten it and keep it on one line.

When selection isn’t available

Select an element is greyed out, with the reason on hover, when:

• the preview isn’t ready yet (“The preview isn’t ready yet”);
• the agent is building the very first version of the app (“Wait for the agent to finish”);
• you’re viewing an old version (“Not available on an old version”): go back to the current version first.

You can also attach an element to a question in Discussion mode: “Why isn’t this element aligned with the rest?”

Note

From Design mode, the Ask the agent button does the same thing: it goes back to the chat with the element you were editing already selected.

See also

Chatting with the agentThe + menu, images, connectors.

Design modeEdit an element without the agent.

The previewScreen sizes, navigation, errors.

Writing good requestsClear, targeted requests.