AgentationAgentation is currently desktop only.

localhost:3000

Benji's Dashboard

button.submit-btn<br>Cancel<br>Add

Benji's Project

Claude Codev2.1.14Welcome back Benji!Opus 4.5 · ~/Code/agentation

How you use it<br>Click the icon in the bottom-right corner to activate<br>Hover over elements to see their names highlighted<br>Click any element to add an annotation<br>Write your feedback and click Add<br>Click to copy formatted markdown<br>Paste into your agent<br>Note: With MCP, you can skip the copy-paste step entirely — your agent already sees what you're pointing at. Just say “address my feedback” or “fix annotation 3.”

How agents use it<br>Agentation works best with AI tools that have access to your codebase (Claude Code, Cursor, etc.). When you paste the output, agents get:<br>CSS selectors to grep your codebase<br>Source file paths to jump directly to the right line<br>React component tree to understand the hierarchy<br>Computed styles to understand current appearance<br>Your feedback with intent and priority<br>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<br>The toolbar is active on this page. Try annotating these demo elements:<br>PrimarySecondaryModalShadow Modal<br>Example Card<br>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<br>Click in the toolbar to freeze this animation:

Agents talk back<br>With MCP integration and the Annotation Format Schema, agents don’t just read your annotations — they can respond to them:<br>“What annotations do I have?” — List all feedback across pages<br>“Should this be 24px or 16px?” — Agent asks for clarification<br>“Fixed the padding” — Agent resolves with a summary<br>“Clear all annotations” — Dismiss everything at once<br>Your feedback becomes a conversation, not a one-way ticket into the void.

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

Licensing<br>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.

Set up real-time sync with MCP →<br>Push annotations to external services →<br>Build your own integration with the API →