[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-aidenybai--react-grab":3,"tool-aidenybai--react-grab":62},[4,18,26,36,46,54],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",160784,2,"2026-04-19T11:32:54",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":42,"last_commit_at":43,"category_tags":44,"status":17},8272,"opencode","anomalyco\u002Fopencode","OpenCode 是一款开源的 AI 编程助手（Coding Agent），旨在像一位智能搭档一样融入您的开发流程。它不仅仅是一个代码补全插件，而是一个能够理解项目上下文、自主规划任务并执行复杂编码操作的智能体。无论是生成全新功能、重构现有代码，还是排查难以定位的 Bug，OpenCode 都能通过自然语言交互高效完成，显著减少开发者在重复性劳动和上下文切换上的时间消耗。\n\n这款工具专为软件开发者、工程师及技术研究人员设计，特别适合希望利用大模型能力来提升编码效率、加速原型开发或处理遗留代码维护的专业人群。其核心亮点在于完全开源的架构，这意味着用户可以审查代码逻辑、自定义行为策略，甚至私有化部署以保障数据安全，彻底打破了传统闭源 AI 助手的“黑盒”限制。\n\n在技术体验上，OpenCode 提供了灵活的终端界面（Terminal UI）和正在测试中的桌面应用程序，支持 macOS、Windows 及 Linux 全平台。它兼容多种包管理工具，安装便捷，并能无缝集成到现有的开发环境中。无论您是追求极致控制权的资深极客，还是渴望提升产出的独立开发者，OpenCode 都提供了一个透明、可信",144296,1,"2026-04-16T14:50:03",[13,45],"插件",{"id":47,"name":48,"github_repo":49,"description_zh":50,"stars":51,"difficulty_score":32,"last_commit_at":52,"category_tags":53,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",109154,"2026-04-18T11:18:24",[14,15,13],{"id":55,"name":56,"github_repo":57,"description_zh":58,"stars":59,"difficulty_score":32,"last_commit_at":60,"category_tags":61,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[45,13,15,14],{"id":63,"github_repo":64,"name":65,"description_en":66,"description_zh":67,"ai_summary_zh":68,"readme_en":69,"readme_zh":70,"quickstart_zh":71,"use_case_zh":72,"hero_image_url":73,"owner_login":74,"owner_name":75,"owner_avatar_url":76,"owner_bio":77,"owner_company":78,"owner_location":79,"owner_email":78,"owner_twitter":74,"owner_website":80,"owner_url":81,"languages":82,"stars":102,"forks":103,"last_commit_at":104,"license":105,"difficulty_score":32,"env_os":106,"env_gpu":107,"env_ram":107,"env_deps":108,"category_tags":115,"github_topics":116,"view_count":32,"oss_zip_url":78,"oss_zip_packed_at":78,"status":17,"created_at":119,"updated_at":120,"faqs":121,"releases":152},9854,"aidenybai\u002Freact-grab","react-grab","Select context for coding agents directly from your website","react-grab 是一款专为 React 开发者设计的浏览器辅助工具，旨在提升编码智能体（如 Cursor、Claude Code、Copilot）的工作效率。在使用 AI 辅助编程时，开发者常需手动查找组件文件路径或复制源码作为上下文输入给 AI，过程繁琐且易出错。react-grab 巧妙解决了这一痛点：在开发环境中，只需将鼠标悬停在网页任意元素上并按下快捷键（Mac 为⌘C，Windows\u002FLinux 为 Ctrl+C），它即可自动抓取该元素对应的源代码文件路径、React 组件名称及 HTML 结构，并一键复制到剪贴板。\n\n这款工具特别适合前端工程师和全栈开发者，尤其是那些频繁利用 AI 工具进行代码生成、重构或调试的人群。其独特亮点在于能够精准映射浏览器渲染内容与本地开发环境的文件结构，让 AI 获得的上下文信息更加准确完整，据官方测试可让编码流程提速高达三倍。此外，react-grab 支持 Next.js、Vite、Webpack 等主流框架，并提供插件系统以扩展右键菜单或自定义生命周期钩子，灵活适配不同开发工作流。通过简化“从界面到代码”的反馈回路，react-gr","react-grab 是一款专为 React 开发者设计的浏览器辅助工具，旨在提升编码智能体（如 Cursor、Claude Code、Copilot）的工作效率。在使用 AI 辅助编程时，开发者常需手动查找组件文件路径或复制源码作为上下文输入给 AI，过程繁琐且易出错。react-grab 巧妙解决了这一痛点：在开发环境中，只需将鼠标悬停在网页任意元素上并按下快捷键（Mac 为⌘C，Windows\u002FLinux 为 Ctrl+C），它即可自动抓取该元素对应的源代码文件路径、React 组件名称及 HTML 结构，并一键复制到剪贴板。\n\n这款工具特别适合前端工程师和全栈开发者，尤其是那些频繁利用 AI 工具进行代码生成、重构或调试的人群。其独特亮点在于能够精准映射浏览器渲染内容与本地开发环境的文件结构，让 AI 获得的上下文信息更加准确完整，据官方测试可让编码流程提速高达三倍。此外，react-grab 支持 Next.js、Vite、Webpack 等主流框架，并提供插件系统以扩展右键菜单或自定义生命周期钩子，灵活适配不同开发工作流。通过简化“从界面到代码”的反馈回路，react-grab 让人机协作变得更加流畅自然。","# \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Faidenybai_react-grab_readme_65279c3c1acd.png\" width=\"60\" align=\"center\" \u002F> React Grab\n\n[![version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freact-grab?style=flat&colorA=000000&colorB=000000)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Freact-grab)\n[![downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Freact-grab.svg?style=flat&colorA=000000&colorB=000000)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Freact-grab)\n\nSelect context for coding agents directly from your website\n\nHow? Point at any element and press **⌘C** (Mac) or **Ctrl+C** (Windows\u002FLinux) to copy the file name, React component, and HTML source code.\n\nIt makes tools like Cursor, Claude Code, Copilot run up to [**3× faster**](https:\u002F\u002Freact-grab.com\u002Fblog\u002Fintro) and more accurate.\n\n### [Try out a demo! →](https:\u002F\u002Freact-grab.com)\n\n## Install\n\nRun this command at your project root (where `next.config.ts` or `vite.config.ts` is located):\n\n```bash\nnpx grab@latest init\n```\n\n## Connect to MCP\n\n```bash\nnpx grab@latest add mcp\n```\n\n## Usage\n\nOnce installed, hover over any UI element in your browser and press:\n\n- **⌘C** (Cmd+C) on Mac\n- **Ctrl+C** on Windows\u002FLinux\n\nThis copies the element's context (file name, React component, and HTML source code) to your clipboard ready to paste into your coding agent. For example:\n\n```js\n\u003Ca class=\"ml-auto inline-block text-sm\" href=\"#\">\n  Forgot your password?\n\u003C\u002Fa>\nin LoginForm at components\u002Flogin-form.tsx:46:19\n```\n\n## Manual Installation\n\nIf you're using a React framework or build tool, view instructions below:\n\n#### Next.js (App router)\n\nAdd this inside of your `app\u002Flayout.tsx`:\n\n```jsx\nimport Script from \"next\u002Fscript\";\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml>\n      \u003Chead>\n        {process.env.NODE_ENV === \"development\" && (\n          \u003CScript\n            src=\"\u002F\u002Funpkg.com\u002Freact-grab\u002Fdist\u002Findex.global.js\"\n            crossOrigin=\"anonymous\"\n            strategy=\"beforeInteractive\"\n          \u002F>\n        )}\n      \u003C\u002Fhead>\n      \u003Cbody>{children}\u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  );\n}\n```\n\n#### Next.js (Pages router)\n\nAdd this into your `pages\u002F_document.tsx`:\n\n```jsx\nimport { Html, Head, Main, NextScript } from \"next\u002Fdocument\";\n\nexport default function Document() {\n  return (\n    \u003CHtml lang=\"en\">\n      \u003CHead>\n        {process.env.NODE_ENV === \"development\" && (\n          \u003CScript\n            src=\"\u002F\u002Funpkg.com\u002Freact-grab\u002Fdist\u002Findex.global.js\"\n            crossOrigin=\"anonymous\"\n            strategy=\"beforeInteractive\"\n          \u002F>\n        )}\n      \u003C\u002FHead>\n      \u003Cbody>\n        \u003CMain \u002F>\n        \u003CNextScript \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002FHtml>\n  );\n}\n```\n\n#### Vite\n\nAdd this at the top of your main entry file (e.g., `src\u002Fmain.tsx`):\n\n```tsx\nif (import.meta.env.DEV) {\n  import(\"react-grab\");\n}\n```\n\n#### Webpack\n\nFirst, install React Grab:\n\n```bash\nnpm install react-grab\n```\n\nThen add this at the top of your main entry file (e.g., `src\u002Findex.tsx` or `src\u002Fmain.tsx`):\n\n```tsx\nif (process.env.NODE_ENV === \"development\") {\n  import(\"react-grab\");\n}\n```\n\n## Plugins\n\nUse plugins to extend React Grab's built-in UI with context menu actions, toolbar menu items, lifecycle hooks, and theme overrides. Plugins run within React Grab.\n\nRegister a plugin using the `registerPlugin` and `unregisterPlugin` exports:\n\n```js\nimport { registerPlugin } from \"react-grab\";\n\nregisterPlugin({\n  name: \"my-plugin\",\n  hooks: {\n    onElementSelect: (element) => {\n      console.log(\"Selected:\", element.tagName);\n    },\n  },\n});\n```\n\nIn React, register inside a `useEffect`:\n\n```jsx\nimport { registerPlugin, unregisterPlugin } from \"react-grab\";\n\nuseEffect(() => {\n  registerPlugin({\n    name: \"my-plugin\",\n    actions: [\n      {\n        id: \"my-action\",\n        label: \"My Action\",\n        shortcut: \"M\",\n        onAction: (context) => {\n          console.log(\"Action on:\", context.element);\n          context.hideContextMenu();\n        },\n      },\n    ],\n  });\n\n  return () => unregisterPlugin(\"my-plugin\");\n}, []);\n```\n\nActions use a `target` field to control where they appear. Omit `target` (or set `\"context-menu\"`) for the right-click menu, or set `\"toolbar\"` for the toolbar dropdown:\n\n```js\nactions: [\n  {\n    id: \"inspect\",\n    label: \"Inspect\",\n    shortcut: \"I\",\n    onAction: (ctx) => console.dir(ctx.element),\n  },\n  {\n    id: \"toggle-freeze\",\n    label: \"Freeze\",\n    target: \"toolbar\",\n    isActive: () => isFrozen,\n    onAction: () => toggleFreeze(),\n  },\n];\n```\n\nSee [`packages\u002Freact-grab\u002Fsrc\u002Ftypes.ts`](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fblob\u002Fmain\u002Fpackages\u002Freact-grab\u002Fsrc\u002Ftypes.ts) for the full `Plugin`, `PluginHooks`, and `PluginConfig` interfaces.\n\n## Resources & Contributing Back\n\nWant to try it out? Check out [our demo](https:\u002F\u002Freact-grab.com).\n\nLooking to contribute back? Check out the [Contributing Guide](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fblob\u002Fmain\u002FCONTRIBUTING.md).\n\nWant to talk to the community? Hop in our [Discord](https:\u002F\u002Fdiscord.com\u002Finvite\u002FG7zxfUzkm7) and share your ideas and what you've built with React Grab.\n\nFind a bug? Head over to our [issue tracker](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fissues) and we'll do our best to help. We love pull requests, too!\n\nWe expect all contributors to abide by the terms of our [Code of Conduct](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fblob\u002Fmain\u002F.github\u002FCODE_OF_CONDUCT.md).\n\n[**→ Start contributing on GitHub**](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fblob\u002Fmain\u002FCONTRIBUTING.md)\n\n### License\n\nReact Grab is MIT-licensed open-source software.\n\n_Thank you to [Andrew Luetgers](https:\u002F\u002Fgithub.com\u002Fandrewluetgers) for donating the `grab` npm package name._\n","# \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Faidenybai_react-grab_readme_65279c3c1acd.png\" width=\"60\" align=\"center\" \u002F> React Grab\n\n[![版本](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freact-grab?style=flat&colorA=000000&colorB=000000)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Freact-grab)\n[![下载量](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Freact-grab.svg?style=flat&colorA=000000&colorB=000000)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Freact-grab)\n\n直接从你的网站中为编码助手选择上下文\n\n如何操作？只需将鼠标悬停在任意元素上，然后按下 **⌘C**（Mac）或 **Ctrl+C**（Windows\u002FLinux），即可复制文件名、React 组件以及 HTML 源代码。\n\n这能让 Cursor、Claude Code 和 Copilot 等工具的速度提升高达 **3 倍**，并且更加精准。\n\n### [立即体验演示！→](https:\u002F\u002Freact-grab.com)\n\n## 安装\n\n在你的项目根目录（即 `next.config.ts` 或 `vite.config.ts` 所在的目录）运行以下命令：\n\n```bash\nnpx grab@latest init\n```\n\n## 连接到 MCP\n\n```bash\nnpx grab@latest add mcp\n```\n\n## 使用方法\n\n安装完成后，在浏览器中将鼠标悬停在任何 UI 元素上，然后按下：\n\n- Mac 上：**⌘C**（Cmd+C）\n- Windows\u002FLinux 上：**Ctrl+C**\n\n这样会将该元素的上下文（文件名、React 组件和 HTML 源代码）复制到剪贴板，方便你粘贴到编码助手当中。例如：\n\n```js\n\u003Ca class=\"ml-auto inline-block text-sm\" href=\"#\">\n  忘记密码？\n\u003C\u002Fa>\n位于 components\u002Flogin-form.tsx 的 LoginForm 中，第 46 行第 19 列\n```\n\n## 手动安装\n\n如果你使用的是 React 框架或构建工具，请参阅以下说明：\n\n#### Next.js（App 路由）\n\n在你的 `app\u002Flayout.tsx` 文件中添加以下内容：\n\n```jsx\nimport Script from \"next\u002Fscript\";\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml>\n      \u003Chead>\n        {process.env.NODE_ENV === \"development\" && (\n          \u003CScript\n            src=\"\u002F\u002Funpkg.com\u002Freact-grab\u002Fdist\u002Findex.global.js\"\n            crossOrigin=\"anonymous\"\n            strategy=\"beforeInteractive\"\n          \u002F>\n        )}\n      \u003C\u002Fhead>\n      \u003Cbody>{children}\u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  );\n}\n```\n\n#### Next.js（Pages 路由）\n\n在你的 `pages\u002F_document.tsx` 文件中添加以下内容：\n\n```jsx\nimport { Html, Head, Main, NextScript } from \"next\u002Fdocument\";\n\nexport default function Document() {\n  return (\n    \u003CHtml lang=\"en\">\n      \u003CHead>\n        {process.env.NODE_ENV === \"development\" && (\n          \u003CScript\n            src=\"\u002F\u002Funpkg.com\u002Freact-grab\u002Fdist\u002Findex.global.js\"\n            crossOrigin=\"anonymous\"\n            strategy=\"beforeInteractive\"\n          \u002F>\n        )}\n      \u003C\u002FHead>\n      \u003Cbody>\n        \u003CMain \u002F>\n        \u003CNextScript \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002FHtml>\n  );\n}\n```\n\n#### Vite\n\n在你的主入口文件（例如 `src\u002Fmain.tsx`）顶部添加以下代码：\n\n```tsx\nif (import.meta.env.DEV) {\n  import(\"react-grab\");\n}\n```\n\n#### Webpack\n\n首先安装 React Grab：\n\n```bash\nnpm install react-grab\n```\n\n然后在你的主入口文件（例如 `src\u002Findex.tsx` 或 `src\u002Fmain.tsx`）顶部添加以下代码：\n\n```tsx\nif (process.env.NODE_ENV === \"development\") {\n  import(\"react-grab\");\n}\n```\n\n## 插件\n\n通过插件可以扩展 React Grab 的内置 UI，添加上下文菜单操作、工具栏菜单项、生命周期钩子以及主题覆盖等功能。插件将在 React Grab 的运行环境中执行。\n\n使用 `registerPlugin` 和 `unregisterPlugin` 导出来注册插件：\n\n```js\nimport { registerPlugin } from \"react-grab\";\n\nregisterPlugin({\n  name: \"my-plugin\",\n  hooks: {\n    onElementSelect: (element) => {\n      console.log(\"选中元素:\", element.tagName);\n    },\n  },\n});\n```\n\n在 React 中，可以在 `useEffect` 中进行注册：\n\n```jsx\nimport { registerPlugin, unregisterPlugin } from \"react-grab\";\n\nuseEffect(() => {\n  registerPlugin({\n    name: \"my-plugin\",\n    actions: [\n      {\n        id: \"my-action\",\n        label: \"我的操作\",\n        shortcut: \"M\",\n        onAction: (context) => {\n          console.log(\"操作目标:\", context.element);\n          context.hideContextMenu();\n        },\n      },\n    ],\n  });\n\n  return () => unregisterPlugin(\"my-plugin\");\n}, []);\n```\n\n动作可以通过 `target` 字段来控制其显示位置。省略 `target` 或将其设置为 `\"context-menu\"` 时，动作会出现在右键菜单中；而设置为 `\"toolbar\"` 时，则会出现在工具栏下拉菜单中：\n\n```js\nactions: [\n  {\n    id: \"inspect\",\n    label: \"检查\",\n    shortcut: \"I\",\n    onAction: (ctx) => console.dir(ctx.element),\n  },\n  {\n    id: \"toggle-freeze\",\n    label: \"冻结\",\n    target: \"toolbar\",\n    isActive: () => isFrozen,\n    onAction: () => toggleFreeze(),\n  },\n];\n```\n\n完整的 `Plugin`、`PluginHooks` 和 `PluginConfig` 接口，请参阅 [`packages\u002Freact-grab\u002Fsrc\u002Ftypes.ts`](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fblob\u002Fmain\u002Fpackages\u002Freact-grab\u002Fsrc\u002Ftypes.ts)。\n\n## 资源与贡献\n\n想试用一下吗？请查看我们的 [演示页面](https:\u002F\u002Freact-grab.com)。\n\n希望参与贡献？请阅读我们的 [贡献指南](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fblob\u002Fmain\u002FCONTRIBUTING.md)。\n\n想与社区交流吗？欢迎加入我们的 [Discord](https:\u002F\u002Fdiscord.com\u002Finvite\u002FG7zxfUzkm7)，分享你的想法以及使用 React Grab 构建的作品。\n\n发现 bug？请前往我们的 [问题追踪器](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fissues)，我们会尽力协助解决。我们也非常欢迎 Pull Request！\n\n我们期望所有贡献者遵守我们的 [行为准则](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fblob\u002Fmain\u002F.github\u002FCODE_OF_CONDUCT.md)。\n\n[**→ 在 GitHub 上开始贡献**](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fblob\u002Fmain\u002FCONTRIBUTING.md)\n\n### 许可证\n\nReact Grab 是采用 MIT 许可证的开源软件。\n\n_感谢 [Andrew Luetgers](https:\u002F\u002Fgithub.com\u002Fandrewluetgers) 捐赠了 `grab` 这个 npm 包名称。_","# React Grab 快速上手指南\n\nReact Grab 是一款专为 AI 编程助手（如 Cursor、Claude Code、Copilot）设计的开发工具。它允许你在浏览器中直接指向任意 UI 元素，一键复制其文件名、React 组件源码及 HTML 结构，显著提升 AI 编码的准确率与速度。\n\n## 环境准备\n\n- **系统要求**：macOS、Windows 或 Linux\n- **前置依赖**：\n  - Node.js (推荐 v18+)\n  - 基于 React 的项目（支持 Next.js、Vite、Webpack 等）\n  - 现代浏览器（Chrome、Edge、Firefox 等）\n- **注意**：该工具默认仅在开发环境（`development`）下运行，不会影响生产构建。\n\n## 安装步骤\n\n在项目根目录（即包含 `next.config.ts`、`vite.config.ts` 或 `package.json` 的目录）执行以下命令进行初始化：\n\n```bash\nnpx grab@latest init\n```\n\n若需连接 MCP (Model Context Protocol) 以增强 AI 上下文能力，可额外执行：\n\n```bash\nnpx grab@latest add mcp\n```\n\n> **提示**：国内开发者若遇到 `npx` 下载缓慢，可配置 npm 镜像源后重试：\n> ```bash\n> npm config set registry https:\u002F\u002Fregistry.npmmirror.com\n> ```\n\n### 手动安装（可选）\n\n如果自动初始化未生效，可根据框架手动引入：\n\n**Next.js (App Router)**\n在 `app\u002Flayout.tsx` 中添加：\n```jsx\nimport Script from \"next\u002Fscript\";\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml>\n      \u003Chead>\n        {process.env.NODE_ENV === \"development\" && (\n          \u003CScript\n            src=\"\u002F\u002Funpkg.com\u002Freact-grab\u002Fdist\u002Findex.global.js\"\n            crossOrigin=\"anonymous\"\n            strategy=\"beforeInteractive\"\n          \u002F>\n        )}\n      \u003C\u002Fhead>\n      \u003Cbody>{children}\u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  );\n}\n```\n\n**Next.js (Pages Router)**\n在 `pages\u002F_document.tsx` 中添加：\n```jsx\nimport { Html, Head, Main, NextScript } from \"next\u002Fdocument\";\n\nexport default function Document() {\n  return (\n    \u003CHtml lang=\"en\">\n      \u003CHead>\n        {process.env.NODE_ENV === \"development\" && (\n          \u003CScript\n            src=\"\u002F\u002Funpkg.com\u002Freact-grab\u002Fdist\u002Findex.global.js\"\n            crossOrigin=\"anonymous\"\n            strategy=\"beforeInteractive\"\n          \u002F>\n        )}\n      \u003C\u002FHead>\n      \u003Cbody>\n        \u003CMain \u002F>\n        \u003CNextScript \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002FHtml>\n  );\n}\n```\n\n**Vite**\n在主入口文件（如 `src\u002Fmain.tsx`）顶部添加：\n```tsx\nif (import.meta.env.DEV) {\n  import(\"react-grab\");\n}\n```\n\n**Webpack**\n先安装包：\n```bash\nnpm install react-grab\n```\n然后在主入口文件（如 `src\u002Findex.tsx`）顶部添加：\n```tsx\nif (process.env.NODE_ENV === \"development\") {\n  import(\"react-grab\");\n}\n```\n\n## 基本使用\n\n安装完成后，启动你的开发服务器并在浏览器中打开项目。\n\n1. **悬停定位**：将鼠标悬停在页面任意 UI 元素上。\n2. **快捷键复制**：\n   - **Mac**: 按下 `⌘C` (Cmd+C)\n   - **Windows\u002FLinux**: 按下 `Ctrl+C`\n3. **粘贴使用**：此时剪贴板已包含该元素的完整上下文信息，直接粘贴到 AI 编程工具的对话框中即可。\n\n**复制内容示例**：\n```js\n\u003Ca class=\"ml-auto inline-block text-sm\" href=\"#\">\n  Forgot your password?\n\u003C\u002Fa>\nin LoginForm at components\u002Flogin-form.tsx:46:19\n```\n\nAI 将利用这些精确的文件路径和代码片段，为你提供更具针对性的修改建议或功能实现。","前端工程师小李正在修复一个复杂的登录表单组件，需要让 AI 编程助手（如 Cursor 或 Copilot）根据当前页面视觉效果快速定位并修改源代码。\n\n### 没有 react-grab 时\n- 开发者必须在浏览器开发者工具中层层嵌套查找 DOM 节点，再手动对应到项目文件结构中的具体组件文件。\n- 复制代码上下文时，只能获取纯 HTML 片段，丢失了关键的 React 组件名称和源文件路径信息。\n- 将零散信息粘贴给 AI 后，常因缺乏文件定位导致 AI 产生幻觉，修改了错误的文件或生成了不匹配的代码。\n- 整个“观察 - 定位 - 复制 - 描述”的过程重复繁琐，严重打断开发心流，单次上下文构建耗时数分钟。\n\n### 使用 react-grab 后\n- 只需将鼠标悬停在目标元素上并按下 `Cmd+C`，react-grab 即刻自动识别并提取组件名、文件路径及源码。\n- 剪贴板中直接包含结构化上下文（如 `in LoginForm at components\u002Flogin-form.tsx:46:19`），AI 能精准锁定修改位置。\n- 消除了人工描述上下文的误差，使 Cursor 等工具的代码生成准确率大幅提升，响应速度加快约 3 倍。\n- 开发者从繁琐的查找工作中解放出来，实现“所见即所得”的无缝交互，专注于业务逻辑而非环境切换。\n\nreact-grab 通过一键捕获精确的代码上下文，彻底消除了人与 AI 协作时的信息断层，让前端调试与重构变得前所未有的高效流畅。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Faidenybai_react-grab_d268eb99.png","aidenybai","Aiden Bai","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Faidenybai_7f618ff3.jpg","building",null,"sf","https:\u002F\u002Faiden.mov","https:\u002F\u002Fgithub.com\u002Faidenybai",[83,87,91,95,99],{"name":84,"color":85,"percentage":86},"TypeScript","#3178c6",98.8,{"name":88,"color":89,"percentage":90},"CSS","#663399",0.9,{"name":92,"color":93,"percentage":94},"JavaScript","#f1e05a",0.3,{"name":96,"color":97,"percentage":98},"Shell","#89e051",0,{"name":100,"color":101,"percentage":98},"HTML","#e34c26",7009,317,"2026-04-19T07:45:54","MIT","Linux, macOS, Windows","未说明",{"notes":109,"python":107,"dependencies":110},"这是一个前端 React 开发工具，需在浏览器环境中运行。仅建议在开发环境（development mode）下加载，生产环境会自动禁用。支持 Next.js (App\u002FPages 路由)、Vite 和 Webpack 项目。通过快捷键 (Mac: ⌘C, Windows\u002FLinux: Ctrl+C) 触发功能，无需后端服务或特定硬件加速。",[111,112,113,114],"react","next","vite","webpack",[14,15,13],[117,118,111,65],"ai","coding","2026-03-27T02:49:30.150509","2026-04-20T07:17:15.344393",[122,127,132,137,142,147],{"id":123,"question_zh":124,"answer_zh":125,"source_url":126},44255,"为什么代理任务会瞬间标记为完成却不执行任何操作，或者在 Windows 上运行时报错？","这通常是因为在 Windows 系统上，npm 安装的 CLI 工具是 `.cmd` 包装脚本，而代码中的 `spawn()` 调用缺少 `shell: true` 选项导致无法执行。解决方案是更新到最新版本（已修复）。如果是自行开发或需要临时修复，请在 spawn 配置中添加 `shell: process.platform === \"win32\"`。此外，维护者建议使用 `cross-spawn` 库来替代原生的 spawn，因为它能自动处理跨平台差异并防止命令注入。","https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fissues\u002F45",{"id":128,"question_zh":129,"answer_zh":130,"source_url":131},44256,"启动开发服务器后，访问 localhost 端口（如 4567 或 6567）返回 404 错误且所有请求失败怎么办？","此问题在最新版本中已修复。如果仍遇到类似问题，请尝试不要直接使用复杂的 `npx` 单行命令，而是将包本地安装后直接运行服务器。具体步骤：1. 运行 `npm i -D @react-grab\u002Fclaude-code@latest`；2. 使用命令 `DEBUG=1 REACT_GRAB_CWD=\"$PWD\" node .\u002Fnode_modules\u002F@react-grab\u002Fclaude-code\u002Fdist\u002Fserver.cjs` 启动服务器；3. 在另一个终端启动你的应用。这样可以避免 `npx` 环境变量传递不稳定导致的错误。","https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fissues\u002F88",{"id":133,"question_zh":134,"answer_zh":135,"source_url":136},44257,"在 Next.js 的 `next.config.js` 中集成 React Grab 服务器时出现 'Dynamic require of child_process is not supported' 错误如何解决？","Next.js 配置文件对动态 require 有限制。推荐的解决方法是使用 `concurrently` 并行启动两个服务，而不是在 config 文件中直接导入。创建一个单独的 CommonJS 文件（例如 `start-grab-server.cjs`），内容如下：\n```js\nconst { startServer } = require(\"@react-grab\u002Fcursor\u002Fserver\"); \u002F\u002F 或其他代理包\nstartServer();\n```\n然后运行该文件。另外，请确保已全局或局部安装了对应的 CLI 工具（如 Cursor CLI），否则服务器可能会崩溃。","https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fissues\u002F76",{"id":138,"question_zh":139,"answer_zh":140,"source_url":141},44258,"在 Next.js 开发环境中，React Grab 只能复制渲染后的文本，缺少组件位置和描述信息？","这是版本 0.0.92 引入的一个回归问题，导致上下文信息丢失。该问题已在版本 0.0.93 及更高版本中修复。请将 `@react-grab` 相关包升级到最新版本即可恢复正常功能。","https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fissues\u002F90",{"id":143,"question_zh":144,"answer_zh":145,"source_url":146},44259,"Demo 页面或快捷键在某些键盘布局（非 ENG\u002FUSA）下无响应怎么办？","这是因为早期版本使用了 `event.key` 来判断快捷键，导致在非美式键盘布局下失效。虽然维护者已在后续版本中修复，但如果遇到类似问题，请确保升级到最新版本。如果问题依旧，检查是否必须切换到 'ENG\u002FUSA' 键盘布局才能触发，若是，则说明当前版本仍未完全适配您的键盘布局，建议关注官方更新或使用 `event.code` 进行判断的自定义构建。","https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fissues\u002F2",{"id":148,"question_zh":149,"answer_zh":150,"source_url":151},44260,"通过浏览器代理（如 Claude Code）提交更改时，显示“完成”但实际未做任何修改，且响应缓慢？","这是一个已知问题，通常由代理与本地文件系统的通信故障引起。维护者已在最新版本中针对 Claude Code (CC) 修复了此问题。如果遇到此情况，请务必将 `@react-grab\u002Fclaude-code` 升级到最新版本。升级后，代理应能正确获取文件上下文并执行写入操作，不再出现“假完成”现象。","https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fissues\u002F157",[]]