react-grab
react-grab 是一款专为 React 开发者设计的浏览器辅助工具，旨在提升编码智能体（如 Cursor、Claude Code、Copilot）的工作效率。在使用 AI 辅助编程时，开发者常需手动查找组件文件路径或复制源码作为上下文输入给 AI，过程繁琐且易出错。react-grab 巧妙解决了这一痛点：在开发环境中，只需将鼠标悬停在网页任意元素上并按下快捷键（Mac 为⌘C，Windows/Linux 为 Ctrl+C），它即可自动抓取该元素对应的源代码文件路径、React 组件名称及 HTML 结构，并一键复制到剪贴板。
这款工具特别适合前端工程师和全栈开发者，尤其是那些频繁利用 AI 工具进行代码生成、重构或调试的人群。其独特亮点在于能够精准映射浏览器渲染内容与本地开发环境的文件结构，让 AI 获得的上下文信息更加准确完整，据官方测试可让编码流程提速高达三倍。此外，react-grab 支持 Next.js、Vite、Webpack 等主流框架，并提供插件系统以扩展右键菜单或自定义生命周期钩子，灵活适配不同开发工作流。通过简化“从界面到代码”的反馈回路，react-grab 让人机协作变得更加流畅自然。
使用场景
前端工程师小李正在修复一个复杂的登录表单组件，需要让 AI 编程助手（如 Cursor 或 Copilot）根据当前页面视觉效果快速定位并修改源代码。
没有 react-grab 时
- 开发者必须在浏览器开发者工具中层层嵌套查找 DOM 节点，再手动对应到项目文件结构中的具体组件文件。
- 复制代码上下文时，只能获取纯 HTML 片段，丢失了关键的 React 组件名称和源文件路径信息。
- 将零散信息粘贴给 AI 后，常因缺乏文件定位导致 AI 产生幻觉，修改了错误的文件或生成了不匹配的代码。
- 整个“观察 - 定位 - 复制 - 描述”的过程重复繁琐，严重打断开发心流，单次上下文构建耗时数分钟。
使用 react-grab 后
- 只需将鼠标悬停在目标元素上并按下
Cmd+C，react-grab 即刻自动识别并提取组件名、文件路径及源码。 - 剪贴板中直接包含结构化上下文（如
in LoginForm at components/login-form.tsx:46:19），AI 能精准锁定修改位置。 - 消除了人工描述上下文的误差，使 Cursor 等工具的代码生成准确率大幅提升，响应速度加快约 3 倍。
- 开发者从繁琐的查找工作中解放出来，实现“所见即所得”的无缝交互，专注于业务逻辑而非环境切换。
react-grab 通过一键捕获精确的代码上下文，彻底消除了人与 AI 协作时的信息断层，让前端调试与重构变得前所未有的高效流畅。
运行环境要求
- Linux
- macOS
- Windows
未说明
未说明
快速开始
React Grab
直接从你的网站中为编码助手选择上下文
如何操作？只需将鼠标悬停在任意元素上，然后按下 ⌘C（Mac）或 Ctrl+C（Windows/Linux），即可复制文件名、React 组件以及 HTML 源代码。
这能让 Cursor、Claude Code 和 Copilot 等工具的速度提升高达 3 倍，并且更加精准。
立即体验演示！→
安装
在你的项目根目录（即 next.config.ts 或 vite.config.ts 所在的目录）运行以下命令：
npx grab@latest init
连接到 MCP
npx grab@latest add mcp
使用方法
安装完成后，在浏览器中将鼠标悬停在任何 UI 元素上，然后按下：
- Mac 上：⌘C（Cmd+C）
- Windows/Linux 上：Ctrl+C
这样会将该元素的上下文（文件名、React 组件和 HTML 源代码）复制到剪贴板，方便你粘贴到编码助手当中。例如：
<a class="ml-auto inline-block text-sm" href="#">
忘记密码？
</a>
位于 components/login-form.tsx 的 LoginForm 中，第 46 行第 19 列
手动安装
如果你使用的是 React 框架或构建工具，请参阅以下说明：
Next.js（App 路由）
在你的 app/layout.tsx 文件中添加以下内容：
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html>
<head>
{process.env.NODE_ENV === "development" && (
<Script
src="//unpkg.com/react-grab/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
)}
</head>
<body>{children}</body>
</html>
);
}
Next.js（Pages 路由）
在你的 pages/_document.tsx 文件中添加以下内容：
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head>
{process.env.NODE_ENV === "development" && (
<Script
src="//unpkg.com/react-grab/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
)}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Vite
在你的主入口文件（例如 src/main.tsx）顶部添加以下代码：
if (import.meta.env.DEV) {
import("react-grab");
}
Webpack
首先安装 React Grab：
npm install react-grab
然后在你的主入口文件（例如 src/index.tsx 或 src/main.tsx）顶部添加以下代码：
if (process.env.NODE_ENV === "development") {
import("react-grab");
}
插件
通过插件可以扩展 React Grab 的内置 UI，添加上下文菜单操作、工具栏菜单项、生命周期钩子以及主题覆盖等功能。插件将在 React Grab 的运行环境中执行。
使用 registerPlugin 和 unregisterPlugin 导出来注册插件：
import { registerPlugin } from "react-grab";
registerPlugin({
name: "my-plugin",
hooks: {
onElementSelect: (element) => {
console.log("选中元素:", element.tagName);
},
},
});
在 React 中，可以在 useEffect 中进行注册：
import { registerPlugin, unregisterPlugin } from "react-grab";
useEffect(() => {
registerPlugin({
name: "my-plugin",
actions: [
{
id: "my-action",
label: "我的操作",
shortcut: "M",
onAction: (context) => {
console.log("操作目标:", context.element);
context.hideContextMenu();
},
},
],
});
return () => unregisterPlugin("my-plugin");
}, []);
动作可以通过 target 字段来控制其显示位置。省略 target 或将其设置为 "context-menu" 时，动作会出现在右键菜单中；而设置为 "toolbar" 时，则会出现在工具栏下拉菜单中：
actions: [
{
id: "inspect",
label: "检查",
shortcut: "I",
onAction: (ctx) => console.dir(ctx.element),
},
{
id: "toggle-freeze",
label: "冻结",
target: "toolbar",
isActive: () => isFrozen,
onAction: () => toggleFreeze(),
},
];
完整的 Plugin、PluginHooks 和 PluginConfig 接口，请参阅 packages/react-grab/src/types.ts。
资源与贡献
想试用一下吗？请查看我们的 演示页面。
希望参与贡献？请阅读我们的 贡献指南。
想与社区交流吗？欢迎加入我们的 Discord，分享你的想法以及使用 React Grab 构建的作品。
发现 bug？请前往我们的 问题追踪器，我们会尽力协助解决。我们也非常欢迎 Pull Request！
我们期望所有贡献者遵守我们的 行为准则。
许可证
React Grab 是采用 MIT 许可证的开源软件。
感谢 Andrew Luetgers 捐赠了 grab 这个 npm 包名称。
常见问题
相似工具推荐
openclaw
OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。 这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。 OpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你
stable-diffusion-webui
stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。 无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。
everything-claude-code
everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。 通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。 这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上
opencode
OpenCode 是一款开源的 AI 编程助手（Coding Agent），旨在像一位智能搭档一样融入您的开发流程。它不仅仅是一个代码补全插件，而是一个能够理解项目上下文、自主规划任务并执行复杂编码操作的智能体。无论是生成全新功能、重构现有代码，还是排查难以定位的 Bug，OpenCode 都能通过自然语言交互高效完成，显著减少开发者在重复性劳动和上下文切换上的时间消耗。 这款工具专为软件开发者、工程师及技术研究人员设计，特别适合希望利用大模型能力来提升编码效率、加速原型开发或处理遗留代码维护的专业人群。其核心亮点在于完全开源的架构，这意味着用户可以审查代码逻辑、自定义行为策略，甚至私有化部署以保障数据安全，彻底打破了传统闭源 AI 助手的“黑盒”限制。 在技术体验上，OpenCode 提供了灵活的终端界面（Terminal UI）和正在测试中的桌面应用程序，支持 macOS、Windows 及 Linux 全平台。它兼容多种包管理工具，安装便捷，并能无缝集成到现有的开发环境中。无论您是追求极致控制权的资深极客，还是渴望提升产出的独立开发者，OpenCode 都提供了一个透明、可信
ComfyUI
ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。 这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。 无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。
gemini-cli
gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。 这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。 它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。