React Grab 完整指南浏览器里选中 UI 元素一键把源码位置交给 AI Agent【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab想让 AI 助手改这个按钮可 DevTools 复制出的 HTML 只有 class 和匿名函数它不知道界面长在你代码哪一行。React Grab 补上的正是这个断层在开发环境里把任意 UI 元素连同组件栈和源码位置file:line一键复制直接喂给 AI Agent。本文带你从安装走到第一次成功复制。React Grab 支持范围能做与不能做先划清边界避免装完才发现不在射程内。能 ✓不能 ✗React 17 / 18 / 19 应用peer 依赖为react 17Vue、Svelte、原生 JS 等非 React 技术栈原理依赖 React fiberNext.jsApp / Pages Router、Vite、TanStack Start、Webpacknpx grablatest init自动识别并写好 dev-only 集成Remix、Astro、SvelteKit、Gatsby无自动安装只能手动接复制内容 元素 HTML 组件栈 每层组件的file:line生产环境集成刻意只挂在开发环境构建产物里不会出现选中瞬间冻结状态更新与动画页面定格便于精确选区不会替你改代码——它只产出上下文动手的是你的 agent拖框多选、Shift 加选在编辑器中打开直接唤起$EDITOR复制的是引用而非文件内容源码本身仍由 agent 自行读取Agent 免手动回路npx react-grablatest pull持续拉取新 grab见 skills/react-grab/SKILL.md—另有一条补充路径仓库里带了一个浏览器扩展apps/web-extension/适合不方便改项目代码的页面但源码解析同样依赖开发环境的 source map生产页面上没有意义。React Grab 安装前需要确认的三件事环境依赖较新的 Node.js能跑npx即可仓库自身 CI 用 Node 22 应用为 React 17 及以上。权限要求不需要管理员或 root 权限普通用户即可但当前目录必须可写——CLI 会修改package.json和框架入口文件。操作前务必备份⚠️grab init会自动改动你的入口文件Next.js 是app/layout.tsxPages Router 为pages/_document.tsxVite/Webpack 是src/main.tsx这类入口。最稳的备份是确保这些文件在 git 中处于干净状态动手前git status看一眼有未提交改动先提交或 stash。框架在支持列表内Next.js / Vite / TanStack Start / Webpack 走自动安装Remix 等框架见 packages/cli/README.md 的错误码说明。只影响开发环境注入的加载逻辑全部包在NODE_ENV developmentVite 为import.meta.env.DEV条件下这是刻意设计不用你自己加守卫。React Grab 复制原理一条数据流抛开界面交互一次复制在底层是这样流动的指针命中命中检测找到指针下的真实元素工具自己的覆盖层挂在 Shadow DOM 里天然不参与命中。fiber 定位通过 bippy 库从 DOM 节点找到最近的 React fiber再沿 owner 链向上搭出组件栈React 19 直接读_debugStack17/18 复用 DevTools 同款的栈采样技术。位置翻译此刻的file:line还是 bundle 地址接着拉取 source map 把打包位置翻译回你的源文件Next.js 的rsc://虚拟地址则再走 dev server 的 symbolication 接口换回真实路径。去噪框架包装层Next 的 Router 组件、Suspense、组件库前缀被过滤默认最多保留 3 行高价值帧防止 wrapper 噪音挤占预算。画面定格选中期间 React 状态更新先缓存、CSS/WAAPI/SVG 动画暂停、:hover伪状态被固化松手后按序回放回放顺序经过设计以保证无视觉跳变。打个比方它给每个界面元素贴了一张快递面单——面单上写着发件仓库哪个组件和货架坐标哪个文件第几行agent 拿到面单直接提货不用翻遍整个仓库。它不是什么不是自动改代码的工具改代码是你的 agent 的活不拦截任何网络请求也不修改生产构建产物。React Grab 从安装到第一次复制在项目根目录运行npx grablatest initmonorepo 识别到多个子项目时用-c 路径指向真正的应用目录。确认 CLI 打印的 diff它只在入口文件追加一段 dev-only 加载逻辑核对无误后应用若提示already installed说明之前装过加--force重跑检查。启动开发服务器如npm run dev在浏览器打开任意页面dev server 不在时在编辑器中打开会降级但复制本身仍可用。在页面上按激活键默认 Mac 为 ⌘、Windows/Linux 为 Ctrl进入抓取模式页面随即冻结把指针移到目标元素上点选默认键和应用的快捷键打架时用npx grablatest configure -k MetaK换个组合键。按 ⌘C / CtrlC 复制多选可拖框或按住 Shift 逐个加选也可在弹出菜单里选 Copy。验证生效把剪贴板内容粘进任意文本编辑器应看到形如[button class…保存/button in SaveBar (at components/save-bar.tsx:12:5)]的引用串且必须带file:line✅ 把它贴给 agent它能直接打开对应文件的对应行——能就说明整条链路已经通了。React Grab 源码长什么样关键模块想对照阅读可以git clone https://gitcode.com/GitHub_Trending/re/react-grab重点看四处packages/react-grab/src/core/index.tsx— 总编排初始化、事件订阅、交互状态机idle → active → copying全在这个文件里刻意集中以便跟踪完整流程。packages/react-grab/src/core/context.ts— 最核心的管道DOM 元素 → fiber → 组件栈 → source map 翻译 → 框架噪音过滤剪贴板里那行引用就是它拼出来的。packages/react-grab/src/utils/freeze-updates.ts— 页面冻结的实现改写 React 内部 dispatcher暂停期间把状态更新缓存起来恢复时按序回放。packages/react-grab/src/core/plugin-registry.ts— 插件系统复制、评论、在编辑器打开都是插件剪贴板内容会经过一条 transform 管道想定制格式不用 fork。维护成本因此很清晰当 React 大版本改动内部结构dispatcher 挂载点、_debugStack时需要动的主要是utils/freeze-*.ts冻结层和context.ts里取栈的部分要新增支持一个框架则只需改 CLI 的detect.ts与transform.ts。完整设计细节见 packages/react-grab/docs/architecture.md。React Grab 风险提醒与最佳实践合规边界MIT 协议个人与商用集成均可它只在你自己项目的开发环境运行不触达任何线上用户的设备。隐私提醒剪贴板内容包含组件名、文件路径和元素文案粘贴给外部 agent 前留意页面上是否有测试账号、内部路径等敏感数据。版本失效应对React 升级或入口文件被重构后 dev 集成片段可能失配重跑npx grablatest init --force让 CLI 重新对齐即可不必手改。备份还原全部改动集中在一个入口文件加package.json依赖项git checkout对应文件即可完全还原无残留。下次再面对改这个按钮却说不清位置在哪的窘境你只需冻结页面、点一下、CtrlC把那张带着file:line的快递面单贴给 agent——翻仓库的活儿就交给它了。【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考