stop describing the button.

click it in your browser. your agent knows exactly which one.

add to chrome star on github
$npm i -g @randyyu/element

free and open source · macOS · chrome, arc, brave, edge and any chromium browser

claude — ~/hearth
claude code ~/hearth · main
the order total doesn't line up with the prices
Read src/checkout/Summary.tsx
Update src/checkout/Summary.tsx
⎿ +3 −2 · grid-template-columns: 1fr auto
checkout · hearth & co
localhost:3000/checkout
shopjournalaboutbag (3)
cart›shipping›paymentfree shipping
arc floor lampbrushed brass
−  1  +
$148
linen throwoat · 130×170
−  1  +
$64
stoneware mugash glaze
−  2  +
$36
app.northwind.iooverviewcustomersbillingsettings
revenue
7d30d90d
mrr$48.2k▲ 8.1%
churn1.8%▼ 0.3
top customersmrr
linear labs$4.2k ▲
paper & co$3.1k ▲
lumen.so
lumenproductpricingdocssign in
new · lumen 2.0 is out →

docs that answer back

turn your docs into an assistant your users actually trust.

RAMPvercelNotionarc
works with every agent
claude codecodexcursorpianything with mcp or a shell
how it works

three steps. no copy-paste.

01
⌥+ hover

hold option

anything on the page lights up with corners as you move.

02
el_7button

click what you mean

one thing or ten. each pick lands in your prompt as a chip.

03
"make this green"

just say it

your agent already knows which button, where it lives, and what it looks like.

what your agent gets

more than a screenshot.

everything you'd dig out of devtools, attached to the pick.

el_7.json
  • selector + roleprefers id and data-testid
  • source filereact, vue, svelte component chain
  • computed stylesonly the non-default ones
  • screenshot cropjust the element, not your whole screen
  • html + ancestorstrimmed so it fits in context
// el_7
selector  button[data-testid="checkout"]
role      button "Place order"
component CheckoutButton
file      src/cart/Checkout.tsx:42
styles    background #e5484d
          border-radius 9px
          height 40px
shot      el_7.png  320×40
sessions

five agents, zero mixups

each tab belongs to one session. picks go to the agent that owns the tab.

1claude · fix the checkoutlocalhost:3000
2codex · dark mode passlocalhost:5173
3cursor · docs sitedocs.local
request_pick

your agent can ask, too

stuck on "which one?" it brings chrome forward and asks you to point.

claude code asks: which button is broken?
install

two minutes, tops.

1
add the extensionadd to chrome
2
$npm i -g @randyyu/element
3
$el install --claude
faq

questions.

is it really free?

yes. MIT licensed, no account, no server. it runs on your machine between chrome and your agent.

can it see my screen all the time?

no. element reads a page only when you pick something or your agent asks you to.

which browsers?

any chromium browser on macOS: chrome, arc, brave, edge, opera, vivaldi, dia and the rest. not safari or firefox, and not linux or windows yet.

go point at something.

add to chrome star on github