Extension-first tooling for coding agents

Visual prompting and design for modern interfaces.

Quey is the in-browser design-to-code layer for any production codebase. Build your imagination, fine-tune AI-generated interfaces visually and queue the payload to your agent.

Add to ChromeTry for freeTry for free

Already loved by 100 people

Bring your own agents

  • Cursor
  • Claude
  • Codex
  • MCP
  • GitHub

Every surface

In every tool, at every step

Select on the live page, stream context through MCP, and hand off to Cursor, Claude, or Codex — without leaving your workflow.

In your browser

In your repo

Terminal
$ npx quey.dev

MCP · localhost:4747

In your agent

  • Cursor
  • Claude
  • Codex
  • MCP

Same capture, your choice of harness.

Get started in seconds

Three steps to visual editing

1
Install the extension

Add Quey to Chrome from the Chrome Web Store and pin it for quick access. Chrome Web Store

2
Start the provider

Run the local provider in your project directory.

npx quey.dev
Copy
3
Select and edit

Press Alt+S to select any element and hand exact UI context to your agent.

In the browser

Select, tune styles, and hand off to your agent

app.quey.dev / dashboard
Button · primary CTA

Click any live element to capture its selector, bounds, source file hints, and component name in one action — without switching windows or writing a query.

Install extensionView schema

From screenshot to source

Select, edit, and ship from the page itself.

  • Click the UI that needs work

    Capture the real element, selector, bounds, styles, and source hints from the page in front of you.

  • Describe the change in context

    Keep the screenshot, DOM path, and component clues together so your agent starts from evidence.

  • Apply the diff with less backtracking

    Move from visual feedback to source edits without rewriting the request or hunting for files.

  • Ship with confidence

    Review the final diff, commit, and deploy — knowing the change matches exactly what you saw in the browser.

Features

Everything you need to edit visually

Point at any element on a live page, capture structure and styles in a shadow-root toolbar, and hand a clean payload to your editor or MCP bridge; selectors, bounds, and context stay accurate while you iterate.

Element Selection

Click any element on a live page to select it. Quey detects the React component, file path, and line number automatically.

Learn more →
<Button>src/components/Button.tsx:14
<Card>src/components/Card.tsx:8
<Hero>src/sections/Hero.tsx:22
<Nav>src/components/Nav.tsx:5

Region Capture

Drag a screenshot region and keep the same semantic context: primary element, related elements, stack hints, and agent-ready JSON travel with the image.

Learn more →
●Reading Hero.tsx
●Applying changes
●Writing diff…
- color: gray+ color: #0066ff

Agent Streaming

Describe your changes visually and watch your coding agent edit the source file in real-time with streaming diffs.

Learn more →
320 × 180

How Quey helps

Workflow with less friction

Click any element

Select live UI and capture the DOM path, bounds, and source hints.

Keep visual context

Attach screenshot regions to the exact element and surrounding page state.

Hand off clean payloads

Send structured selectors, styles, and metadata to your agents.

Edit with agents

Give Codex, Cursor, Claude, or any agent enough context to patch the right file.

Inspect source clues

Jump from the element to filenames, selectors, and component identity when source is visible.

Tune styles in place

Access frame, font, and color controls all in one place while staying on the selected element.

Pricing

One purchase. All features. Forever.

Start with the core browser workflow, unlock Pro for active usage, or buy Lifetime once.

Pro

$5/mo

3-day free trial, then $5/mo. Cancel anytime.

What's included

  • AI edit handoffs
  • Capture, annotate, and inspect tools
  • All providers: Cursor, Claude, VS Code, Codex, and MCP
  • Faster visual iteration flow
Start free trial

Lifetime

Best value
$35once

$79 launch pricing

One payment for the full editing workflow.

What's included

  • All providers: Cursor, Claude, VS Code, Codex, and MCP
  • Unlimited AI edit handoffs
  • Select, edit, move, scale, annotate, and inspect tools
  • Per-session undo and safer iteration
  • Side panel streaming for agent workflows
  • Future updates included

7-day full refund guarantee

20 spots leftClaim Quey

Your questions, answered

Everything you need to know

  • 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.

  • Yes. You can start with the core browser workflow for free, then upgrade later if you need more active usage or a lifetime unlock.

  • No. The same capture workflow can be used with Claude, Codex, Cursor, ChatGPT, or any MCP-aware setup that can consume structured UI context.

  • Install the Chrome extension for selection in the browser, then run npx quey.dev inside the repo you want to edit so the provider can expose project-aware context to your agent.

Connect your Current Stack and start shipping.

Quey is free to start and built for your subscriptions. Connect Claude, Codex, Cursor, or MCP in one workflow.

Install locally in seconds

Quey

Quey runs in the browser, captures the live element, and keeps source hints, visual state, and agent-ready context intact.

© 2026 Quey. Built for extension-first coding workflows.