ide-byebye

English | 中文

Possibly the easiest way to have AI edit your frontend.

It drastically cuts the hallucinations AI makes when it edits your frontend.

When an AI botches a UI change, the problem is rarely the code it writes. It's where it writes it. Hand it a screenshot, or "the black button on the home page", and it has to guess: which component, which file, which of the three identical buttons on the page. A wrong guess means it confidently edits a look-alike.

ide-byebye removes the guessing. ⌘-click the element in your running app, say what to change, press Enter. The first line your agent reads is the exact spot:

@src/components/Hero.tsx #83

Change the copy to "Start Writing"

Nothing to guess, so nothing to hallucinate.

It works seamlessly with the agent you already use. Claude, Codex, Cursor, Grok Build, Claude Code CLI, OpenCode, Devin, Antigravity, Windsurf: press Enter and it opens on your project with the prompt already in it. You don't copy and paste anything, and the common agents need no setup. It can even drop the prompt into a Codex, Grok or Devin session you already have open.

Measured, not claimed

Without a location, the agent goes looking: it greps, opens file after file, and the tokens and context pile up before it changes a single line.

Grok Build on a real React app (875 TS/TSX files): 3 UI changes, each pointed out three ways, 3 runs per way. All 27 runs found the right place in the end. The difference is what the search cost (medians):

	Text description	Screenshot + text	ide-byebye
Tokens	286k	386k	106k
Time	99 s	88 s	48 s
File reads	11	11	3
Peak context	40k	38k	18k

About 2/3 fewer tokens, half the time, half the context. Codex, Claude, Cursor and the rest receive the same @file #lines prompt.

Works with

Frameworks	React, Vue, Svelte, Solid, Preact, Angular, plus Next.js, Nuxt and SvelteKit
Build tools	Vite, webpack, rspack, rsbuild, esbuild, Farm, Next.js (Turbopack and webpack), Angular CLI
Agents	Codex App, Claude App, Cursor, Grok Build, Claude Code CLI, OpenCode, Devin CLI, Antigravity IDE, Antigravity. Opt-in: Devin Desktop, Windsurf, or your own client

It runs only in dev, ships no model or AI SDK, and never edits your files. It builds the prompt and opens your agent, and the agent makes the change.

Install

Let your agent do it

Open your project in Codex, Claude, Cursor or Grok and send:

Add ide-byebye to this project. Follow https://github.com/bo-516/ide-byebye

Or do it yourself

npm i -D ide-byebye

Vite (React, Vue, Svelte, Solid, Preact, Nuxt, SvelteKit, Astro, …):

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import ideByebye from 'ide-byebye';

export default defineConfig({
  plugins: [ideByebye(), react()], // before the framework plugin
});

Next.js (14.2+, Turbopack or --webpack, App or Pages Router):

// next.config.mjs
import withIdeByebye from 'ide-byebye/next';

export default withIdeByebye({ reactStrictMode: true }); // your Next config

Angular CLI: the CLI has no plugin hook, so it takes two angular.json entries.

// ide-byebye.proxy.mjs (workspace root)
import { angularProxy } from 'ide-byebye/angular';

export default await angularProxy();

// angular.json → projects.<app>.architect
"build": { "configurations": { "development": {
  "scripts": ["node_modules/ide-byebye/dist/angular/bootstrap.js"]
} } },
"serve": { "options": { "proxyConfig": "ide-byebye.proxy.mjs" } }

Everything else: import the matching subpath.

Build tool	Import	Add
webpack	ide-byebye/webpack	inspector() in plugins, next to HtmlWebpackPlugin
rspack	ide-byebye/rspack	inspector() in plugins, next to HtmlRspackPlugin
rsbuild	ide-byebye/rsbuild	plugins: [inspector()]
esbuild	ide-byebye/esbuild	plugins: inspector({ htmlFiles: ['./index.html'] }) (htmlFiles only when the HTML isn't in outdir)
Farm	ide-byebye/farm	plugins: [...inspector()]
Nuxt	ide-byebye/vite	vite: { plugins: [inspector()] } in nuxt.config
Mako (Umi)	ide-byebye/mako	Source stamps only; mount the bootstrap yourself

Then:

• Add .intent-inspector/ to your .gitignore. Screenshots and handoff files land there.
• Vue 2.7 also needs npm i -D @vue/compiler-dom.
• To attach interaction recordings, run npm i -D @rrweb/record @rrweb/replay and set recording: true.
• Requires Node ^20.19.0 or >=22.12.0.

Use it

1. Pick. Hold ⌘ (Ctrl on Windows and Linux) and click an element, or press Alt+Shift+I.
2. Describe. Type what to change. You can also pick more elements as @code references, or attach screenshots, computed styles, a recording, or the component's live state — and watch how that state changes while you use the page.
3. Send. Enter sends to the agent shown next to the Send button (Claude App by default). Switch agents, or pick a session that's already open, from that picker. ⧉ copies the prompt instead.

Dialogs and popovers rendered through createPortal or <Teleport> resolve to their own source, not to <body>.

Agents

Agent	Default	Opens as	Into an existing session
Claude App	on, Enter target	New session, prefilled	—
Codex App	on	New thread, prefilled	✓ prefilled into the thread
Cursor	on	Prompt window, prefilled	—
Grok Build	on	Terminal, submitted	✓ resumes a closed session
Claude Code CLI	on	Your terminal, prefilled (or Terminal, submitted)	—
OpenCode	on	Desktop 1.x prefilled, or CLI submitted	—
Devin CLI	on	Terminal, submitted	✓ resumes the session
Antigravity IDE	on	Agent input, prefilled	experimental
Antigravity	on	Desktop composer, prefilled	—
Devin Desktop	opt-in	Cascade composer, prefilled	—
Windsurf	opt-in	Cascade composer, prefilled	—
Your own client	opt-in	postMessage or HTTP into an app that's already running	—

If an agent's app or CLI isn't installed, its button is greyed out and the tooltip says what to install.

Configuration

Zero config works. These are the options people change most:

ideByebye({
  defaultAgent: 'codex-app',  // Enter target (default 'claude-app')
  theme: 'auto',              // 'light' (default) | 'auto' | 'dark'
  locale: 'en',               // UI language (default: browser language)
  recording: true,            // needs @rrweb/record + @rrweb/replay
  agents: {
    cursorApp: { workspace: 'my-app' },
    grokBuild: { permissionMode: 'plan' },
    codexApp: false,          // hide an agent
    windsurfIde: true,        // turn on an opt-in agent
  },
});

Every option, per-agent settings, Windows openers, custom clients, recording and output files are in CONFIGURATION.md.

Privacy & security

• Dev only. Production builds never see it.
• Local only. The page talks to a 127.0.0.1 server guarded by a per-process token. Nothing leaves your machine except the prompt you send to your agent.
• Project-scoped. File paths from the page can't leave your project root, and handoff files are written inside it.
• Hands off your code. It writes prompts. Your agent writes the code.

Develop

Needs Node.js 22.13+ and pnpm 11 (pinned in packageManager; Corepack or pnpm 10 switches to it). Using the plugin only needs Node.js 20.19+.

pnpm install
pnpm build
pnpm test

The playground in demo/ has a pnpm dev:* script for every framework and build tool combination. See demo/README.md.

Issues and pull requests are welcome. CONTRIBUTING.md covers the workflow and what a PR needs.

License

MIT © dravenLee