benjitaylor__agentation/README.md at main

mirror of https://github.com/benjitaylor/agentation.git synced 2026-09-14 20:06:45 +08:00

Files

T

Benji Taylor 4e2fdbb5c5 Site rebrand and polish

Wordmark logo (red) across sidebar, mobile nav, settings panel, and README.
New favicon, IBM Plex Serif for titles, red AFS badges, .dev -> .com,
v3.0 date to March 24, layout mode blog post ending, overview page tweaks.

2026-03-24 09:59:40 -07:00

1.9 KiB

Raw Permalink Blame History

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.

Install

npm install agentation -D

Usage

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

License

Licensed under PolyForm Shield 1.0.0

1.9 KiB Raw Permalink Blame History Unescape Escape