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

# 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...)
![Attachment 2](data:image/png;base64,iVBORw0KGgo...)

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

## Detailed Context

classes: "hero"
position: 24px, 24px (952x232px)
nearbyText: "Capture UI feedback with precision..."

# Forensic Annotation Report

## Environment

viewport: "1996x1833"
url: "https://example.com/"
userAgent: "Mozilla/5.0... Chrome/131.0.0.0"
timestamp: "2026-02-02T10:30:00.000Z"
devicePixelRatio: 2

---

## Element: header.hero

fullDomPath: "html > body > .page > .hero"
testId: "hero-section"
cssClasses: "hero"
position: x:24, y:24 (952x232px)
annotationAt: 12.5% from left, 45px from top
context: "Capture UI feedback with precision..."
computedStyles: "display: flex; flex-direction: column; gap: 20px;"
accessibility: "role: banner; aria-label: hero section"
nearbyElements: ".logo-block, .subtitle, .tab-nav"

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

Attachments:
![Attachment 1](data:image/png;base64,iVBORw0KGgo...)
![Attachment 2](data:image/png;base64,iVBORw0KGgo...)
![Attachment 3](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.

Pin feedback on any element

Bundle notes with context

Keep the team aligned

Sandbox

Shadow DOM host