Quey is available on desktop
The all-in-one platform for modern product teams. Design, iterate, and ship.
Quey vs React Grab
React Grab and Quey solve a similar problem — turning a clicked UI element into context a coding agent can act on. The main difference is where they run: React Grab is installed as a dependency inside your React app, while Quey is a Chrome extension that works on any page without touching your codebase, plus adds visual style editing on top of capture.
Side by side
| Feature | Quey | React Grab |
|---|---|---|
| What it is | Chrome extension for visual capture and agent handoff | Open-source npm package for selecting DOM elements and copying agent context |
| Where it runs | Any webpage, via a browser extension — no app changes | Installed inside your React app as a dependency |
| Works without adding a dependency | Yes | No — added to your app's package.json |
| Hands context to your coding agent | Yes — MCP bridge and structured clipboard payload | Yes — copies element and source context, includes an MCP server |
| Design values captured | Colors, fonts, radius, spacing, and layout | Selector, source file, and component tree |
| Visual style editing | Yes — Frame/Font/Color tools with a live preview | No — capture and handoff only |
| Framework requirement | Works on any page Chrome can render; source hints are richest with framework metadata | Built specifically for React apps |
| Pricing | Free tier, then $5/month Pro or $35 one-time lifetime | Free, open source |
When to use each
FAQ
No, they're independent projects. Both address the same broad problem — getting a coding agent real context from a clicked UI element — but Quey runs as a browser extension rather than an in-app package, and adds visual style editing.
No. Quey runs entirely as a Chrome extension. The optional local MCP bridge runs as a CLI process in your project directory — it isn't a dependency added to your app's code.
Yes. Quey captures the DOM, computed styles, and design values on any page. Source-file hints (component name, file path, line number) are most precise on frameworks that expose that metadata, but the core capture works everywhere.
More comparisons
Figma is where teams design UI before it's built. Quey is for after it's built — selecting the real, rendered element in your live app and handing an agent exactly what changed and where. They solve different problems and most teams that use Quey still design in Figma first.
Framer is a website builder — you design, publish, and host inside Framer's platform. Quey is a browser extension that works on any site, including apps that live entirely in your own repo, and its job ends the moment your coding agent has the context it needs to make the edit.
Agentation is an overlay widget embedded in your app for leaving pixel-precise feedback notes that an agent can read and act on. Quey takes a more direct path: select the element, edit the actual style live in the browser if you want to, and hand the agent a structured capture — as a browser extension, with nothing added to your app.
No install required
Install the Quey extension once, and use it across every project without adding a package to each one.
Add to Chrome© 2026 Quey. Built for extension-first coding workflows.
