AI编程效率提升3倍！react-grab让你一键复制UI组件上下文

项目简介

aidenybai/react-grab 是一个创新的开发者工具，它允许 AI 编程代理（如 Cursor、Claude Code、Copilot 等）直接从你的网站获取 UI 组件的精确上下文。使用方法非常简单：在浏览器中悬停到任意 UI 元素，按下 Command+C（Mac）或 Ctrl+C（Windows/Linux），就能复制该元素的完整上下文信息，包括文件名、React 组件名称和 HTML 源代码。

根据官方数据，react-grab 可以让 AI 编程工具的运行速度提升最多 3 倍，同时提高答案的准确性。目前在 GitHub 已获得超过 6900 颗星，增长迅速。

核心特色功能

react-grab 的设计非常精巧，功能却很强大：

• 一键获取上下文：悬停+复制，即可获取元素的完整开发上下文
• 跨框架兼容：支持 React、Next.js（App Router 和 Pages Router）、Vite 等主流前端框架
• MCP 无缝集成：支持 MCP（Model Context Protocol），让 AI 代理直接使用获取到的上下文
• 自动检测开发环境：仅在开发环境（development）下加载，不影响生产环境
• 极简安装：一行命令即可完成初始化配置
• 透明轻量：作为开发工具，不会干扰正常开发流程

安装步骤

react-grab 提供极简的安装体验，支持多种框架：

快速初始化（推荐）：

npx grab@latest init

这条命令会在项目根目录安装并配置 react-grab，自动检测你的框架类型（Next.js、Vite 等）。

连接 MCP（可选）：

npx grab@latest add mcp

如果你使用支持 MCP 的 AI 代理工具，这条命令会将 react-grab 连接到 MCP 服务器，实现更智能的上下文获取。

Next.js（App Router）手动安装：

在 app/layout.tsx 的 head 中添加 Script 标签即可完成配置。

使用方法

安装完成后，在开发环境下运行你的项目，然后在浏览器中：

1. 将鼠标悬停在你感兴趣的 UI 元素上
2. 按下 Command+C（Mac）或 Ctrl+C（Windows/Linux）
3. 元素的上下文信息（文件名、组件名、源码）会自动复制到剪贴板
4. 粘贴到你的 AI 编程工具中，即可获得精准的上下文

例如，复制后的内容可能长这样：

<a href="#">Forgot your password?</a>
in LoginForm at components/login-form.tsx:46:19

AI 由此知道这个元素在哪个文件的哪一行，以及它在组件树中的位置，回答会更加准确。

适用场景

react-grab 特别适合：

• 维护旧项目：需要给老代码添加新功能，但不确定原有组件的实现方式
• 使用 AI 辅助编程：想让 AI 更准确地理解和修改你的代码
• 设计系统开发：快速获取设计系统中各组件的上下文信息
• 跨团队协作：让外包或新团队成员快速理解项目结构

开源协议

本项目采用 MIT 开源许可证。

服务支持：如有兴趣不会搭建，可以联系微信：WRYD6166，开源项目搭建10-50元。