Warning
Fork notice: this repository is a maintained fork of benjitaylor/agentation with several additions on top of upstream:
- Annotation thread and reply UI
- Deep select for piercing overlays
- Alt hold-to-select mode with a crosshair cursor
- Review queue for resolved annotations
- MCP support for surfacing human thread replies
- Storybook plus expanded automated test coverage
- Neovim integration (
nvim/README.md) and a local router daemon (router/README.md) for multi-project Neovim routing
Agentation 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.
npm install agentation -Dimport { Agentation } from 'agentation';
function App() {
return (
<>
<YourApp />
<Agentation />
</>
);
}The toolbar appears in the bottom-right corner. Click to activate, then click any element to annotate it.
- Click to annotate – Click any element with automatic selector identification
- Text selection – Select text to annotate specific content
- Multi-select – Drag to select multiple elements at once
- Area selection – Drag to annotate any region, even empty space
- Animation pause – Freeze all animations (CSS, JS, videos) to capture specific states
- Structured output – Copy markdown with selectors, positions, and context
- Dark/light mode – Matches your preference or set manually
- Zero dependencies – Pure CSS animations, no runtime libraries
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.
- React 18+
- Desktop browser (mobile not supported)
Full documentation at agentation.dev
Neovim/router docs:
nvim/README.mdrouter/README.md
pnpm install
pnpm build
pnpm testRouter binaries are published via GitHub Actions on tags matching router-v*.
© 2026 Benji Taylor
Licensed under PolyForm Shield 1.0.0