aidenybai/react-grab

解决的问题

它简化了为 AI Agent 提供 UI 元素准确源代码上下文的过程。开发者无需手动搜索文件来查找组件定义的位置，而是可以快速捕获 UI 元素的精确位置，帮助 Agent 进行修改或理解。

工作原理

React Grab 集成到开发环境中，允许用户将鼠标悬停在浏览器的任何 UI 元素上，并使用键盘快捷键 (Cmd+C 或 Ctrl+C) 进行复制。该工具随后会捕获所选元素的 HTML 及其组件堆栈，包括代码所在的特定文件路径和行号。

适用对象

使用 AI Agent 构建或维护基于 React 的应用程序的前端开发人员。

亮点

• 源码映射：提供所选 UI 元素的准确文件和行号。
• 快速集成：可以通过 CLI 命令进行初始化，或手动添加到 Next.js (App 和 Pages 路由)、Vite 或 Webpack 中。
• 可扩展性：包含一个原语库，用于通过用于命中测试和页面冻结的 API 构建自定义选择界面。
• 性能：声称通过提供直接的源码上下文，使 Agent 的速度提高 2 倍并更加准确。