Send your first capture

Assuming you've already set up Quey (extension or SDK) and started the MCP bridge, this walk-through shows how to select an element, write an instruction, and let your agent edit the code.

Before you start

Make sure you have:

• The extension installed and pinned in Chrome, or @quey/sdk wired into your dev server — see Installation
• quey bridge start running in your repo
• Agent (Claude Code / Cursor) open with .mcp.json registered
• Local dev server running (e.g., localhost:3000)

The flow

1. 1

   Open your site in Chrome

   Navigate to your local dev server in a Chrome tab.

2. 2

   Click the Quey icon

   The floating toolbar appears in the top-right corner with a dock menu.

3. 3

   Click Select, then click an element

   Hover over any element on the page. It highlights in blue with a label showing the component name and file. Click to lock the selection.

4. 4

   Switch to Agent tab and type

   Write a concise instruction: "Make the button larger and change the color to blue."

5. 5

   Click Send

   The capture goes to the MCP bridge, which routes it to your agent. The agent reads the element context and makes the edit.

6. 6

   Review and approve

   A diff appears in the toolbar showing what changed. Click Approve to commit the changes or Reject to roll back. You can also edit the code directly in your editor before approving.

Tips

• Be specific: "Fix the spacing" is harder for agents than "Increase padding from 8px to 16px."
• Select close to the change: The closer your selection is to the code you want to edit, the better the context.
• Use Style tab for quick tweaks: Colors, fonts, spacing — edit them visually without writing an instruction. See Style editing.
• Approval mode: By default the agent waits for approval. See Approval modes to run automatically.

Next