Open source · agent-native

Visual feedback your
coding agent can act on

Click or speak on any web page. ShareWithAgent anchors every comment to a real DOM element and hands your coding agent “button .hero__cta, contrast too low” — not “something near (840, 312).”

Nothing to install — paste a public URL and start marking it up. For logged-in, internal, or CSP-strict pages, use the bookmarklet, extension, or terminal below.

Other ways to use it

Rather not paste a URL — or need a logged-in, internal, or CSP-strict page? Same result every way: every comment anchored to a real DOM element (CSS selector + box + element HTML + styles), plus a prompt-ready Markdown digest.

💻 Terminal for devs + agents

Capture any page, annotate in your browser, and stream feedback straight back into your coding agent's session.

npx sharewithagent annotate https://your.app

Alias swa. Add --json to pipe the payload to an agent/hook.

🔖 Bookmarklet no install

Drag this to your bookmarks bar, then click it on any page to mark it up — nothing to install.

⤵ Share with Agent

Drag the button up to your bookmarks bar. (Sites with a strict Content-Security-Policy block it — use the extension there.)

🧩 Browser extension one click, any page

Click the toolbar icon on any page — it freezes the page exactly as you see it (logged-in, JS-rendered), then you annotate.

⬇ Download extension

Chrome/Edge: unzip → chrome://extensions → Developer mode → Load unpacked.

What makes it different

🎯

Anchored to the DOM, not pixels

Each note carries a CSS selector, bounding box, element HTML and computed styles. The agent knows exactly what you meant.

🧩

Four surfaces, one engine

Terminal, bookmarklet, browser extension, and a hosted page — all drive the same annotator and emit the same schema. Start however you like; your agent gets identical output.

🔒

Private by default

Snapshots render on your machine. Share links live in the URL fragment — never sent to a server. Self-host the whole thing.

🎙️

Voice user-testing (soon)

Speak aloud while you browse; an LLM pass turns the ramble into discrete, element-anchored usability issues.

Why not just screenshot?

A screenshot tells an agent where. A DOM snapshot tells it what. That difference is the whole product.

Screenshot tools

“There’s a problem near coordinate (840, 312).” The agent has to guess which element, then hunt for it in the codebase.

ShareWithAgent

main > section.hero > a.hero__cta, padding 8px, background #6b7280, contrast too low.” The agent opens the file and fixes it.

The hosted version gives everything away

100% → charity

ShareWithAgent is free and open-source forever — self-host it for nothing. The optional hosted instance costs $5/month, and every penny (after card fees) is donated.