Quey is available on desktop

Installation

Quey works two ways: as a Chrome extension that adds a toolbar to your browser, or as an in-code SDK that injects the same toolbar directly into your dev server — no browser extension required. Either one pairs with a local MCP bridge that routes captures to your coding agent.

Requirements

  • Node.js 18 or later
  • Claude Code, Cursor, or another MCP-aware agent
  • Google Chrome (or Chromium-based browser) — only if you're using the extension path

Quick setup

The fastest way in: run the guided setup from your project root. It detects your framework, asks whether you want the extension or the SDK, wires up whichever you pick, signs you in, and offers to register with your agent and start your dev server — all in one command.

terminalbash
npx @quey/cli init
Tip
Signing in is machine-wide, not per-project — quey init asks once and every project on this machine picks up the same session automatically afterward.

Prefer to do it by hand, or want to understand what each step does? See the manual paths below.

Manual: Chrome extension

  1. 1

    Go to the Chrome Web Store

    Open the Quey extension page and click Add to Chrome.

  2. 2

    Pin the extension

    Click the puzzle icon in Chrome's toolbar, find Quey, and pin it so the icon stays visible.

  3. 3

    Sign in (optional)

    Click the Quey icon to open the toolbar. Sign in to unlock Pro features, or use the free tier without signing in. The extension only activates on localhost / 127.0.0.1 dev servers.

Manual: in-code SDK

@quey/sdk mounts the same toolbar directly in your app during development — useful for embedded webviews, remote dev environments, or anywhere the Chrome extension can't reach.

terminalbash
pnpm add -D @quey/sdk

Vite (or any Vite-based framework, including Remix 2.x):

vite.config.tsts
import { queyPlugin } from "@quey/sdk/vite";export default defineConfig({  plugins: [react(), queyPlugin()],});

Next.js:

next.config.tsts
import { withQuey } from "@quey/sdk/next";export default withQuey({  // your existing config});

Anything else (Create React App, a custom build tool): mount the component directly, near the root of your app.

App.tsxtsx
import { Quey } from "@quey/sdk";<Quey theme="dark" />
Note
Both the plugin and the component only run in dev mode — they're a no-op in production builds.

Start the bridge and register with your agent

Whichever path you chose, the local MCP bridge routes captures to your coding agent. Start it and register it once per project:

terminalbash
npm install -g @quey/clicd /path/to/your/projectquey bridge start   # keep running while you workquey mcp add        # registers Quey in .mcp.json

You should see:

outputtext
✓ Quey MCP bridge running on http://localhost:4747✓ HTTP bridge ready — extension/SDK can connect✓ MCP stdio ready — agent can connect
Tip
Add quey bridge start to your dev script in package.json to run it automatically.

quey mcp add creates or updates .mcp.json in your project root with the Quey server entry. Claude Code and Cursor auto-detect it on startup — no additional setup needed.

Note
On a different agent — Codex, Windsurf, Zed, VS Code, Cline, Gemini CLI, and more? Run quey add all or quey add <agent> instead. See MCP setup for the full list.

Verify the setup

Run the diagnostic to confirm everything is connected:

terminalbash
quey bridge doctor

A green checkmark means the bridge, account session, and agent registration can all talk to each other. If anything is red, the output will tell you what to fix.

Next: Send your first capture

Quickstart

Walk through selecting an element, typing an instruction, and getting a code change.

Basic workflow

Learn the full capture, agent, and approval loop.