Features
Everything Agentation can do
Annotation modes
Click the tabs below to see examples of each annotation mode:
"Simple can be harder than complex: You have to work hard to get your thinking clean to make it simpl. But it's worth it in the end because once you get there, you can move mountains."
Select text to annotate typos, content issues, or copy changes. The quoted text is included in the output.
Toolbar controls
- Pause • Freeze all animations to annotate specific states
- Visibility • Toggle annotation markers on/off while working
- Copy • Get structured markdown for AI agents
- Clear • Remove all annotations
- Send Annotations* • Send annotations to your configured webhook
- Settings • Configure output detail, marker color, and behavior
Drag the toolbar to reposition it. Click a marker to remove it, or right-click to edit.
*Only visible when webhooks are enabled and auto-send is off
Marker types
Different annotation modes use different marker styles.
- 1Single element or text selection
- 1Multi-select or area (always green)
Smart identification
Agentation automatically identifies elements in a way that’s useful for code search. This makes it easy for agents to grep for the exact element in your codebase.
Benji Taylor
@benjitaylorhead of design @base. founder @family (acq by @aave). tools @dip.
Buttons and links are named by their text content.
Computed styles
View the computed CSS styles for any element directly in the annotation popup. Expand the collapsible section to see relevant properties like colors, fonts, and spacing.
Click the chevron to expand computed CSS styles for the selected element. Useful for debugging styling issues or communicating design specs.
React component detection
Agentation detects React component hierarchies automatically. When you hover over an element, you’ll see the full component tree, making it easy for AI agents to locate the exact component in your codebase.
Hover over any element to see its React component hierarchy.
Toggle React detection on/off in settings. The detection mode adapts automatically based on your output format:
- Compact — No React data (keeps output minimal)
- Standard — Filtered — shows user components, hides framework internals
- Detailed — Smart — only components that correlate with CSS class names
- Forensic — All — every component including framework internals
Keyboard shortcuts
Cmd+Shift+F / Ctrl+Shift+F | Toggle feedback mode |
Esc | Close toolbar or cancel |
P | Pause/resume animations |
H | Hide/show markers |
C | Copy feedback |
X | Clear all annotations |
Shortcuts are disabled when typing in an input field.
Agent sync
With MCP integration and the Annotation Format Schema, annotations become a two-way conversation. Agents can query, respond to, and manage your feedback:
Agents can acknowledge, ask questions, resolve with summaries, or dismiss with reasons.
Settings
The icon lets you customize Agentation to fit your workflow.
Choose how much detail to include in your output.
Limitations
- Desktop only — requires a desktop browser
- Per-page storage — localStorage persists 7 days. Use MCP server for cross-page persistence.
- Static positions — markers don’t update if layout changes
- No screenshots — output is text-only
- Animation pause — freezes most animations and videos on the page. Some third-party animation libraries may not fully pause.
- React 18+ only