How UIFoxy finds the file and line of a component

UIFoxy reads the source location that React keeps in development mode, and the sourcemaps your dev server already serves. When you click an element, it tries a short list of sources in order, stops at the first one that answers, and tells your agent how sure it is. Nothing is installed in your project.

From click to prompt

1. Click the UIFoxy icon in the Chrome toolbar. The page enters selection mode. While it is on, clicks don't reach your app: a link doesn't navigate and a button doesn't submit. Esc leaves.
2. Click every element you want to change, as many as you need, and write what you want on each one, in any language.
3. Copy the prompt and paste it into Claude Code, Codex, Cursor, GitHub Copilot, ChatGPT, Gemini, OpenCode, Pi, Windsurf, Cline, Aider or any agent that takes text. It is Markdown on your clipboard.

Selections and comments survive hot reload and a page refresh. After a refresh the extension injects itself again and anchors each selection back to its element; if it can't, one click on the icon restores everything without losing text.

Two addresses for every element

A <button> is written inside Button.tsx, and <Button> is used inside Toolbar.tsx. Both lines are true, and they answer different requests. "Make the hover softer" is a change to the first; "use the secondary variant here" is a change to the second.

So the prompt carries two addresses, each on its own line with its own confidence label: Element, where the element's JSX is written, and Used at, where the closest component is used in its parent. When only one resolves, only that one appears.

**Element:** `src/components/ui/Button.tsx:42`  (source: exact)
**Used at:** `src/components/editor/Toolbar.tsx:18`  (source: exact)
**Request:** make the hover softer and use the primary color

After the addresses and your request comes the evidence a visual change needs: the component tree (up to three names), selector, DOM path, bounds, classes, computed styles, text and the element's HTML.

Confidence labels

Every address says where it came from. An agent that gets an exact line edits it; an agent told the address is a guess checks first.

• exact: React's own record of where the JSX was written.
• mapped: a position in the JavaScript the dev server served, translated back to your file through the sourcemap.
• name-only: no file, but the name of the component and up to three of its ancestors, such as Button ← Toolbar ← EditorPage.
• dom-only: no React information. Selector, tag, classes, text and aria-* attributes.

The resolution ladder

1. React 18 and earlier. In development mode, React records the file, line and column of every JSX element. Babel, SWC and esbuild all pass it along. The result is exact.
2. React 19.1 and later. React 19 dropped that record. Instead, UIFoxy reads the owner stack React keeps in development, which points at a position in the JavaScript as it was served. React 19.0.0 has neither, so it goes straight to component names.
3. Sourcemap. That position is translated to your original file. Vite puts the map inside each module it serves, Next.js with Turbopack serves it by URL, and Next.js with webpack in development embeds it in the code of the page's own scripts. The result is mapped.
4. Component names. The closest component and up to three ancestors. Works on any React app. The result is name-only.
5. DOM. Selector, tag, classes, text and aria-*. Always available. The result is dom-only.

Your setup, and what you get

Minified production pages

A minified app in production is not an error. Without a sourcemap the extension stops at the DOM rung, the prompt carries the selector, structure and text of the element, and the dom-only label makes that clear to the agent. It is still more than copying HTML by hand.

Nothing installed in your project

No dependency, no command, no modified dev server. The extension stays inert until you click its icon, which grants the activeTab permission for that tab only. Its only network request fetches the sourcemap from the same origin as the page you are inspecting, and nothing is sent to UIFoxy. The details are in the privacy policy.

The Free plan copies 5 prompts a day. Pro removes the limit for a single $10 payment. See pricing.