Agentation is currently desktop only.

Annotation modes

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

TextElements Multi-Select Area Animation

"Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it's worth it in the end because once you get there, you can move mountains."

— Steve Jobs

Select text to annotate typos, content issues, or copy changes.

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
• Layout Mode • Place components and rearrange page sections
• 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.

Marker types

Different annotation modes use different marker styles.

• Single element or text selection
• Multi-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.

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.

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"

Keyboard shortcuts

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:

You: What annotations do I have?

Agent: 12 annotations across 4 pages. 7 are on /dashboard — mostly spacing and alignment. Want me to fix them?

You: Yes

Agents can acknowledge, ask questions, resolve with summaries, or dismiss with reasons.

Settings

The settings icon lets you customize Agentation to fit your workflow.

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

Manage MCP & Webhooks

MCP Connection allows agents to receive and act on annotations. Learn more

Webhooks

Auto-Send