React Grab for Agents 标志着前端开发进入了一个新阶段 —— 开发者只需在浏览器中点击页面元素，就能直接调用 Claude、Cursor、Codex 等智能代理来修改代码，无需切换窗口或手动复制粘贴，真正实现了 “所见即改” 的流畅体验。
React Grab 以往只能帮你的代码助手复制上下文，现在它可以直接在浏览器中与助手对话、修改代码 —— 无需离开网页。
保持不变的部分
- React Grab 依然是免费且开源的。
- 它仍然兼容所有主流的 AI 编码工具（如 Claude Code、Cursor、OpenCode、Codex、Gemini、Amp、Factory Droid、Copilot 等）。
- 核心理念依旧是：“点击一个元素，就能获得真实的 React 上下文和文件路径”。
React Grab for Agents 项目地址：https://github.com/aidenybai/react-grab
新增功能
- 现在你可以直接在网页中启动 Claude Code、Cursor 等智能代理。
- 可以同时运行多个 UI 任务，每个任务都与被点击的元素绑定。
- 可以在浏览器中直接修改代码，无需切换到其他工具。
React Grab 是如何起步的
React Grab 的灵感源自一个非常常见的开发痛点。
编码助手擅长生成代码，但很难准确理解开发者的具体意图。以往的流程通常是这样的：
-
- 看到界面，在脑中构思效果，然后用文字描述；
-
- 助手尝试打开文件、搜索内容，努力寻找正确的组件；
-
- 但随着项目规模增长，“猜测元素位置”成为了最大的效率瓶颈。
为了解决这个问题，最初的 React Grab 版本诞生了：开发者只需按下 ⌘C，点击页面元素，React Grab 就会返回该组件的完整调用栈及其精确的文件路径和行号。
现在，AI助手不再需要猜测，可以直接跳转到准确的文件和代码行。在 shadcn 的一个仪表盘项目上进行测试时，仅这一项改进就让 Claude Code 处理一系列 UI 任务的平均速度提升了约 3 倍，因为它减少了不必要的工具调用和文件读取，更快地定位到了需要编辑的代码。
React Grab 取得了成功。开发者们将它集成到自己的应用中，使得编程助手在处理UI任务时更加精准。但它也存在一个明显的缺点：工作流仍然不够连贯。
我们可以做得更好
React Grab 解决了 “上下文定位” 问题，但忽略了后续的交互环节。你仍然需要：复制内容 → 切换到助手界面 → 粘贴 → 等待响应 → 再切回浏览器 → 刷新页面。对于一次性任务尚可接受，但对于日常高频使用，体验仍有巨大优化空间。
浏览器最了解你的操作意图，而智能代理拥有修改代码的能力。那么，为什么不让代理的能力直接融入到浏览器环境中呢？
React Grab for Agents
当我们将更多工作环节交给浏览器来处理时，React Grab for Agents 便应运而生。
核心理念
其原理非常直观：
你按住 ⌘C，点击一个页面元素，界面上会出现一个小标签，显示该组件的名称。按下 Enter 键后，会展开一个输入框。输入你想修改的内容，再次按下 Enter，智能代理就会开始执行任务。
React Grab 会将完整的上下文信息（包括文件路径、行号、组件栈、附近的HTML结构等）连同你的修改提示一并发送给代理。代理会直接修改你的源代码文件，同时任务标签上会实时显示执行进度。任务完成后，标签状态变为 “Completed”，应用程序会自动重新加载并展示更改后的结果。
整个流程中 —— 你无需离开浏览器窗口，也完全不需要操作剪贴板。
你甚至可以并行运行多个任务：点击一个元素并开始编辑，然后立刻点击另一个元素执行不同的修改。每个任务都会独立跟踪进度。这种体验不再像是 “在与一个聊天助手对话”，而更像是在UI界面上挂载了一个小型、可视化的任务队列。
安装与设置
React Grab for Agents 的安装过程被设计为对现有 React Grab 功能的增强，而非引入一个全新的框架。
1. 命令行 (CLI) 安装
在项目根目录运行以下命令，CLI 会自动安装 React Grab 并检测你的项目框架，添加所需脚本。
npx grab@latest init
2. Claude Code 集成
- 服务器端设置
服务器运行在 4567 端口，并与 Claude Agent SDK 通信。在你的 package.json 中添加：
{
"scripts": {
"dev": "npx @react-grab/claude-code@latest && next dev"
}
}
-
客户端设置
如果你已在 React 应用中通过 <script> 标签运行 React Grab，只需在 <head> 中加入 Claude Code 客户端脚本：
<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
<script src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"></script>
或在 Next.js 的 app/layout.tsx 中使用 Script 组件：
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"
strategy="beforeInteractive"
/>
<Script
src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"
strategy="lazyOnload"
/>
</>
)}
</head>
<body>{children}</body>
</html>
);
}
3. Cursor 集成
- 服务器端设置
服务器运行在 5567 端口，并通过 cursor-agent CLI 与 Cursor 通信。在 package.json 中添加：
{
"scripts": {
"dev": "npx @react-grab/cursor@latest && next dev"
}
}
- 客户端设置
在 <head> 中添加 Cursor 客户端脚本：
<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
<script src="//unpkg.com/@react-grab/cursor/dist/client.global.js"></script>
或使用 Next.js 的 Script 组件进行加载。
4. OpenCode 集成
5. Codex 集成
6. Gemini 集成
7. Amp 集成
8. Factory Droid 集成
安装并启动开发服务器后，按住 ⌘C，点击页面元素，然后按 Enter 打开输入框。输入你的修改请求，从下拉菜单中选择一个 AI代理，再次按下 Enter 即可运行任务。
工作原理
从底层机制来看，React Grab for Agents 与原始库保持一致。
当你点击选择一个元素时，React Grab 会执行以下步骤：
-
- 沿着 React Fiber 树自下而上遍历该元素；
-
- 收集组件的显示名称，并在开发模式下记录源码位置（文件路径、行号和列号）；
-
- 捕获该节点附近的一小段 DOM 结构及其属性信息。
正是这些精准的上下文信息，使得早期的性能测试获得了显著提升。代理不再依赖模糊描述，而是能直接获得精确的代码定位。
新增的核心部分是 agent provider（代理提供器）。
代理提供器是一个轻量级的适配层，用于连接 React Grab 与后端的编码代理。当你提交提示（prompt）时，React Grab 会将上下文和消息发送到本地服务器。服务器再将请求转发给对应的 CLI（如 claude、cursor-agent 等），由 CLI 直接修改代码库。任务状态会实时返回到浏览器中，让你可以直观看到代理的执行过程。
所有这些提供器都是开源的。你可以查看其实现，或以此为模板创建自己的定制版本：@react-grab/claude-code、@react-grab/cursor、@react-grab/opencode、@react-grab/codex、@react-grab/gemini、@react-grab/amp、@react-grab/droid。
未来展望
目前，React Grab for Agents 刻意保持了“工具无关性”，能够与现有的各类代理无缝集成。只要你的工具具备 CLI 或 API，就可以为其添加一个 provider。
但从长远来看，目标不仅仅是“接入已有工具”。业界还缺少一个专门为 UI 开发工作流设计的智能代理 —— 一个能与 React Grab 的上下文机制深度契合的全新代理。
为此，团队即将发布 Ami（https://www.ami.dev/）。
其设计理念是：
- React Grab 负责前端部分 —— 元素选择、组件栈追溯、文件路径定位和用户提示输入；
- Ami 负责代理部分 —— 任务规划、代码编辑、理解组件层级和设计系统。
两者之间的协作契约非常明确：
- React Grab 提供 “用户点击了什么、想要达成什么效果”；
- Ami 返回 “能实现该目标的最小化代码变更，并保持项目原有代码风格”。
React Grab for Agents 是支撑这种高效协作关系的基础设施。在 Ami 正式发布之前，它能让开发者现有的 AI 工具在前端开发中运行得更快、更准确；而当 Ami 准备就绪时，React Grab for Agents 也将成为其最自然的运行环境。
想了解更多前沿的 React 开发工具和 AI 应用实践，欢迎持续关注 云栈社区 的技术分享。
发表于 3 天前
|
查看: 11|
回复: 0
