react-grab 是一项用于从实时浏览器 UI 中捕获 React 元素上下文的技能，主要服务于 AI 编程智能体场景。它的核心作用是把浏览器中看到的元素，映射回源码中的组件名、文件路径、行号和 HTML 片段，再把这些信息提供给 AI 编程工具使用。
用途
当你需要在 React 项目的运行界面中定位某个元素对应的源码时，react-grab 可以在浏览器中直接捕获该元素的上下文。捕获结果包含组件名、源码文件路径、行/列信息（在可用时）以及 HTML 片段，便于交给 AI 智能体继续处理。
主要能力与工作模式
react-grab 提供三种主要工作流：
-
剪贴板流程（默认）：在项目中安装后，启动开发服务器，在浏览器中悬停目标元素，按 Cmd+C（Mac）或 Ctrl+C（Windows/Linux），然后把捕获到的上下文粘贴进 AI 智能体。
-
MCP 流程：通过 MCP 服务暴露最近一次的元素选择，AI 智能体调用 get_element_context 工具，获取文件路径、组件、调用栈和 HTML 上下文。区别在于剪贴板是手动粘贴，MCP 是基于工具的检索。
-
插件/API 流程：用于自定义行为、自动化或更深入的集成，涉及 registerPlugin(...)、getElementContext(element)、freeze() / unfreeze()、openFile(filePath, lineNumber?) 等原语。
使用方式
默认安装路径为 npx -y grab@latest init，需在项目根目录执行。安装 MCP 集成的命令为 npx -y grab@latest add mcp。移除某个智能体集成可使用 npx -y grab@latest remove <agent>。
适用场景
包括：在 React 项目中安装 react-grab 以便智能体从浏览器复制精确的组件上下文；在剪贴板流程、MCP 流程和插件/API 流程之间做选择；修复设置问题，如加载点错误、文件路径缺失或 MCP 返回为空；添加或移除智能体集成（claude-code、cursor、codex、gemini、mcp 等）；为项目特定工作流构建自定义插件或使用原语 API。
限制与边界
上游 package.json 目前要求 Node.js >=22，环境低于 Node 22 时需明确告知。浏览器覆盖层是仅用于开发的工具，不应被当作生产功能。该技能不适用于：全新会话的浏览器自动化、认证流程或一次性浏览器验证（应使用 browser-harness）；带现有 Cookie、扩展或登录状态的运行中浏览器复用（应使用 playwriter）；渲染 UI 上的人工反馈或标注（应使用 agentation）；React 性能诊断、重渲染、水合、打包或 RSC/客户端边界问题（应使用 react-best-practices）；通用 UI 系统、设计令牌或组件库设计（应使用 design-system）。
参考文档方面，资料列出了 react-grab GitHub、react-grab.com 以及安装与路由指南、智能体工作流、故障排查和完整 API 参考等支持文档。