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 中。
• 可擴展性：包含一個原語庫 (primitives library)，用於透過用於命中測試 (hit testing) 與頁面凍結的 API 來建置自定義選擇介面。
• 效能：聲稱透過提供直接的原始碼上下文，使 Agent 的速度提升 2 倍且更加準確。