AI-first developers
Move faster when visual iteration is faster than writing instructions.
Meet
Turns your visual intent into real code. Quey is a design-to-code toolbar that runs locally in your browser and turns your codebase into an editable canvas. Select, Describe, Edit, Ship.
localhost:3000
Now in public beta
Build faster,
ship with confidence.
The all-in-one platform for modern product teams. Design, iterate, and ship.
2.4×
faster iteration
98%
user satisfaction
10k+
teams onboarded
⚡
Lightning Fast
Deploy in seconds with one-click builds and zero downtime.
🎯
Precision Tools
Edit exactly what you mean, nothing more, nothing less.
🔒
Secure by Default
Enterprise-grade security and compliance out of the box.
Three steps: From visual idea to source code.
Install Quey, click any element on your live page, and hand finished context to your coding agent.
1
Install the toolbar
Add Quey to Claude Code, Cursor, Codex — whichever one you already use.
2
Click to select
Click any element and Quey captures the selector, styles, source file, and visual context in one payload.
3
Send to your agent
Describe the change in Quey's agent panel — Claude, Cursor, or Codex streams the edit back.
Not another screenshot!
You already screenshot the bug, inspect it in dev tools, and describe the fix in words. Quey skips straight to the source — the real component, styles, and selector, 1:1 — so your agent isn't guessing what you meant.
Plugs into your codebase
Install it in your existing codebase and start building — no migration, no new framework.
No hunting for the component
Quey captures the DOM path, computed styles, source file, and component name.
No missing context
Element, styles, source hints, and visual context travel together in one structured payload.
No manual style tweaking
Adjust frame, font, and color directly in their real codebase
Bring your own agents
Connect to Claude Code, Cursor, Codex, and more via MCP
Instant feedback loop
Get instant design help and feedback and iterate until it's right.
5+
Works with your existing workflows.
Quey doesn't replace your coding agent.
Bring the agent you already pay for and use.
Cursor
Codex
Claude
MCP
Codex
GitHub
MCP
Cursor
GitHub
Claude
Make the change visually.
Let your agent write the implementation..
Quey captures the element, component, source location, styles, position, and visual context — then hands it directly to your agent.
1
MoveFreeform
Header
Sidebar
Content
No changes
Move & layout tool. Drag elements where you want them, resize, reorder, or nudge pixel by pixel — then hand the visual change to your agent.
2
Comment2 open
Annotation mode. Pin a comment directly to the element it refers to. Your markers survive refreshes and batch straight to your agent.
3
StyleToolbar dock
W1080px
H1688px
Style editing. Tune color, type, and spacing live on the page, then let your agent turn the visual change into real CSS.
4
Region screenshot capture. Draw a box around what you mean. Quey pairs the screenshot with the element and page context before sending it to your agent.
Your agent writes the code.
Quey shows it what you mean.
Built for the way we build software now.
Designers & PMs
Leave feedback directly on the live product.
Solo builders
Go from idea → visual change → source code without breaking flow.
Teams
Give everyone a shared visual language for working with coding agents.
Faster and more accurate at finding the right file.
Same file-retrieval prompts, run head-to-head through the same claude --print subprocess. Lower time and higher accuracy both win.
ResolverSpeed (geo-mean)AccuracySolved
Quey7.4s100%20/20
React Grab7.8s95%19/20
No tool (control)14.6s90%18/20
Holds up at scale: 89.4% accuracy across a 330-case suite of harder indirection patterns.
Use Quey the way you like
Start free with Hobby, unlock Pro for active usage, or buy Lifetime once.
Hobby
Free
Sign in free
Includes:
- Element selector + source file capture
- Style editing — color, font, spacing, effects
- Clipboard handoff to your coding agent
- 5 AI agent handoffs / day
Pro
$5/ month
Billed monthly
Start free trialIncludes:
- Element selector + source file capture
- Region screenshot with semantic context
- Style editing — color, font, spacing, effects
- Clipboard & MCP agent handoff
- Works with Claude, Codex, Cursor, VS Code
- Annotation pins on any element
Lifetime
$35once
Billed once
Claim QueyEverything in Pro, plus:
- Unlimited agent edit sessions
- Move & layout tool — drag, resize, reorder
- Per-session undo stack & safe iteration
- Side-panel streaming for live agent edits
- Multi-agent: Claude + Codex + Cursor + MCP
- All future tools & updates included
Your questions, answered
Everything you need to know
Quey turns your live browser into an editable canvas — like Figma or Framer, but for real production UI. Click any element and instantly inspect its source file, computed styles, layout, and semantic context. Tweak colors, spacing, and typography visually, then hand the exact changes to your coding agent as a structured prompt. No more describing UIs by hand — what you see is what your agent gets.
Quey provides the visual context and editing interface. Your coding agent performs the actual source-code changes. Quey doesn't replace your agent — it gives your agent a better way to understand the page
Yes. The Hobby plan covers the core browser workflow for free (sign-in required), then you can upgrade later if you need more active usage or a lifetime unlock.
Yes. Quey is a bridge layer, not another AI subscription. It works on top of what you already pay for. Currently supported integrations include Cursor, Claude Code (Anthropic), and OpenAI Codex — with MCP support for any compatible agent setup.
Any model with agentic capabilities. Quey is model-agnostic — it structures context and hands it off. First-class integrations are available for Claude (Sonnet, Opus), Codex, and Cursor's built-in agent. If your setup can consume a clipboard prompt or connect via MCP, it works with Quey.
No. The same capture workflow can be used with Claude, Codex, Cursor, ChatGPT, or any MCP-aware setup that can consume structured UI context.
Yes. Quey is the visual handoff layer. Bring your preferred coding agent, then use Quey to capture the live element, DOM path, and source hints before you ask for the edit.
No. The Chrome extension is the fastest way to get started — install it and you can click any element on any live site immediately. But if you're building your own app, the Quey SDK lets you embed the toolbar directly without the extension. It supports Vite (via a plugin) and Next.js (via withQuey in next.config.js). It runs in dev mode only and is a no-op in production.
Install the Chrome extension for browser-side selection, then run npx @quey/cli bridge start inside the repo you want to edit. This starts the local MCP bridge so your coding agent can receive structured UI context directly from the toolbar.
Stop describing what you want changed.
Connect Quey to your existing coding workflow and start editing your real UI visually. Your browser is the canvas. Your codebase is the source of truth. Your agent does the work.
Install locally in seconds
© 2026 Quey. Built for extension-first coding workflows.