Agent Snap

Ship feedback faster.

Capture UI feedback with precision. Annotate elements, collect context, and export structured output for your team.

npm install agent-snap

Module

Embed it directly

Import the ESM package and mount Agent Snap inside any web page.

Vite plugin

Use it during dev

Inject the toolbar from Vite and save copied snapshots into your project.

Chrome extension

Run it anywhere

Load the browser extension and annotate the active tab on demand.

> snap Annotate the hero section
Selecting header.hero
Added annotation #1
Captured screenshot
Done!
output.md
# Annotation Report

## Element: header.hero

selector: "header.hero"
tagName: "HEADER"
text: "Ship feedback faster..."

Screenshot:
![Annotation 1 screenshot](data:image/jpeg;base64,/9j/4AAQSkZJRg...)

Attachments:
![Attachment 1](data:image/png;base64,iVBORw0KGgo...)

@note
message: "Review hero layout"
timestamp: 1706889600

Annotate

Pin feedback on any element

Capture precise notes on headers, buttons, or full regions with multi-select.

Collect

Bundle notes with context

Each marker stores element data, nearby text, and computed styles.

Review

Keep the team aligned

Track changes, add revisions, and see acknowledgements inline.

Sandbox

Shadow DOM

Test annotations inside Shadow DOM boundaries. The annotation system works seamlessly across encapsulated components.

Shadow DOM host