benjitaylor/agentation

benjitaylor/agentation has 5,389 GitHub stars and 429 forks. GitHot measured +13 stars in 24 hours and +117 in 7 days. Last checked 2026-11-11 21:43 UTC. Last push 2026-09-22.

この数値の測り方

The visual feedback tool for agents.

5,389 スター 429 forks +13 24時間

できること

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

計測したスター増加

24時間: +13
7日間: +117
15日間: 更新が遅れています
1か月: 更新が遅れています

期間ごとの純増数です。期間は重複しており、日別の値ではありません。未計測の値は空欄です。スター数は注目度の指標であり、品質の保証ではありません。

README.md

オリジナル

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.

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:

<Agentation endpoint="http://localhost:4747" />

Keep the agent running, add a test annotation, and ask it to read the feedback. See the setup guide.

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 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

License

Licensed under PolyForm Shield 1.0.0