[](https://www.npmjs.com/package/agentation) [](https://www.npmjs.com/package/agentation) **[Agentation](https://agentation.com)** is an agent-agnostic visual feedback tool. Click elements on your page, add notes, and copy structured output that helps AI coding agents find the exact code you're referring to. ## Install ```bash npm install agentation -D ``` ## Usage ```tsx import { Agentation } from 'agentation'; function App() { return ( <> ); } ``` The toolbar appears in the bottom-right corner. Click to activate, then click any element to annotate it. ## Connect to your agent Copied feedback works with Claude Code, Codex, Gemini, Grok, or any AI tool. For direct sync, register `npx -y agentation-mcp server` with your MCP client and connect the toolbar to its HTTP endpoint: ```tsx ``` Keep the agent running, add a test annotation, and ask it to read the feedback. See the [setup guide](https://agentation.com/install#agent-integration). ## Features - **Click to annotate** – Click any element with automatic selector identification - **Text selection** – Select text to annotate specific content - **Multi-select** – Hold Cmd/Ctrl to select elements individually, or drag to select multiple at once - **Area selection** – Drag to annotate any region, even empty space - **Animation pause** – Pause supported CSS animations, Web Animations, and videos to capture specific states - **Structured output** – Copy markdown with selectors, positions, and context - **Embedded pages** – Select elements in open shadow roots and same-origin iframes - **Integration options** – Capture identifying attributes, choose metadata-only Copy formats, and open detected source locations through your editor integration - **Hash routes** – Opt in to separate annotations and sessions for each hash route - **Dark/light mode** – Toggle in settings, persists to localStorage - **Zero dependencies** – No runtime libraries beyond the React peer dependencies See the [package README](package/README.md) for props and integration examples. ## How it works Agentation captures class names, selectors, and element positions so AI agents can `grep` for the exact code you're referring to. Instead of describing "the blue button in the sidebar," you give the agent `.sidebar > button.primary` and your feedback. ## Requirements - React 18+ - Desktop browser (mobile not supported) ## Docs Full documentation at [agentation.com](https://agentation.com) ## License © 2026 Benji Taylor Licensed under PolyForm Shield 1.0.0