quey

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.

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

Quick start

npx @quey/cli init          # detect framework, inject visual-editor script
npx @quey/cli mcp add       # add MCP server to .mcp.json
npx @quey/cli bridge start  # start the local provider

Or install globally (the package is @quey/cli; the binary it puts on PATH is quey):

npm install -g @quey/cli
quey init

How it works

1. Select — hover and click any element on a live webpage
2. Style — edit colors, fonts, spacing, and layout visually
3. Queue — send a structured capture to your coding agent (Claude Code, Cursor, etc.) via MCP

Commands

| Command | Description | |---------|-------------| | quey init | Detect framework, add visual-editor script to your layout | | quey bridge start | Start the local MCP + HTTP provider | | quey bridge doctor | Run provider diagnostics (alias: quey mcp doctor) | | quey mcp add | Add Quey MCP config to .mcp.json | | quey add cursor | Set up Cursor integration | | quey add claude-code | Set up Claude Code integration (same as mcp add) | | quey add all | Register with every agent add-mcp supports — shows what will be written and where, then asks to confirm | | quey add other | Pick from add-mcp's full agent list interactively | | quey add <agent-slug> | Register with one specific agent by slug (e.g. codex, windsurf, zed) via add-mcp | | quey detect | Print detected project info as JSON | | quey dev | Alias for bridge start |

mcp, cursor, and claude-code get a hand-written, dependency-free config writer since those are the agents we test against. Everything else — Codex, Windsurf, Zed, VS Code, Cline, Gemini CLI, and 20+ more — delegates to add-mcp, which knows each agent's config file/format so Quey doesn't have to hand-roll and maintain 20+ format writers.

Framework support

| Framework | Detection | Entry file | |-----------|-----------|------------| | Next.js (App Router) | next in deps + app/ dir | app/layout.tsx | | Next.js (Pages Router) | next in deps + pages/ dir | pages/_document.tsx | | Vite + React | vite + react in deps | index.html | | Create React App | react-scripts in deps | public/index.html | | Remix | @remix-run/react in deps | app/root.tsx |

License

PolyForm Shield 1.0.0