[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81581":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":12,"subscribersCount":12,"size":12,"stars1d":15,"stars7d":15,"stars30d":15,"stars90d":12,"forks30d":12,"starsTrendScore":16,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":12,"starSnapshotCount":12,"syncStatus":14,"lastSyncTime":26,"discoverSource":27},81581,"ai-ins","wangrongding\u002Fai-ins","wangrongding","Select UI elements in your dev server, send source context to Codex or Claude, and edit through Vite\u002FWebpack plugins.",null,"TypeScript",25,0,24,2,1,3,42.6,"GNU Affero General Public License v3.0",false,"main",true,[],"2026-06-12 04:01:34","# ai-ins\n\nAI Ins 是一个本地开发辅助工具，让你在开发 web\u002Felectron 等项目的时候无需离开项目窗口，在项目内编写项目。\n\n有点像 “忒修斯之船”，逐渐迭代自己；\n\n- 不用来回找文件。\n- 不用复制组件路径。\n- 不用描述“帮我修改xxx模块，xxx按钮...”。\n- 接手陌生项目，直接快速上手修改。不再需要花时间熟悉项目结构、查找相关代码位置。\n- 通过在页面中选取元素，调度 codex cli，claude code cli，copilot cli等等帮你修改，只要你本地任意一个配置好的 cli 工具即可\n\n本地的开发环境下，这里假装自己在开发一个 x 平台，可以参考这个示例操作视频（面板仍在迭代好用的功能）：  \n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ff909f905-3297-49da-8881-8b48689c015c \n\n## 快速接入\n\n你可以直接跟你的 agent 说： “帮我接入 ai-ins” ， 他会自动帮你接入。  \n\n或者你担心 agent 不够智能，可以说：“参考 https:\u002F\u002Fgithub.com\u002Fwangrongding\u002Fai-ins\u002Fblob\u002Fmain\u002FREADME.md ，帮我接入 ai-ins”\n\n### 命令行快捷接入\n\n单配置的 web 或 electron 项目里，可以直接运行下面的命令。CLI 会自动识别项目内的构建工具（Vite \u002F Webpack \u002F Next.js），安装对应的 `@ai-ins\u002F*` 包，并尝试修改配置文件：\n\n```bash\n# 只需要一行即可快速接入：\nnpx ai-ins\n```\n\n如果项目里有多个 Vite \u002F Webpack 配置文件，或者你明确知道要改哪一个配置文件，建议从一开始就显式指定：\n\n```bash\nnpx ai-ins --bundler vite --config apps\u002Fweb\u002Fvite.config.ts\nnpx ai-ins --bundler webpack --config build\u002Fwebpack.dev.js\n```\n\n`--config` 支持相对项目根目录的路径，也支持绝对路径。CLI 在检测到多个候选配置文件时会直接停止，并提示你使用 `--config`，不会再盲猜要改哪个文件。\n\n你只需要：按住 `Option` \u002F `Alt` 点选页面上的 DOM，通过打开的内置 AI Ins 面板，把目标元素和修改要求一起交给本地 CLI Agent 执行，并在页面里持续查看任务输出，任务完成后通过热更新直接看到修改结果即可。 \n\n\u003Cimg width=\"1600\" alt=\"fcc1e26cb5b83666fe302510205b9d54\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F8a896580-a951-4694-a8c6-9fab977a37eb\" \u002F>\n\n并且在 macOS 按住 `Option + Cmd`，Windows \u002F Linux 按住 `Ctrl + Alt` 点击页面元素也支持直接打开IDE，并跳转到源码位置，用以查看修改细节或者手动调整。\n\n\u003Cimg width=\"1600\" alt=\"859d26a9-c362-4ae8-a2ed-62a017dc214c\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fb524667f-ff12-4874-a669-59a2ab97e572\" \u002F>\n\n## 当前能力\n\n- 通过运行 `npx ai-ins` 自动识别项目内的构建工具（Next.js \u002F Vite \u002F Webpack...），安装对应的 `@ai-ins\u002F*` 包，并尝试修改配置文件。\n- 支持通过 `--config \u003Cpath>` 指定目标配置文件，适合多 Vite 配置、多 Webpack 配置或非标准文件名场景。\n- 在检测到多个候选配置文件或多个可能的 bundler 时，CLI 会直接要求你显式指定，而不是静默修改第一个匹配项。\n- Vite dev server 自动注入 AI Ins 客户端，支持 `Option` \u002F `Alt` 点选 DOM 打开面板。\n- 面板内可以选择 Agent、填写代理、提交修改要求，并并发跟踪多个运行任务。\n- 内置 Codex、Claude 和 Copilot CLI provider。\n- macOS 下会优先使用正在运行的 VS Code \u002F Zed \u002F WebStorm \u002F Cursor 等编辑器打开源码。\n\n## 支持状态\n\n| 包                | 状态   | 说明                                                                                       |\n| ----------------- | ------ | ------------------------------------------------------------------------------------------ |\n| `ai-ins`          | 可用   | 提供 `ai-ins` 命令，用于初始化项目配置。                                                   |\n| `@ai-ins\u002Fvite`    | 可用   | 主要支持路径，包含客户端注入和 React \u002F Vue \u002F SolidJS \u002F Svelte source 适配。                |\n| `@ai-ins\u002Fwebpack` | 可用   | 注册 devServer middleware，自动注入客户端脚本，并在开发态给 JSX DOM 元素注入 source 标记。 |\n| `@ai-ins\u002Fnextjs`  | 可用   | 支持 Next.js dev server，包含 Webpack \u002F Turbopack JSX source 标记和 middleware 转发。       |\n| `@ai-ins\u002Fcore`    | 内部包 | 提供 middleware、Agent provider、客户端脚本生成等共享能力。                                |\n\n\u003Cimg width=\"1600\" alt=\"image\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fc157f619-34ad-45e2-b2e8-b5d04e4d92ee\" \u002F>\n\n## 高级用法\n\n```bash\n# 接入\nnpx ai-ins\n```\n\n指定构建工具：\n\n```bash\nnpx ai-ins --bundler vite\nnpx ai-ins --bundler webpack\nnpx ai-ins --bundler nextjs\n```\n\n指定目标配置文件：\n\n```bash\nnpx ai-ins --config vite.config.ts\nnpx ai-ins --bundler vite --config apps\u002Fweb\u002Fvite.config.ts\nnpx ai-ins --bundler webpack --config build\u002Fwebpack.dev.js\n```\n\n如果你已经用 `--config` 明确传入了类似 `vite.config.ts` 或 `webpack.dev.js` 这样的文件名，CLI 会先按文件名推断 bundler；如果文件名本身不够明确，仍然建议同时传 `--bundler`。\n\n只改配置、不安装依赖：\n\n```bash\nnpx ai-ins --no-install\n```\n\n强制重新安装最新的适配包：\n\n```bash\nnpx ai-ins --force\n```\n\n不带子命令时，CLI 会默认执行初始化逻辑；显式写 `npx ai-ins init` 也仍然支持，后续新增的其它子命令会继续通过 `ai-ins \u003Ccommand>` 调用。CLI 会根据 `packageManager` 或 lockfile 选择 `pnpm` \u002F `yarn` \u002F `bun` \u002F `npm`。如果项目已经安装过对应依赖，默认会跳过安装；加上 `--force` 时会重新安装最新版，例如 Vite 项目会安装 `@ai-ins\u002Fvite@latest`。如果检测到多个可能的 bundler、多个候选配置文件，或者配置文件结构太特殊，CLI 会提示你显式指定 `--bundler` \u002F `--config`，或者手动把插件加入配置。\n\n## 给 AI \u002F Agent 的接入规则\n\n如果你是 AI agent，用户说“帮我接入 ai-ins”时，优先按下面的顺序执行：\n\n1. 先识别项目使用的是 Next.js、Vite 还是 Webpack。\n2. 先检查要接入的 app\u002F包目录里是否存在多个 bundler 配置文件。\n3. 单配置项目：优先运行 `npx ai-ins --bundler \u003Cbundler>`。\n4. 多配置项目：必须运行 `npx ai-ins --bundler \u003Cbundler> --config \u003C目标配置文件>`，不要直接运行裸的 `npx ai-ins`。\n5. 如果 CLI 无法安全修改配置，就按下面的 bundler 示例手动接入，不要猜测应该改哪一个文件。\n6. 对 Vite 项目，把 `aiIns()` 放在 React \u002F Vue \u002F Svelte 等框架插件前面。\n7. 对 Next.js 项目，除了更新 `next.config.*` 之外，还要确保 `instrumentation-client.ts` 或 `instrumentation-client.js` 引入 `@ai-ins\u002Fnextjs\u002Fclient`。\n\n你也可以直接把下面这段话交给 AI：\n\n```text\n帮我在这个项目里接入 ai-ins。先判断 bundler；如果有多个配置文件，不要直接跑 npx ai-ins，而是使用 --bundler 和 --config 指定目标配置；如果 CLI 无法安全改写，就按 README 里的对应示例手动接入。\n```\n\n## 多配置文件项目\n\n对单配置项目，`npx ai-ins` 依然是最快的入口。\n\n对下面这些场景，推荐直接使用 `--config`：\n\n- 一个仓库里有多个 Vite app，各自有自己的 `vite.config.*`。\n- Electron、SSR、微前端项目里同时存在 `vite.config.ts`、`vite.renderer.config.ts`、`vite.main.config.ts`。\n- Webpack 项目里同时存在 `webpack.config.js`、`webpack.dev.js`、`webpack.prod.js`。\n- 你知道 dev server 实际读取的是某个特定配置文件，而不是根目录默认文件名。\n\n典型命令：\n\n```bash\n# Vite\nnpx ai-ins --bundler vite --config vite.config.ts\nnpx ai-ins --bundler vite --config apps\u002Fadmin\u002Fvite.config.ts\n\n# Webpack\nnpx ai-ins --bundler webpack --config webpack.dev.js\nnpx ai-ins --bundler webpack --config build\u002Fwebpack.renderer.config.js\n```\n\n## Vite 使用方式\n\n如果 CLI 无法自动修改，或者你更希望手动接入，可以直接按下面的方式配置：\n\n```ts\nimport react from '@vitejs\u002Fplugin-react'\nimport { defineConfig } from 'vite'\nimport aiIns from '@ai-ins\u002Fvite' \u002F\u002F \u003C-- 引入插件\n\nexport default defineConfig({\n  plugins: [\n    aiIns(), \u002F\u002F \u003C-- 使用插件\n    react(),\n  ],\n})\n```\n\n`aiIns()` 需要放在 React\u002FVue\u002FSvelte 等框架插件前面，这样开发态 source 标记会在框架编译 JSX \u002F template 前注入。\n\n启动 dev server 后：\n\n- `Option` \u002F `Alt` + 点击页面元素：打开 AI Ins 面板并选中目标。\n- macOS `Option + Cmd`，Windows \u002F Linux `Ctrl + Alt` + 点击页面元素：在编辑器里打开源码位置。\n- 面板内默认 `⌘ + Enter`（Windows \u002F Linux 为 `Ctrl + Enter`）提交，也可切到 `Enter` 提交。\n- 关闭面板不会中断已启动的 Agent 任务，任务会继续在侧边列表里更新。\n\n## Webpack 使用方式\n\n如果 CLI 无法自动修改，或者你需要手动接入某个特定的 Webpack 配置文件，可以直接按下面的方式配置：\n\n```js\nconst { AiInsWebpackPlugin } = require('@ai-ins\u002Fwebpack')\n\nmodule.exports = {\n  devServer: {},\n  plugins: [new AiInsWebpackPlugin()],\n}\n```\n\nWebpack 插件会在开发构建中自动注入客户端脚本，并通过 pre-loader 给 JSX DOM 元素注入 source 标记。\n\n## Next.js 使用方式\n\n如果 CLI 无法自动修改，或者你希望手动接入，可以直接按下面的方式配置：\n\n```ts\nimport { withAiIns } from '@ai-ins\u002Fnextjs'\nimport type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {}\n\nexport default withAiIns(nextConfig)\n```\n\n同时在项目根目录添加或更新 `instrumentation-client.ts`：\n\n```ts\nimport '@ai-ins\u002Fnextjs\u002Fclient'\n```\n\nNext.js 适配会在开发态启动本地 AI Ins middleware 服务，并通过 `rewrites()` 转发 `__ai-ins` 相关请求。Webpack dev server 会通过 `webpack()` hook 注入 source loader；Turbopack dev server 会通过 `turbopack.rules` 使用同一个 loader。\n\n## Agent 配置\n\n内置 provider 包括 `codex`、`claude`、`copilot`、`gemini` 和 `cursor`。Gemini CLI 官方 headless 模式支持 stdin 与 JSON 输出；Cursor Agent CLI 官方建议在非交互场景使用 `--print --output-format stream-json`，AI Ins 会按这两个 CLI 的结构化输出做实时展示。\n\n默认 provider：\n\n```ts\naiIns({\n  agents: {\n    defaultProvider: 'codex',\n  },\n})\n```\n\n切换到 Gemini CLI：\n\n```ts\naiIns({\n  agents: {\n    defaultProvider: 'gemini',\n  },\n  gemini: {\n    model: 'gemini-2.5-flash',\n  },\n})\n```\n\n切换到 Cursor Agent CLI：\n\n```ts\naiIns({\n  agents: {\n    defaultProvider: 'cursor',\n  },\n  cursor: {\n    model: 'gpt-5',\n  },\n})\n```\n\n自定义 provider：\n\n```ts\naiIns({\n  agents: {\n    defaultProvider: 'my-agent',\n    providers: [\n      {\n        id: 'my-agent',\n        label: 'My Agent',\n        command: 'my-agent',\n        args: ['run', '--json'],\n        input: 'stdin',\n        output: 'plain',\n      },\n    ],\n  },\n})\n```\n\nProvider 字段说明：\n\n- `command`：本地可执行命令。\n- `args`：启动参数。\n- `input`：`stdin` 或 `argument`，表示 prompt 通过标准输入还是命令参数传入。\n- `output`：`codex-json`、`json`、`jsonl` 或 `plain`，用于解析输出流。\n- `proxy`：单个 provider 的代理配置。\n\n## 环境变量\n\n```bash\nCODEX_CLI=codex\nCLAUDE_CLI=claude\nCOPILOT_CLI=copilot\nGEMINI_CLI=gemini\nCURSOR_AGENT_CLI=cursor-agent\nAI_INS_PROXY=http:\u002F\u002F127.0.0.1:7890\nAI_INS_CODEX_MODEL=gpt-5.5\nAI_INS_CLAUDE_MODEL=sonnet\nAI_INS_COPILOT_MODEL=gpt-5.2\nAI_INS_GEMINI_MODEL=gemini-2.5-flash\nAI_INS_CURSOR_MODEL=gpt-5\n```\n\n代理解析优先级：插件配置 \u002F provider 配置优先，其次读取 `AI_INS_PROXY`，再读取常见的 `HTTP_PROXY`、`HTTPS_PROXY`、`ALL_PROXY`，最后尝试读取 macOS \u002F Windows 系统代理。\n\n跨平台命令解析会优先使用 `PATH` 中的可执行文件；Windows 下会优先选择 `.cmd` \u002F `.bat` 等 npm 或原生命令 shim，因此只要 Codex、Claude、Copilot、Gemini 或 Cursor CLI 的安装目录已加入 `PATH`，macOS 和 Windows 都可以使用同一套配置。\n\n## 本仓库开发\n\n```bash\npnpm install\npnpm dev:watch\npnpm dev:nextjs\npnpm dev:webpack\n```\n\n`pnpm dev:watch` 会同时 watch core、Vite 插件和 `examples\u002Fvite-react` playground。改 `packages\u002Fcore\u002Fsrc\u002Fclient\u002F` 或 `packages\u002Fvite\u002Fsrc\u002Findex.ts` 后刷新浏览器即可。`pnpm dev` 仍然会先构建 core \u002F Vite 插件，再启动 playground。\n\n`pnpm dev:vite` 会同时启动 `examples\u002Fvite-react`、`examples\u002Fvite-vue3`、`examples\u002Fvite-solidjs` 和 `examples\u002Fvite-svelte` 四个 Vite playground。\n\n`pnpm dev:nextjs` 会先构建 core \u002F Next.js 插件，再启动 `examples\u002Fnextjs-react` playground，默认使用 Turbopack。需要走 Webpack dev server 时可以运行 `pnpm dev:nextjs:webpack`。\n\n`pnpm dev:webpack` 会先构建 core \u002F Webpack 插件，再同时 watch core、Webpack 插件和 `examples\u002Fwebpack-react` playground。改 `packages\u002Fcore\u002Fsrc\u002Fclient\u002F` 后刷新浏览器即可看到新的 AI Ins 面板 runtime；如果改的是 Webpack 插件初始化逻辑，重启 dev server 后生效。\n\n常用检查：\n\n```bash\npnpm typecheck\npnpm build\n```\n\n## 包结构\n\n```txt\npackages\u002Fcli       # ai-ins CLI 包，默认提供 init 初始化逻辑\npackages\u002Fcore      # middleware、Agent provider、客户端 runtime\npackages\u002Fvite      # Vite 插件\npackages\u002Fwebpack   # Webpack devServer 插件\npackages\u002Fnextjs    # Next.js 插件，支持 Webpack \u002F Turbopack dev server\nexamples\u002Fvite-react\nexamples\u002Fvite-vue3\nexamples\u002Fvite-solidjs\nexamples\u002Fvite-svelte\nexamples\u002Fnextjs-react\n```\n\n## 常见问题\n\n### 如何连接 codex的？\n\nCodex Exec 是一种轻量级、非交互式的 CLI 模式，专门用于自动化任务、CI\u002FCD 管道和单次脚本执行。它通过命令行直接接收提示，处理任务，生成流式结构化日志并退出。\n","AI Ins 是一个本地开发辅助工具，旨在简化 web 和 electron 项目的开发流程。它允许开发者在不离开项目窗口的情况下，通过页面元素选择和 AI 辅助来直接修改代码。该工具的核心功能包括自动识别并配置 Vite、Webpack 或 Next.js 等构建工具，以及集成 Codex、Claude 和 Copilot 等 CLI 工具以提供代码编辑支持。此外，它还提供了快捷键操作来快速定位源码位置，从而进一步提高开发效率。适用于需要频繁进行界面调整或接手新项目的场景，尤其适合前端工程师使用，能够显著减少寻找文件和理解项目结构的时间成本。","2026-06-11 04:05:34","CREATED_QUERY"]