DOM context selector — Select elements for agent context

Documentation Index

Fetch the complete documentation index at: https://docs.stagewise.io/llms.txt

Use this file to discover all available pages before exploring further.

The DOM context selector lets you click on elements in the browser and attach them to chat messages. Instead of describing a UI change, point at the element and say “change this.” Selected elements attach their structure, styles, position, and selector path to your next message.

​

Using the selector

1. Activate — Keyboard shortcut or toolbar button
2. Hover — Elements highlight as you move
3. Click — Select the element. Select multiple before sending
4. Send — Selected elements appear as attachments

​

What the agent receives

When you select a DOM element, the agent gets:

• HTML structure — Outer HTML and DOM position
• Computed styles — Key CSS properties
• Bounding box — Position and dimensions
• Selector path — A unique CSS selector

​

Tips

• Be specific — Select the most specific element. A button is better than the entire page.
• Combine with text — Pair selection with instructions: “Make this button larger and use the primary color.”
• Select multiple elements — Show the agent a pattern or request changes across components.

​

Keyboard shortcut

Full keyboard shortcuts →

​

Related

• Browser & agent concept →
• Agent context concept →