Agentation: a visual feedback layer that turns clicked elements into selectors for coding agents

The gap Agentation fills between a visual bug and a code location

Describing a UI problem in words is lossy. "The blue button in the sidebar" may match three buttons. An agent then greps for guesses, opens the wrong file, and edits something adjacent. Agentation's premise is that the browser already knows the answer: the element you clicked has a class list, a tag path and a bounding box. The tool captures those and emits them as structured markdown.

The audience is narrow and specific. You need a React 18+ application, a desktop browser, and a workflow where an AI coding agent reads text you paste. The README states the requirements plainly, and it also states that mobile is not supported. If your team reviews designs on a phone, this is not the tool for that session.

How the toolbar captures selectors, positions and context

The mechanism is a component you render alongside your app. It mounts a toolbar in the bottom-right corner. Clicking the toolbar activates annotation mode; from there the README lists click-to-annotate with automatic selector identification, text selection, drag multi-select, area selection over arbitrary regions, and an animation pause that freezes CSS, JS and video animations so you can capture a specific frame.

The output is markdown containing selectors, positions and context. The README's own example is the useful part: instead of writing "the blue button in the sidebar", you hand the agent `.sidebar > button.primary`. That is a string an agent can grep for directly, which is the whole design goal. The README states the package has zero dependencies and uses pure CSS animations, with no runtime libraries. That matters for bundle review, though the toolbar still ships inside the package you install.

One detail the documentation does not settle: how stable a generated selector is across refactors. Class names produced by CSS-in-JS or utility frameworks can change between builds, and the README does not discuss selector fallbacks or stability guarantees. Treat the copied selector as a starting point for grep, not as a permanent identifier.

Installing Agentation and annotating your first element

The README gives a single install command. It is a dev dependency, which is the correct shape for a tool that should not reach production bundles.

npm install agentation -D

Then render the component once, as a sibling of your app root. The README's example imports the named export and places it after `<YourApp />` inside a fragment.

import { Agentation } from 'agentation';

function App() {
  return (
    <>
      <YourApp />
      <Agentation />
    </>
  );
}

After that, the toolbar appears in the bottom-right corner. Click it to activate, then click any element you want to annotate. The README does not document a configuration prop list, so anything beyond the default mount point is undocumented; check agentation.com if you need options.

If you are working in the repository itself rather than consuming the package, the root package.json defines pnpm workspace scripts. `pnpm dev` runs the package watcher and the example app together, and `pnpm example` runs only `feedback-tool-example`. The monorepo also contains an `mcp/` directory and a `pnpm mcp` script that starts `agentation-mcp`, though the README does not describe what that server does.

Where Agentation stops being the right tool

The React 18+ requirement is the first wall. The related searches include people looking for Agentation for Vue, and the README offers nothing for that case: no Vue adapter, no framework-agnostic build, no web component. The component is a React export.

The desktop-only constraint is the second. The README says mobile is not supported, which rules out annotating responsive breakpoints on a real device. Area selection and drag multi-select assume a pointer, and the animation pause assumes a desktop rendering path.

The third limitation is subtler. Agentation produces a description of the DOM, not of your component tree. A selector like `.sidebar > button.primary` points at rendered output. If the element comes from a shared component used in five places, the agent still has to decide which call site you meant. The tool narrows the search; it does not eliminate the judgement.

Finally, the README does not document rollback, versioning policy or a changelog, and no releases were retrieved. If you need pinned upgrade paths, that information is not in the repository's front page.

Agentation compared with screenshot-and-paste workflows

The obvious alternative is the workflow most teams already use: take a screenshot, paste it into the agent, and type a description. That approach needs no dependency, works on any framework, and handles mobile. Its weakness is precision. A screenshot shows pixels; it does not carry a selector, and the agent has to infer the file from visual layout. Agentation trades a dev dependency for a string the agent can search.

A second alternative is browser DevTools itself. You can inspect an element, copy its selector, and paste that into your prompt. This is free and framework-independent. The difference is friction and context: DevTools gives you one selector at a time, with no notes attached, no multi-select, no region annotation, and no animation freeze. Agentation's value is bundling those into one copy action.

The related searches pair Agentation with "chrome extension" and "extension". The README describes a React package installed through npm, not a browser extension, so anyone arriving with that expectation should read the install section again before installing anything.

Licence, maintenance and what an upgrade costs you

The README states the project is licensed under PolyForm Shield 1.0.0, copyright Benji Taylor, 2026. The repository's licence field reads NOASSERTION, which is consistent with a non-standard licence that automated tooling cannot classify. PolyForm Shield is not an OSI-approved open source licence, and it carries field-of-use restrictions that permissive licences do not. Read the LICENSE file in the repository before shipping it inside a commercial product; this article is not legal advice.

The last push to the default branch was on 2026-06-07. That is the only maintenance signal available here, and it is the fact to weigh rather than any claim about how actively the project is developed. No releases were retrieved, so there is no published changelog to diff between versions.

The upgrade surface is small, which lowers the cost of trying it. The package is a dev dependency with, per the README, zero runtime dependencies. Removing it means deleting one import and one JSX line. The monorepo also publishes `agentation-mcp` separately, and the root scripts include `publish:agentation`, `publish:mcp` and `publish:all`, so the two packages version independently. If you adopt only the React component, the MCP server is not part of your dependency graph.

Editorial conclusion

Adopt Agentation if you build a React 18+ desktop web app and already paste screenshots or prose descriptions into an AI coding agent; the selector output is more precise than either. Do not adopt it for Vue, Svelte or mobile projects, because the README lists React 18+ and desktop browsers as requirements and says mobile is not supported. Before committing, verify three things: that the PolyForm Shield 1.0.0 terms fit a commercial product, that the published npm package matches the monorepo's package/ directory, and that the last push, on 2026-06-07, is recent enough for your dependency policy.

Frequently asked questions

Official sources

1. benjitaylor/agentation on GitHub
2. Issues
3. Project website
4. README