pick

hold ⌥, hover, click. each click is one pick for your agent.

how to pick#

1. hold ⌥. anything under the pointer lights up with corners and a tag naming the element and the agent it will go to.
2. click. click as many elements as you like while you hold ⌥.
3. let go, and tell your agent what to change.

you can also start picking from the toolbar icon or right-click → open element.

picking works inside iframes too: embeds, previews, storybook, claude artifacts. a frame loads element the first time you hold ⌥ over it, and its picks say the page and the frame they came from. frames chrome keeps extensions out of (pdfs, browser pages, some sandboxes) pick as one box.

what a pick contains#

• a selector (prefers id and data-testid), role and accessible name, text and value (never passwords)
• trimmed html, ancestors and the element's box
• the computed styles that differ from the defaults
• a screenshot cropped to the element
• when available, the component chain and source file: react (fiber debug info), vue 3 (__file), svelte dev (__svelte_meta), or build-plugin attributes like data-insp-path

a pick from a page with no source location (a production build, someone else's site) is also snapshotted right away, so your agent can read the element's html and css with el snapshot <id> --text. see what a snapshot contains.

where a pick goes#

to the agent session that owns the tab. one session running: there. several: the drawer asks which one, once per tab. see sessions.

change the hotkey#

open the drawer (⌥⇧S) → settings → shortcuts → change, then hold the new modifier keys and let go (esc cancels). combos are modifier-only and pick and save must differ. ⌘, ⇧ or ⌃ alone, and ⌘⇧ / ⌃⇧, are refused because the os or browser owns those clicks. changes apply in every open tab at once.

what it reads#

element reads a page only when you pick or share something, never in the background. password fields are never read.