Last checked: October 2026. Agentation's details come from its public docs and repo and may change. Check >agentation.com for the current version.
Quick answer
- Agentation is a React component (
npm install agentation -D) that you add to your own web app. It shows a toolbar in the page, so you can click elements, select text or draw areas, and then copy structured Markdown or let an agent read it over MCP. It runs in any desktop browser on any OS, but only inside a React 18+ app you control.Aki is a macOS app. You press ⇧⌘A to mark anything on your Mac: a web page in a Chromium browser, Finder, Figma, Xcode or a terminal. It sends the marks to the coding agent session that should get them. You don't install anything in your project, but it needs a Mac with Apple Silicon.
Rule of thumb: If your team builds React apps on mixed operating systems, Agentation fits well. If you work on a Mac and want to point at things outside your own app too, try Aki. You can also use both.
What each tool is
Agentation describes itself as "an agent-agnostic visual feedback tool." Benji Taylor built it and wrote about it in January 2026. You mount <Agentation /> next to your app. A toolbar then sits in the bottom-right corner, and you click elements to annotate them. Its output includes CSS selectors, source file paths in dev mode (it detects these with Vite, Next.js, Webpack and Turbopack), the React component tree, and, at higher detail levels, bounding boxes and computed styles. There are four detail levels: Compact, Standard, Detailed and Forensic. You can paste the Markdown into Claude Code, Codex, Gemini, Cursor or any other agent. You can also run its MCP server (npx -y agentation-mcp server, on localhost:4747 by default) so the agent reads annotations directly. The server has nine tools, including agentation_watch_annotations for a hands-free loop. It also offers webhooks and a REST API. Agentation needs React 18+ and is desktop-only (no mobile).
Aki works at the level of the operating system. On a Mac, you press ⇧⌘A. Then you click an element, drag an area, or hold ⌥ to pick lines of text. You add a note to each mark, queue as many as you need, and send them with ⌘⏎. In Chrome, Brave, Edge, Arc or Vivaldi, Aki asks the page for the exact element through Apple Events JavaScript, with no extension. It gets a unique CSS selector, the text, the HTML, and the React component source file in dev builds. Arrow keys move through the DOM the way DevTools does. In other apps, Aki uses macOS Accessibility for buttons, rows and tabs. Area marks work in any app. Each mark carries the text it covers, and Aki attaches a small image crop only when the marked thing is visual. Agents read the marks through Aki's local MCP server or the aki CLI, and they mark each one resolved when they're done.
Feature comparison
| Agentation | Aki | |
|---|---|---|
| What it is | React component (npm package) | Native macOS app |
| Setup | npm install agentation -D, mount <Agentation /> (usually only in dev) |
Install the app (script or DMG). Nothing goes into your project |
| Where it works | Inside the React app where you added it | Anywhere on your Mac: web pages, Finder, Figma, Xcode, terminals |
| Browsers | Any desktop browser that runs your app | Element picking in Chromium browsers (needs "Allow JavaScript from Apple Events"). Area marks work everywhere |
| Frameworks | React 18+ (Next.js, Remix, Astro as client component) | Any site for selectors. React source file in dev builds |
| What the agent receives | Markdown with selectors, source paths, component tree, optional bounding boxes and computed styles, plus your note | Selector, text, HTML, React source file (web) or Accessibility info (apps), your note, and an image crop only when the mark is visual |
| Agent connection | Copy/paste, or MCP server with 9 tools, webhooks, REST API | Local MCP server (4 tools) or aki CLI |
| Routing to the right session | You connect your agent to its MCP server, which groups annotations into sessions | A page on localhost:PORT goes to the session running that port. Anything else goes to the session you pick in Aki's sidebar. Aki can type the request into the terminal tab (Orca) |
| Agent status view | — | Sidebar ring for each Claude Code / Codex session, with state, context use and pending marks |
| Privacy | Annotations in browser localStorage, or a local MCP server if you enable sync | Stored on your Mac. Server only on 127.0.0.1. No account, no telemetry. Never reads password fields |
| Price | Free for individuals and internal company use. Commercial license needed to redistribute it in a product you sell | Free to use. Donations optional |
| License | PolyForm Shield 1.0.0 (source-available) | FSL-1.1-ALv2 (source-available; each version becomes Apache-2.0 after two years) |
| Platform | Any desktop OS (runs in the browser) | macOS 14+, Apple Silicon only |
| Maturity | Public since early 2026, with an active ecosystem | New (0.2.0, October 2026) |
Either way, the agent you use may send what it reads to its AI provider.
Choose Agentation if…
- Your team doesn't all use Macs. Agentation runs in the browser, so it works on Windows, Linux and macOS alike. Aki only runs on Apple Silicon Macs.
- You build in React and want the feedback tool in your codebase. Everyone who runs the dev build gets the toolbar, with nothing extra to install.
- You want rich React context. Agentation includes the component tree and computed styles at its higher detail levels, and its source detection covers the major bundlers.
- You use Firefox or Safari. Agentation is part of the page itself, so the browser doesn't matter. Aki's element picking needs a Chromium browser.
- You want integrations. Webhooks, a REST API, and MCP tools for replying to and dismissing annotations make it easy to build custom workflows.
- You want something more established. Agentation has been public longer, and other people have built tooling around it.
Choose Aki if…
- You want to point at things outside your own app. Examples: a native app, a design in Figma, a Finder window, an error in a terminal, or a reference site you don't control.
- You don't want to add a dependency to the project. This helps when you jump between many repos or work on non-React stacks.
- You run several agent sessions or worktrees at once. Aki sends localhost pages to the session that serves that port, and its sidebar shows each session's state and pending marks.
- You care about token use. Marks are text first, and image crops go along only when the mark is visual.
- You're on a Mac with Apple Silicon and use a Chromium browser for web work.
Using both together
They don't conflict. Agentation lives in the page and Aki lives in the OS. A reasonable setup: keep Agentation in your React app's dev build for detailed component feedback that your teammates can use too. Then use Aki on your Mac for everything else, like native apps, other sites and terminal output, and to route marks between parallel sessions. Both connect to agents over MCP, so one agent can have both servers registered.
Agentation alternatives
If Agentation doesn't fit, these are the main kinds of alternatives:
- OS-level tools such as Aki. You mark anything on screen with no code changes. Mac only.
- Unofficial framework ports. The community has published Agentation-style tools for other stacks. Examples include a Svelte package (
sv-agentation), a Chrome extension called "Agentation Vue" for Vue 2.7/3 apps, and a TYPO3 wrapper. These aren't from Agentation's author, so check them yourself before relying on one. - Browser extensions that annotate any page without code changes. These are a good choice when you can't modify the app.
- Screenshots with notes. These work everywhere, but they cost more tokens, and the agent has to guess which element you meant.
FAQ
Is Agentation free?
Its site says it's free for individuals and for internal use at companies. If you redistribute it as part of a product you sell, you need a commercial license. The code is under PolyForm Shield 1.0.0.
Does Agentation work without React?
The official package needs React 18+. Community ports exist for Svelte and Vue, but they're unofficial. Aki doesn't depend on your framework because it reads the page from outside.
Does Aki work on Windows or Linux?
No. Aki is macOS 14+ on Apple Silicon only. If you need cross-platform support, Agentation is the better choice.
Do both work with Claude Code and Codex?
Yes. Both support copying or reading feedback in agents like Claude Code, Codex and Gemini CLI. Agentation does this through Markdown or its MCP server, and Aki through its MCP server or CLI.
Which one sends screenshots?
Agentation's output is structured Markdown. Aki sends text first and adds a small image crop only when the mark is visual. You can turn that off.
Sources
- Agentation repository and README: https://github.com/benjitaylor/agentation
- Agentation license (PolyForm Shield 1.0.0): https://github.com/benjitaylor/agentation/blob/main/LICENSE
- Agentation website and licensing note: https://agentation.com
- Agentation output formats: https://agentation.com/output
- Agentation MCP docs: https://agentation.com/mcp
- Agentation FAQ: https://agentation.com/faq
- Benji Taylor, "Agentation" (Jan 21, 2026): https://benji.org/agentation
- Agentation Vue (unofficial Chrome extension): https://chromewebstore.google.com/detail/jlnankjnhpjffajbcnodbohdkpoeifmc
- Svelte Agentation (unofficial): https://peerlist.io/bhide/project/svelte-agentation
- Aki: https://useaki.vercel.app