Recommended by Pro Trailblazer
Agentation
Agentation
Point at a UI element in your own app and hand the agent the selector, source file, and component tree instead of describing it in prose.
About
Agentation is a visual annotation layer for local development that turns clicks on your running UI into structured context for a coding agent. Hover an element to see its name, click to leave a note, and the output carries the CSS selector, the source file path, the React component hierarchy, and the computed styles, so Claude Code or Cursor can find the right line without guessing. It syncs over MCP for a live connection, or you can copy and paste the block into any agent. Install is a single npm dependency, and it is free for individuals and for internal use inside a company.
Highlights
- Click a UI element and capture its CSS selector, source file path, component tree, and computed styles in one step
- MCP integration pushes annotations to the agent live, with copy and paste as the fallback for any tool
- Works with Claude Code, Codex, Cursor, and anything else that accepts pasted context
- Webhooks and an API for routing annotations into other services
- Installs as a single npm dependency, no separate app to manage
- Free for individuals and for internal company work, including proprietary projects