Features

Annotation modes

Click the tabs below to see examples of each annotation mode:

Toolbar controls

• Pause • Pause page motion 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
• Layout Mode • Place components and rearrange page sections
• Settings • Configure output detail, marker color, and behavior

Drag the toolbar to reposition it. Hover a marker to preview the feedback, then click to edit. You can change marker clicks to delete in settings; right-click always opens the editor.

*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.

localhost:3000/@benjitaylor

Follow

Benji Taylor

@benjitaylor

head of design @x & @spacexai

Los Angeles, CAbenji.org

487 Following220.9K Followers

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.

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.

Toggle React detection on/off in settings. The detection mode adapts automatically based on your output format:

• Compact: No React data, so output stays minimal
• Standard: User components only, with framework internals hidden
• Detailed: Only components that correlate with CSS class names
• Forensic: Every component, including framework internals

Layout mode

Press L to enter layout mode. A component palette appears with 65+ types you can drag onto the page. You can also grab existing sections and reposition them. Changes sync to connected agents via MCP in real time.

• Place components: Drag from the palette to add new elements
• Rearrange sections: Grab and drag existing elements into position
• Wireframe new page: Toggle wireframe mode to fade out the current page and sketch a layout from scratch, with an opacity slider and a purpose field for context
• Agent sync: Changes appear as annotations with kind: "placement" or kind: "rearrange"

Placements are spatial hints, not pixel-perfect specs. The agent receives component type, approximate position, and size relative to the viewport, then translates that into real CSS. Results will vary depending on the agent and your codebase.

Keyboard shortcuts

Single-key shortcuts work while the toolbar is open, and all shortcuts are disabled when typing in an input field. Cmd+Shift+F and Esc also work while it is closed.

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.

Fit your app

Pick targets inside open shadow roots and same-origin embedded pages. For a modal or popover, pass its content element to portalContainer so feedback stays within the host’s focus boundary.

Use an app name and stable data attributes to make feedback easier to identify. Copy full feedback or just source paths, classes or an attribute value. Add your own editor action when a source location is available.