UIFoxyChrome extension for React · Vite · Next.js
Point at your UI. Tell your coding agent what to fix.
UIFoxy turns a click on any element of your running React app into a prompt that tells your coding agent exactly where it lives in your code. Nothing to install in your project.
Works with Claude Code, Codex, Cursor, GitHub Copilot, ChatGPT, Gemini, OpenCode, Pi, Windsurf, Cline, Aider and any agent that takes text.
Live preview: edit the note, then copy the prompt.
What your agent receives
Two addresses, a confidence label and your request, in whatever language you wrote it.
## UI change request: /
**URL:** http://localhost:3000/
**Viewport:** 1440x900
### 1. Button — a "See how it works"
**Element:** `components/Button.tsx:36` (source: exact)
**Used at:** `components/sections/Hero.tsx:171` (source: exact)
**Request:** soften the hover and add more side padding
**Tree:** Button ← Hero ← Home
**Selector:** `div.mt-8 > a.inline-flex:nth-of-type(2)`
**DOM path:** `body > main > section.relative.isolate > … > div.mt-8.flex > a.inline-flex.h-12`
**Bounds:** x=331, y=412, 158x48
**Classes:** `inline-flex h-12 items-center justify-center gap-2 rounded-full px-6 …`
**Text:** "See how it works"
**Computed styles:**
- display: inline-flex
- height: 48px
- padding: 0px 24px
- font-size: 15px
- font-weight: 500
**HTML:**
````html
<a class="inline-flex h-12 items-center …" href="/#how-it-works">See how it works</a>
````Three clicks from spotting the problem to your agent opening the right file
Nothing to install in your project. It works on the app already running on your localhost.
Click the icon
The page switches to selection mode. Hover to see the name of the component under the cursor.
Select and describe
Pick as many elements as you like and say what should change in each, the way you would say it out loud.
Copy and paste
The prompt lands on your clipboard, pointing to the exact spot in your code. Paste it into your agent and you are done.
Free to start. Ten dollars, once, for good.
Free
$0
For trying it in your day-to-day work.
- 5 prompts a day
- Multi-select with comments
- Exact spot in your code, with a confidence label
Pro
$10
One-time payment. Lifetime license.
- Unlimited prompts
- Prompt history that survives closing the browser
- Everything in Free
- No subscription, no renewal
Frequently asked questions
Which frameworks does it work with?
React 18 and 19 in development mode is the main case, with Vite and Next. On any other page the extension still gives you the selector, structure and text of the element.
Do I need to install anything in my project?
No. No dependency, no command, no modified dev server. The extension reads the component tree and the sourcemaps your bundler already serves.
How is UIFoxy different from React Grab or LocatorJS?
Both are good tools with a different job in mind. See UIFoxy vs React Grab and UIFoxy vs LocatorJS.
Which agents does it work with?
Any of them. The result is Markdown text on your clipboard, so it works with Claude Code, Codex, Cursor, GitHub Copilot, ChatGPT, Gemini, OpenCode, Pi, Windsurf, Cline, Aider or any agent that takes text.
What about a minified app in production?
The extension steps down one rung at a time and tells you where it stopped. Without a sourcemap, the prompt carries the selector, structure and text, and the confidence label makes that clear to the agent.
How does the free plan limit work?
You get 5 copied prompts a day, counted in your browser. Pro removes the limit with a single $10 payment, no subscription.
Lost your license key?
Go to the restore page and type the email you used at checkout. We'll send the key to that address.
Install, click, paste.
Less than fifteen seconds between seeing the problem and your agent having the right file.