# benjitaylor/agentation

The visual feedback tool for agents.

Repository: https://github.com/benjitaylor/agentation
Canonical: https://ross.abutalabs.com/products/agentation
Homepage: https://agentation.com
Language: TypeScript
License: NOASSERTION
License Family: other
Topics: ai, design, tools, ui
Last push: 2026-06-07T06:16:06+00:00

## Health v2 (maintenance only)
Score: 54/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 86, release rhythm 35, longevity 16
- inputs: {"age_days": 228, "days_push": 87, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases, no_license
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 4456, forks 352 (observed 2026-08-28T04:08:49.340818+00:00)

## What it is
Agentation is a React component (npm package) that adds a floating toolbar to web apps, letting users click elements, select text, and annotate UI to generate structured markdown feedback for AI coding agents. It captures CSS selectors, source file paths, React component trees, and computed styles so agents can grep and locate the exact code being referenced, with optional MCP server integration for real-time agent sync.

## Use cases
- annotate UI elements to give AI coding agents precise feedback
- generate structured markdown with CSS selectors for Claude Code or Cursor
- pause page animations to capture and annotate specific UI states
- select text on a page to flag copy or typo fixes for an agent
- rearrange page layout and send placement instructions to an agent
- connect annotations to agents in real time via MCP server
- inspect computed styles and React component hierarchy of page elements

## When to choose
- you iterate on a React or Next.js app with AI coding agents like Claude Code, Cursor, Codex, or Windsurf
- you want to replace vague descriptions like 'the blue button in the sidebar' with grep-able selectors and file paths
- you need to annotate animations, text, or multi-element regions during design review
- you want bidirectional agent communication through MCP instead of copy-paste

## When to avoid
- your app is not React 18+ (the component requires React)
- you need mobile browser support (desktop only)
- you need a permissively licensed dependency (PolyForm Shield 1.0.0 is not OSI-approved open source)
- you work outside a codebase-connected agent workflow and just want simple screenshot annotation

## Facets
- artifact type: library
- maturity: active
- function: developer-tools, ui-components, mcp, web-framework
- domain: developer-tools, frontend, web-development, large-language-models
- platform: browser
- tags: ai-coding-agents, visual-feedback, ui-annotation, react-component, claude-code, cursor, mcp-server, design-feedback, element-inspection, polyform-license, ai-agents, web-server, nodejs, desktop

## Member repositories
- benjitaylor/agentation (main) score 54

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:08:49.340818+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T18:20:44.170678+00:00, confidence not recorded.
  - readme: https://github.com/benjitaylor/agentation (fetched 2026-08-28T04:08:49.340818+00:00, sha 5502948dab12)
  - homepage: https://agentation.com (fetched 2026-08-29T09:08:00.198767+00:00, sha d5b90a16ebb9)
  - site_page: https://www.agentation.com/install (fetched 2026-08-29T09:08:00.201280+00:00, sha 0c828d5776e5)
  - site_page: https://www.agentation.com/features (fetched 2026-08-29T09:08:00.203180+00:00, sha 13c13251f5b2)
  - site_page: https://www.agentation.com/changelog (fetched 2026-08-29T09:08:00.204828+00:00, sha 4c7311ef88de)
  - site_page: https://www.agentation.com/faq (fetched 2026-08-29T09:08:00.206520+00:00, sha 78db0588d6c5)
- Data as of 2026-08-30T08:39:29.467469+00:00.