downloads

Visual feedback for agents

Agentation turns UI annotations into structured context that AI coding agents can understand and act on. Click any element, add a note, and paste the output into Claude Code, Codex, Grok, or any AI tool.

How you use it

  1. Click the icon in the bottom-right corner to activate
  2. Hover over elements to see their names highlighted
  3. Click any element to add an annotation
  4. Write your feedback and click Add
  5. Click to copy formatted markdown
  6. Paste into your agent

How agents use it

Give the output to Claude, Codex, Gemini, Grok, or any coding agent with access to your codebase. Depending on your output settings and what the page exposes, it includes:

  • CSS selectors to grep your codebase
  • Source file paths to jump directly to the right line
  • React component tree to understand the hierarchy
  • Computed styles to understand current appearance
  • Your feedback with intent and priority

Without Agentation, you’d have to describe the element (“the blue button in the sidebar”) and hope the agent guesses right. With Agentation, you give it .sidebar > button.primary and it can grep for that directly.

Try it

The toolbar is active on this page. Try annotating these demo elements:

Example Card

Click on this card or select this text to create an annotation. The output will include the element path and your feedback.

Animation pause demo

Click in the toolbar to freeze this animation:

Agents talk back

With MCP integration and the Annotation Format Schema, agents don’t just read your annotations — they can respond to them:

  • “What annotations do I have?”: List all feedback across pages
  • “Should this be 24px or 16px?”: Agent asks for clarification
  • “Fixed the padding”: Agent resolves with a summary
  • “Clear all annotations”: Dismiss everything at once

Follow-up questions and resolutions stay attached to the original annotation.

Best practices

  • Be specific: “Button text unclear” is better than “fix this”
  • One issue per annotation: easier for the agent to address individually
  • Include context: mention what you expected vs. what you see
  • Use text selection: for typos or content issues, select the exact text
  • Pause animations: to annotate a specific animation frame

Licensing

Agentation is free for individuals and companies for internal use. Use it to annotate your own projects, debug your own apps, or streamline feedback within your team. Contact us for a commercial license if you're redistributing Agentation as part of a product you sell.