vibefix

Point at any element in your running app, describe the change in plain language, and the prompt lands in GitHub Copilot Chat — automatically.

vibefix adds a small overlay to your dev server. You pick a UI element, type what you want changed, and a context-rich prompt — including the exact source file and line, the element's Tailwind classes, the page URL, and your instructions — is opened directly in your IDE's chat panel, ready to run.

No browser extension. No second tab. No copy/paste loop.

Contents

• Features
• Requirements
• Quick start (Vite)
• Quick start (any framework)
• How it works
• Configuration
• Supported IDEs
• Production safety
• FAQ
• License

Features

• Visual element picker with single- and multi-select.
• Source-aware prompts — React Fiber _debugSource is resolved to a project-relative file:line, so the AI knows exactly where to edit.
• Tailwind-aware — your tailwind.config.{js,ts} is parsed and utility classes are expanded to their underlying CSS values inside the prompt.
• One-click handoff to GitHub Copilot Chat (Agent mode), via an auto-installed companion VS Code extension. Falls back to clipboard + chat panel if the IDE API is unavailable.
• Two integration modes — a first-class Vite plugin (same port, zero proxy) and a framework-agnostic CLI proxy for everything else.
• Zero production footprint — dev-only by construction.

Requirements

| | Version | | --- | --- | | Node.js | ≥ 18 | | VS Code / Cursor / VSCodium / Windsurf / Trae / Positron | any recent release | | Vite (for the plugin) | 4, 5, 6, 7, 8+ (optional peer) |

vibefix ships its own React runtime inside the bubble bundle. There is no React peer dependency on your application — your project can use any React version (or none at all).

Quick start (Vite)

Install:

npm install -D vibefix
# or: pnpm add -D vibefix / yarn add -D vibefix

Add the plugin to your Vite config:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import vibefix from "vibefix/vite";

export default defineConfig({
  plugins: [react(), vibefix()],
});

Start your dev server as you normally would:

npm run dev

Open the URL Vite prints (typically http://localhost:5173). You should see a small bubble in the bottom-right corner. Click it, pick an element, describe your change, and press Send to IDE.

The first run installs a tiny VS Code companion extension (vibefix.vibefix-companion) into every supported IDE found on your PATH. Subsequent runs are idempotent.

Quick start (any framework)

For Next.js, Create React App, Remix, Astro, SvelteKit, plain static HTML, or anything else, use the standalone CLI. It spawns your existing dev script and proxies it through vibefix:

npx vibefix

Or point it at an already-running server:

npx vibefix --target http://localhost:3000

Open the URL vibefix prints (defaults to http://localhost:5174) — not your underlying dev server URL. The bubble is only present on the proxied URL.

How it works

flowchart LR
  subgraph Vite[Vite plugin mode · same port]
    B1[Browser] -- HTTP --> V[Vite dev server :5173<br/>+ vibefix middleware]
    V --> B1
  end

  subgraph CLI[CLI proxy mode · framework-agnostic]
    B2[Browser] -- HTTP --> P[vibefix proxy :5174]
    P -- spawn / reverse-proxy --> D[Your dev server :PORT]
    D --> P
    P --> B2
  end

  B1 -. Send to IDE .-> F[.vibefix/inbox/*.md]
  B2 -. Send to IDE .-> F
  F -- FileSystemWatcher --> C[Companion VS Code extension]
  C --> Chat[Copilot Chat · Agent mode]

Both modes serve four endpoints same-origin:

| Endpoint | Purpose | | --- | --- | | GET /__vibefix/bubble.js | The overlay UI bundle (≈ 180 KB) | | GET /__vibefix/tailwind | Resolved tailwind.config tokens | | POST /__vibefix/resolve | Maps React Fiber source coordinates to a project file | | POST /__vibefix/execute | Writes a prompt markdown file to .vibefix/inbox/ |

The companion extension watches .vibefix/inbox/*.md and, for each new file, calls workbench.action.chat.open({ query, mode: "agent" }), then moves the file into .vibefix/processed/.

Configuration

Vite plugin options

vibefix({
  // Override the root used for tailwind + source resolution.
  // Defaults to Vite's resolved `config.root`.
  projectRoot: process.cwd(),

  // Skip auto-installing the VS Code companion extension on first start.
  // Useful in CI or container environments.
  noInstall: false,

  // Mount the /__vibefix/* routes without injecting the <script> tag.
  // Useful for measuring overhead or for custom mounting.
  noBubble: false,
});

CLI flags

| Flag | Default | Description | | --- | --- | --- | | --target <url> | (auto) | URL of an already-running dev server to proxy. Skips child-process spawn. | | --script <name> | dev | package.json script to spawn. | | --port <n> | 5174 | Port the proxy binds on. Auto-picks the next free port if busy (unless --port is set explicitly). | | --host <host> | 127.0.0.1 | Bind host. Keep loopback unless you have a reason. | | --project <dir> | cwd | Project root used for Tailwind + source resolution. | | --no-bubble | | Skip overlay injection (proxy-only). | | --no-install | | Skip companion auto-install. | | -h, --help | | Show help. |

Supported IDEs

The companion extension auto-installs into every IDE CLI it detects on PATH:

code · code-insiders · code-exploration · codium · codium-insiders · cursor · windsurf · windsurf-next · trae · trae-cn · positron

If none of these CLIs are available, the proxy still runs — clicking Send to IDE copies the prompt to your clipboard and you can paste it into your assistant manually.

Production safety

• The Vite plugin declares apply: "serve", so it is loaded only by vite and vite dev — never by vite build. Your production bundles contain zero vibefix code.
• The CLI is invoked explicitly (npx vibefix) and exits when you stop it.
• The proxy binds to 127.0.0.1 by default; nothing is exposed to your network.
• The bubble bundle, all /__vibefix/* routes, and the companion extension are dev-only artifacts.

FAQ

Does it work without GitHub Copilot? Yes. If the companion extension can't reach a chat provider, Send to IDE falls back to writing the prompt to .vibefix/inbox/ and copying it to your clipboard. You can paste it into Cursor Chat, Windsurf Cascade, ChatGPT, Claude — anything.

Does it modify my source files? No. vibefix only reads them (to resolve React Fiber coordinates to file paths and to read your Tailwind config). All prompts are written to .vibefix/inbox/ and .vibefix/processed/ in your project root — add .vibefix/ to .gitignore if you don't want them committed.

Does it work with React 19 / Tailwind 4 / Vite 8? Yes. The bubble bundles its own React, so your app's React version is irrelevant. The Vite peer range is unbounded so future Vite majors work without a vibefix update. Tailwind 3 and 4 configs are both supported.

Does it work on Windows / macOS / Linux? Yes, all three. The companion install step uses code-style CLIs (code, code.cmd, etc.) and falls back gracefully when nothing is on PATH.

Can I run the Vite plugin alongside the CLI proxy? You can, but you don't need to. Pick one. The plugin is the simpler path on Vite; the CLI is the simpler path everywhere else.

License

MIT © vibefix contributors