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 init          # detect framework, inject visual-editor script
npx quey mcp add       # add MCP server to .mcp.json
npx quey bridge start  # start the local provider

Or install globally:

npm install -g quey
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 | | 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 detect | Print detected project info as JSON | | quey dev | Alias for bridge start |

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