ide-byebye

ide-byebye

English | 中文

可能是让 AI 改前端最省心的办法。

它能大幅降低 AI 写前端时的幻觉。

AI 改前端翻车，问题很少出在代码本身，而是出在改哪儿。你给它一张截图，或者一句 「首页那个黑色按钮」，它只能猜：哪个组件？哪个文件？页面上三个一模一样的按钮，你说的是 哪一个？猜错了，它就一本正经地去改一个长得像的组件。

ide-byebye 把「猜」这一步删掉了。在运行中的页面上按住 ⌘ 点一下那个元素，写一句要改 什么，回车。Agent 读到的第一行就是精确位置：

@src/components/Hero.tsx #83

文案改成 Start Writing

没什么可猜的，也就没什么可幻觉的。

和你正在用的 Agent 无缝衔接。 Claude、Codex、Cursor、Grok Build、Claude Code CLI、 OpenCode、Devin、Antigravity、Windsurf：回车，它就在你的项目里打开，prompt 已经放好。 不用复制粘贴，常用的几个也不用额外配置。还能把 prompt 直接发进你已经开着的 Codex、Grok 或 Devin 会话。

实测数据

没有位置，Agent 只能自己找：grep、一个个读文件，一行代码还没改，token 和上下文已经 涨上去了。

用 Grok Build 在一个真实的 React 项目（875 个 TS/TSX 文件）里测：3 处 UI 改动，每处用 三种方式告诉它改哪，每种跑 3 次。27 次最终都改对了地方，差别全在「找」花了多少（中位数）：

token 少约 2/3，耗时少一半，上下文少一半。Codex、Claude、Cursor 等收到的也是同一种 @文件 #行号 prompt。

支持范围

只在开发环境运行，不带模型、不带 AI SDK，也从不改你的文件。它负责拼好 prompt、打开 Agent，改代码的是 Agent。

安装

让 Agent 帮你装

在 Codex、Claude、Cursor 或 Grok 里打开你的项目，发送：

按 https://github.com/bo-516/ide-byebye/blob/main/README.zh-CN.md 把 ide-byebye 接到这个项目里

或者自己装

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()], // 放在框架插件之前
});

Next.js（14.2+，Turbopack 或 --webpack，App Router 或 Pages Router）：

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

export default withIdeByebye({ reactStrictMode: true }); // 你的 Next 配置

Angular CLI：CLI 没有插件钩子，所以在 angular.json 里加两处配置。

// ide-byebye.proxy.mjs（workspace 根目录）
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" } }

其他构建工具：导入对应的子路径。

然后：

• 把 .intent-inspector/ 加进 .gitignore，截图和交接文件都写在这里。
• Vue 2.7 还需要 npm i -D @vue/compiler-dom。
• 想附带交互录制：npm i -D @rrweb/record @rrweb/replay，再设 recording: true。
• Node 需要 ^20.19.0 或 >=22.12.0。

使用

1. 选取：按住 ⌘（Windows / Linux 上是 Ctrl）点击元素，或按 Alt+Shift+I。
2. 描述：写要改什么。还可以再选几个元素作为 @code 引用，或附上截图、计算样式、录制， 以及组件当前的 state；也可以开始监听，操作一遍页面，把 state 的变化一起发过去。
3. 发送：回车发给发送按钮旁显示的 Agent（默认 Claude App）。在那个选择器里可以切换 Agent，或者选一个已经开着的会话。⧉ 则改为复制 prompt。

用 createPortal 或 <Teleport> 渲染的弹窗和浮层，会定位到它自己的源码，而不是 <body>。

Agent

没装对应的 App 或 CLI 时，按钮置灰，tooltip 会写明要装什么。

配置

零配置就能用。最常改的是这几项：

ideByebye({
  defaultAgent: 'codex-app',  // Enter 目标（默认 'claude-app'）
  theme: 'auto',              // 'light'（默认）| 'auto' | 'dark'
  locale: 'zh',               // 界面语言（默认跟随浏览器）
  recording: true,            // 需要 @rrweb/record + @rrweb/replay
  agents: {
    cursorApp: { workspace: 'my-app' },
    grokBuild: { permissionMode: 'plan' },
    codexApp: false,          // 隐藏某个 Agent
    windsurfIde: true,        // 开启一个可选 Agent
  },
});

全部选项、各 Agent 的设置、Windows 打开方式、自定义客户端、录制和输出文件，见 CONFIGURATION.zh-CN.md。

隐私与安全

• 仅开发环境：生产构建完全不受影响。
• 只在本机：页面只和 127.0.0.1 上的服务通信，每个进程一个 token。除了你发给 Agent 的 prompt，没有任何东西离开你的机器。
• 限定在项目内：页面传来的文件路径出不了项目根，交接文件也写在项目里。
• 不碰你的代码：它只写 prompt，代码由 Agent 来改。

开发

需要 Node.js 22.13+ 和 pnpm 11（版本写在 packageManager 里，Corepack 或 pnpm 10 会自动切过去）。只是使用插件的话，Node.js 20.19+ 就够了。

pnpm install
pnpm build
pnpm test

demo/ 演示场为每种框架和构建工具组合都准备了 pnpm dev:* 脚本，见 demo/README.md。

欢迎提 issue 和 PR，流程和 PR 的要求见 CONTRIBUTING.md。

许可证

MIT © dravenLee