A dev-only overlay that turns "change this" into a source-aware Copilot prompt.
Point at any element in your React dev server, describe the change in plain language, and vibefix ships a prompt — with the exact file, line, and expanded Tailwind classes — straight into Copilot Chat's Agent mode. No browser extension. No copy-paste. Published to npm.
- Role
- Design + Engineering (solo, shipped to npm)
- Stack
- TypeScriptViteReactNode.jsTailwind
- Timeline
- 2026
- Status
- Published to npm
- Ownership
- Solo design + engineering
- Outcome
- 7 IDEs across Windows, macOS, and Linux
Context
Vibe-coding workflows (Cursor, Copilot Chat, Windsurf Cascade) all rely on the same thing: the AI knowing which file, which line, which classes to touch. In practice, people copy-paste selectors, take screenshots, or type "the button on the top right of the pricing page" and hope. The bridge from "the thing I'm pointing at in the browser" to "the exact source coordinates" was missing, and every workaround I saw was fragile.
How it works
The overlay lives on the browser side; source resolution and Tailwind expansion happen on the dev server; delivery into the chat panel is a file-watched handoff to a tiny companion extension. Nothing crosses origins, nothing ships to prod.
Constraint
- Framework-agnostic. Had to work in Vite, Next.js, Remix, Astro, plain static HTML — anything.
- Zero production footprint. Nothing about this tool should end up in a prod bundle. Not one byte.
- No browser extension. Extensions mean install friction, permission prompts, and Chrome-only for months.
- No copy-paste loop. The prompt should land in the chat panel, not the clipboard.
- No React peer conflict. The tool bundles React internals for the overlay, but the host app might be React 17, 18, 19, or not React at all.
Move
- Two integration modes, one product. A first-class Vite plugin (same port, zero proxy) and a framework-agnostic CLI proxy (
npx vibefix) that spawns your existing dev script and mounts the bubble on a sibling port. Same feature set either way. - Source resolution via React Fiber.
_debugSourceon the fiber node gives filename & line; the server maps them to project-relative paths so the prompt reads "editsrc/components/Pricing.tsx:47", not a source-map URL. - Tailwind-aware prompts. The
tailwind.config.{js,ts}is parsed server-side; utility classes on the picked element expand into their underlying CSS values inside the prompt. The AI seespadding: 1.5remnotp-6. - Four same-origin endpoints.
/__vibefix/bubble.js(~180 KB overlay),/__vibefix/tailwind,/__vibefix/resolve,/__vibefix/execute. Clean surface, no CORS weirdness. - Auto-installed VS Code companion. First run detects any of
code,code-insiders,codium,cursor,windsurf,trae,positrononPATHand installs a tiny companion extension. It watches.vibefix/inbox/*.mdand, per file, callsworkbench.action.chat.open({ query, mode: "agent" }). - Graceful fallback. No IDE CLI on
PATH? The prompt still writes to.vibefix/inbox/and gets copied to the clipboard. Paste into Cursor, Claude, ChatGPT — whatever you use. - Production safety by construction. The Vite plugin declares
apply: "serve", so it only loads undervite/vite dev— nevervite build. The proxy binds to127.0.0.1. No network exposure, no prod code.
Result
- Shipped to npm as
vibefix(MIT, TypeScript-first, own type declarations). - Supports 7 IDEs / forks out of the box (VS Code, VS Code Insiders, VSCodium, Cursor, Windsurf, Trae, Positron), Windows / macOS / Linux.
- No React peer dependency on the host app — bubble bundles its own React runtime; host can be React 17/18/19 or not React at all.
- Vite peer range unbounded — Vite 4 through 8+ tested; future majors work without a
vibefixupdate. - Feature-flagged prod safety — documented, testable, and enforced by the Vite plugin's
applyhook rather than trust.
What I'd change
- Source resolution beyond React.
_debugSourceonly exists in React. Svelte / Vue / Solid would each need their own compile-time hook or dev-server middleware. First-class support is a fair amount of adapter work per framework. - Direct IPC over file-watcher. The
.vibefix/inbox/*.mdpattern is portable but indirect. A lang-server-style JSON-RPC socket would trim end-to-end latency, at the cost of more platform-specific code. - Better multi-select ergonomics. Single-element prompts are polished; multi-select prompts still feel like a v1. Needs a real UX pass, not just concatenated markdown.
- Companion-install failure modes are quiet. If the auto-install partially succeeds on a system with three IDEs on
PATH, the diagnostics are — charitably — sparse. Avibefix doctorcommand would earn its keep.