Aki vs React Grab: Which Fits Your AI Coding Workflow?

Last checked: October 2026

Quick answer React Grab is a free, MIT-licensed script you add to your React app in development. You hover an element, press ⌘C or Ctrl+C, and paste the copied context (HTML plus the component stack with file and line) into your coding agent. It runs inside your app's page, so it works on any OS. Aki is a free-to-use Mac app. You mark elements, areas, or lines of text anywhere on your Mac (browser, Figma, Xcode, Finder, terminals), write a note on each one, and Aki delivers them to the right agent session. Pick React Grab if you live in a React codebase and want the lightest setup on any platform. Pick Aki if you want to point at things outside your React app, or want your marks routed to a specific session for you instead of pasted by hand.

What each tool is

React Grab

React Grab, by Aiden Bai, describes itself as a way to "copy any UI element for your agent." You install it with npx grab@latest init, which detects your framework and adds a development-only setup. You can also add it by hand to Next.js (App or Pages Router), Vite, or Webpack projects. The CLI's automatic setup covers Next.js, Vite, TanStack Start, and Webpack. It lists Remix, Astro, SvelteKit, and Gatsby as having no automatic setup.

In use, you hover any element in your app and press ⌘C / Ctrl+C. React Grab copies the element's HTML and its component stack with source locations, for example <a …>Forgot your password?</a> in LoginForm (at components/login-form.tsx:46:19). Recent versions also handle open Shadow DOM, same-origin iframes, drag selection of several elements, React list keys, and Three.js / React Three Fiber objects on canvas. A Comment action lets you attach an instruction to a grab.

To get grabs to your agent without pasting, there are two options:

• An agent skill the CLI can install. It has the agent run npx react-grab@latest pull in a loop. A background watcher reads grabs from the clipboard and hands each one to the agent as JSON, including your comment if you wrote one.
• A separate @react-grab/mcp package, an MCP server on localhost:7567 with a get_element_context tool that returns your latest selection. The npm package was last published in May 2026.

The project publishes a benchmark in which Claude Code paired with React Grab found the right source file in 317 of 331 tasks (96%), averaging 20.7 seconds. That is the vendor's own benchmark. React Grab is MIT-licensed, has about 7.6k GitHub stars, and has no paid tier that we could find.

Aki

Aki is a macOS app (macOS 14+, Apple Silicon) by an indie developer. Press ⇧⌘A, then click an element, drag an area, or hold ⌥ to select lines of text. Write a note, queue as many marks as you need, and press ⌘⏎ to send.

• In Chromium browsers (Chrome, Brave, Edge, Arc, Vivaldi), Aki asks the page for the exact element, using Apple Events JavaScript and no extension. It gets a unique CSS selector, the text, the HTML, and the React component's source file in dev builds. Arrow keys walk the DOM like DevTools.
• In other apps (Finder, Figma, Xcode, terminals), it uses macOS Accessibility to pick buttons, rows, and tabs. Area marks work everywhere.
• Text first: each mark carries the text it covers. A small image crop goes along only when what you marked is visual.
• Routing: a page on localhost:PORT goes to the worktree/session running that port. Anything else goes to the session you picked in Aki's sidebar. Your agent reads the marks through Aki's local MCP server (read_annotations, resolve_annotation, wait_for_annotations, get_annotation_image) or the aki CLI, and marks each one resolved.

Feature comparison

Choose React Grab if…

• You work mostly in a React app and want file-and-line context with very little ceremony.
• You're not on a Mac, or your team mixes Windows, Linux, and macOS. React Grab runs in the page, so the OS doesn't matter.
• You don't want to install a desktop app or grant it macOS permissions. A dev dependency and one keyboard shortcut are enough.
• You use Firefox or Safari for development. Aki's element picking needs a Chromium browser.
• You want MIT-licensed open source you can fork, embed, or build your own picker on (react-grab/primitives).
• Your workflow is copy-and-paste, or you already like its skill-based pull loop.

Choose Aki if…

• The thing to fix isn't only in your React app: a production site, a non-React page, a Figma frame, an Xcode view, a Finder window, a terminal.
• You want several marks with a note on each, sent as one batch.
• You run several agent sessions or worktrees and want each request to land in the right one, matched by localhost port or picked in a sidebar.
• You'd rather not touch the project's code. There's nothing to add to package.json or your layout file.
• You care about tokens. Marks are text first, and a crop goes along only when the mark is visual.

Using both

They don't conflict. React Grab lives in your app's page and uses ⌘C. Aki is a system-wide app and uses ⇧⌘A. A reasonable split:

• Use React Grab for quick, single-element grabs inside your React dev server when you're already talking to the agent.
• Use Aki for batches of notes, for anything outside that app, and when you want the marks routed to a specific session and marked resolved by the agent.

React Grab alternatives

If you're comparing tools that hand UI context to coding agents, React Grab's own benchmark page also covers Cursor Browser and Agentation. Broadly, the options fall into three groups:

• In-app scripts like React Grab: tied to your framework, cross-platform, no desktop install.
• Browser extensions: work across sites in one browser, no change to your code.
• Desktop apps like Aki: reach beyond the browser to native apps, at the cost of being OS-specific (Aki is Mac-only).

FAQ

Is React Grab free?

Yes. It's MIT-licensed open source, and we found no paid plan.

Does React Grab work without React?

It's built for React and reads React's internals in development. Its changelog mentions Solid source resolution, but its setup and docs focus on React. Aki's selectors, text, and HTML work on any page in a Chromium browser. Only the source-file lookup is React-specific.

Does React Grab support MCP?

Yes, through a separate @react-grab/mcp package that exposes a get_element_context tool. The main CLI also offers an agent skill that reads grabs from your clipboard.

Does Aki work on Windows or Linux?

No. Aki is macOS 14+ on Apple Silicon only. On other platforms, React Grab is the option of the two.

Do I need to change my code to use Aki?

No. You install the app, and in Chromium you turn on "Allow JavaScript from Apple Events." React Grab, by contrast, is added to each project as a dev-only dependency.

Sources

• React Grab GitHub repository and README: https://github.com/aidenybai/react-grab
• React Grab CLI README (frameworks, options): https://github.com/aidenybai/react-grab/tree/main/packages/cli
• React Grab changelog: https://github.com/aidenybai/react-grab/blob/main/packages/react-grab/CHANGELOG.md
• React Grab agent skill (pull loop): https://github.com/aidenybai/react-grab/blob/main/skills/react-grab/SKILL.md
• React Grab website: https://react-grab.com
• React Grab benchmarks: https://react-grab.com/benchmarks
• React Grab MCP docs: https://www.mintlify.com/aidenybai/react-grab/integrations/mcp
• @react-grab/mcp on npm: https://www.npmjs.com/package/@react-grab/mcp
• Better Stack, "React Grab" guide: https://betterstack.com/community/guides/scaling-nodejs/react-grab-ai/
• Aki: https://useaki.vercel.app