Quello

quello

Point at any element in your browser and tell your AI agent: "quello". Visual element picker for Claude Code, Cursor, Codex, Windsurf & Copilot.

You pick elements in the running app; quello writes them to `.quello/picks.json` as `PICK 1`, `PICK 2`, … Then you say *"make PICK 2 sticky"* and the agent knows exactly which component you mean.

**MVP status** — Vite only, dev mode only. No MCP server and no Next.js adapter yet (both v2).

Packages

Package	Description
`@quello/core`	Framework-agnostic browser runtime. Zero dependencies.
`vite-plugin-quello`	Vite plugin: injects the runtime and persists picks.

Plus two manual test apps: [`playgrounds/vue`](playgrounds/vue) and [`playgrounds/react`](playgrounds/react).

Usage

// vite.config.ts
import { defineConfig } from 'vite'
import quello from 'vite-plugin-quello'

export default defineConfig({
  plugins: [quello()],
})

Start the dev server, then:

• Alt+Q (or the quello button, bottom right) toggles picker mode
• Hover highlights the element under the cursor and names its component
• Click assigns the next number and pins a badge to the element
• Click a badge to remove that pick; Clear all empties the list
• ⚙ opens the settings panel; – collapses the toolbar
• Drag the ⠿ grip to move the toolbar anywhere
• Esc closes the panel if it is open, otherwise leaves picker mode

Picks survive a page reload: on load the runtime re-resolves each stored selector for the current URL.

What a pick records

{
  "id": 2,
  "label": "PICK 2",
  "selector": "article.card:nth-of-type(2) > p",
  "domPath": "html > body > div#app > main.page > section.card-list > article.card[2] > p",
  "tag": "p",
  "classes": [],
  "attributes": {},
  "text": "Vue component name and source file.",
  "html": "
Vue component name and source file.
",
  "rect": { "x": 861, "y": 222, "width": 198, "heigh