01
Source hints
See component and file clues when the page exposes React source context.
Dev mode
Inspect the live app with source-aware context.
Devmode turns the browser into a practical inspection layer for UI work. Connect what you see in the browser to the design values and source hints behind it — then hand that context directly to your agent.
Why it matters
Built for the browser-to-agent handoff.
02
Design inspection
Review typography, color, spacing, radius, and layout values from the selected UI.
03
Agent-ready
Copy useful context instead of describing the UI from memory.
Workflow
The same simple loop on every page.
Each product surface uses the same structure so visitors can compare capabilities without relearning the page.
01
Toggle
Open Devmode
Use Quey from the browser while the app is running.
02
Inspect
Select an element
Capture identity, location, design values, and source hints.
03
Handoff
Send context to the agent
Use the captured evidence to make edits faster and clearer.
Inspection layer
A browser-first dev mode for UI iteration.
Inspect the actual product UI before changing code. Devmode connects what you see in the browser to the design values and source hints behind it.
Element selection
Style values
Semantic breadcrumbs
Copyable context
Inspect then edit
Use the live page as your source of truth.
Install Quey and capture the UI context before starting the source edit.
Add to Chrome