Agentation – Visual UI Annotation for AI Coding Agents
Agentation is a tool that allows users to visually annotate UI elements for AI coding agents. It generates structured annotations containing CSS selectors, file paths, React component trees, and computed styles, enabling agents to precisely locate and fix issues. With MCP integration, agents can interactively query and respond to annotations, turning feedback into a conversation.
localhost:3000
Benji's Dashboard
1
2
3
4
5
|
Cancel
Add
Benji's Project
█
How you use it
Click the icon in the bottom-right corner to activate
Hover over elements to see their names highlighted
Click any element to add an annotation
Write your feedback and click Add
Click to copy formatted markdown
Paste into your agent
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
Agentation works best with AI tools that have access to your codebase (Claude Code, Cursor, etc.). When you paste the output, agents get:
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
Your feedback becomes a conversation, not a one-way ticket into the void.
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.
Set up real-time sync with MCP →
Push annotations to external services →
Build your own integration with the API →