React Grab 快速上手指南把任意 UI 元素一键复制给 AI 编码智能体【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grabReact Grab 是一款浏览器内前端工具在页面上选中任意 UI 元素复制出带组件名与源码行号的一行上下文粘贴给 AI 编码智能体省去截图和口述。适合用 React 生态框架、希望智能体更快定位代码的开发者。一张表看懂核心信息维度说明支持对象Next.jsApp / Pages Router、Vite、TanStack Start、Webpack 四类 React 框架运行环境仅在开发模式生效仓库自身构建要求 Node ≥ 22、pnpm ≥ 8部署方式项目根目录执行npx grablatest init或按 README 手动修改一个入口文件官方基准README 称使用后智能体平均快约 2 倍风险等级低不碰系统文件只在入口文件注入一行 dev 脚本改动可回退三步上手从安装到复制 UI 元素⌨️ 在项目根目录运行npx grablatest init自动识别框架并写入开发环境配置。 前置条件本地已安装 Node.js且项目是上表支持的框架之一改动通常只有一行提交前用git diff检查即可。▶️ 启动开发服务器在页面上悬停要检查的元素按下 ⌘C / CtrlC。 前置条件必须用 dev 环境打开页面生产构建会跳过该工具。 把剪贴板内容粘贴给智能体内容形如[a … in LoginForm (at components/login-form.tsx:46:19)]。 前置条件开发服务器需正常产出 sourcemap行号才能解析到真实文件。原理速览它到底改了什么激活后页面会被整体冻结React 状态更新、CSS 动画、Web Animations API 实例、requestAnimationFrame 渲染循环同时暂停元素原来的 hover 样式也会被原样保留你才能在一张静止的画面上从容点选。解冻时这些更新按固定顺序回放动画直接推进到终态不会中途跳帧。点选之后工具沿着 DOM 元素找到对应的 React fiber向上拼出组件栈再通过 sourcemap 把打包产物位置还原成文件路径:行号。Next.js 布局壳层这类框架内部组件会被过滤只留下你自己的组件名上下文默认最多 3 行硬上限 20 行避免把无关帧塞给智能体。界面挂在 Shadow DOM 里、宿主节点关闭指针事件所以不影响页面原有样式与点击复制内容只经过本地剪贴板不上传页面数据。项目结构导航模块职责代表文件CLI一键安装、改快捷键、卸载 agent 技能packages/cli/src/commands/核心编排交互状态机、事件分发、插件注册packages/react-grab/src/core/index.tsx源码解析元素 → 组件栈 → 文件:行号packages/react-grab/src/core/context.ts内置动作复制、评论、在编辑器打开插件化packages/react-grab/src/core/plugins/copy.ts界面组件工具栏、选中标签、Canvas 高亮层packages/react-grab/src/components/toolbar/冻结与工具暂停更新/动画、剪贴板、选择器生成packages/react-grab/src/utils/freeze-updates.ts冻结策略、sourcemap 符号化等深度细节见 架构文档。避坑清单React Grab 常见问题怎么排查现象原因处理init 后页面上看不到工具仅开发模式注入生产构建被条件跳过用 dev 服务器打开页面而非 build 产物报错unsupported-framework/unknown-frameworkRemix、Astro、SvelteKit、Gatsby 无自动配置按 README 手动在入口文件加一行脚本引入复制内容只有选择器、没有文件行号sourcemap 缺失或符号化失败确认 dev server 正常运行、未手动关闭 sourcemap快捷键和应用内功能冲突激活键被工具认领应用收到空字符串运行npx grablatest configure --key MetaK换个组合想彻底移除入口文件仍留有注入行删除注入的脚本行、卸载 npm 包并用npx grablatest remove移除 agent 技能合规边界使用与恢复该工具只在开发环境工作不影响线上用户。复制内容仅经过你本地剪贴板不向外部传输页面数据。恢复原状的方法删掉入口文件中注入的那一行、卸载react-grab包即可。下一步想看懂冻结与源码解析的实现读 架构文档想参与贡献看 CONTRIBUTING.md想配置抓取内容自动喂给智能体的无人值守模式参考 skills/react-grab/SKILL.md。【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考