Quickstart

This guide gets you from zero to your first agent-ready capture in about 5 minutes. By the end, you will have the Chrome extension installed, the local MCP bridge running in your repo, and a coding agent connected.

Prerequisites

  • Node.js 18 or newer
  • Google Chrome (or a Chromium-based browser)
  • Claude Code, Codex CLI, or Cursor installed locally

1. Install the Chrome extension

The extension adds the Quey toolbar to every web page you visit. It never runs in the background — it only activates when you click the toolbar icon.

  1. 1

    Open the Chrome Web Store listing

    Go to the Quey extension page in the Chrome Web Store.

  2. 2

    Click Add to Chrome

    Accept the permissions prompt. Quey requests storage, activeTab, scripting, and captureVisibleTab — all used for the inspect and capture workflow.

  3. 3

    Pin the extension

    Click the puzzle icon in the Chrome toolbar and pin Quey so the icon is always visible. Click the icon on any page to activate the toolbar.

2. Start the MCP bridge

The MCP bridge is a local server that receives captures from the extension and exposes them to your coding agent. Run it inside the repo you want the agent to edit.

Install the CLI

terminalbash
npm install -g @uitoolbar/cli

Start the bridge

terminalbash
cd /path/to/your/project
uitoolbar bridge start

The bridge starts on port 4747 by default. You should see:

outputtext
✓ Quey MCP bridge running on http://localhost:4747
✓ HTTP bridge ready — extension can connect
✓ MCP stdio ready — agent can connect
Note
The bridge runs in combined server mode — HTTP bridge and MCP stdio in the same process. This is required so the extension and agent share the same capture state. See MCP server modes for details.

3. Register the MCP server

Run the mcp add command to register Quey with your coding client. This writes a .mcp.json entry to the current project.

terminalbash
uitoolbar mcp add

This generates:

.mcp.jsonjson
{
  "mcpServers": {
    "quey": {
      "command": "npx",
      "args": ["-y", "@uitoolbar/mcp", "server"],
      "env": {
        "TOOLBAR_AUTO_RUN": "0",
        "TOOLBAR_CODEX_CWD": "/path/to/your/project"
      }
    }
  }
}
Tip
For Claude Code, the .mcp.json file in your project root is picked up automatically. For Cursor, you may need to add the server via Settings → MCP.

4. Send your first capture

  1. 1

    Open the page you want to edit

    Navigate to your local dev server (localhost:3000 or similar) in Chrome.

  2. 2

    Activate Quey

    Click the Quey icon in the Chrome toolbar. The floating toolbar appears in the top-right corner.

  3. 3

    Select an element

    Click the Select mode (cursor icon). Hover over any element — a blue highlight and label appear. Click to lock the selection.

  4. 4

    Type your instruction and send

    Switch to the Agent tab. Type your instruction — for example: "Increase the padding and fix the text contrast." Click Send.

  5. 5

    Approve the diff

    The agent processes the capture, edits the file, and surfaces an inline diff in the toolbar. Click Approve to keep the changes or Reject to roll back.

Done
That's it. The agent edited your source file based on what you actually selected in the browser — no file hunting, no copy-pasting selectors.

Next steps