agentation
Add Agentation visual feedback toolbar to a Next.js project
Open source Repository Open in the app JSON README (API)
About
Add Agentation visual feedback toolbar to a Next.js project
Details
- Kind
- Agent skills
- Topic
- No topic detected
- Publisher
- benjitaylor
- Origin
- skillssh
- Category
- ferramentas
- Stars
- 4,659
- Forks
- 382
- Open pull requests
- 24
- Last push
- 2026-06-07T06:16:06Z
- Repository state
- ativo
- Language
- TypeScript
- License
- NOASSERTION
- Added
- 2026-08-30 15:21:15
- Updated
- 2026-09-11 01:03:08
- Origin id
benjitaylor/agentation/agentation
README
<picture>
<source media="(prefers-color-scheme: dark)" srcset="package/logo-dark.svg">
<img src="package/logo.svg" alt="Agentation" width="200">
</picture>
<br>
[](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 (
<>
<YourApp />
<Agentation />
</>
);
}
```
The toolbar appears in the bottom-right corner. Click to activate, then click any element to annotate it.
## Features
- **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
## 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