{"id":32555114,"url":"https://github.com/aidenybai/react-grab","last_synced_at":"2026-02-09T20:59:33.989Z","repository":{"id":320595056,"uuid":"1078170563","full_name":"aidenybai/react-grab","owner":"aidenybai","description":"Grab any element on in your app and give it to Cursor, Claude Code, etc","archived":false,"fork":false,"pushed_at":"2025-10-24T18:04:28.000Z","size":3728,"stargazers_count":93,"open_issues_count":2,"forks_count":7,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-24T18:24:29.313Z","etag":null,"topics":["ai","coding","react","react-grab"],"latest_commit_sha":null,"homepage":"https://react-grab.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aidenybai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-17T10:08:55.000Z","updated_at":"2025-10-24T18:23:55.000Z","dependencies_parsed_at":"2025-10-24T18:25:36.970Z","dependency_job_id":"1e9ad653-7d83-47ff-8b4d-a949c8909afe","html_url":"https://github.com/aidenybai/react-grab","commit_stats":null,"previous_names":["aidenybai/react-grab"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/aidenybai/react-grab","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidenybai%2Freact-grab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidenybai%2Freact-grab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidenybai%2Freact-grab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidenybai%2Freact-grab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aidenybai","download_url":"https://codeload.github.com/aidenybai/react-grab/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidenybai%2Freact-grab/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280897699,"owners_count":26409960,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-25T02:00:06.499Z","response_time":81,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","coding","react","react-grab"],"created_at":"2025-10-28T22:00:46.291Z","updated_at":"2026-02-09T20:59:33.984Z","avatar_url":"https://github.com/aidenybai.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Repos","Projects","A01_文本生成_文本对话","Skills \u0026 Plugins"],"sub_categories":["大语言对话模型及数据"],"readme":"# \u003cimg src=\"https://github.com/aidenybai/react-grab/blob/main/.github/public/logo.png?raw=true\" width=\"60\" align=\"center\" /\u003e React Grab\n\n[![size](https://img.shields.io/bundlephobia/minzip/react-grab?label=gzip\u0026style=flat\u0026colorA=000000\u0026colorB=000000)](https://bundlephobia.com/package/react-grab)\n[![version](https://img.shields.io/npm/v/react-grab?style=flat\u0026colorA=000000\u0026colorB=000000)](https://npmjs.com/package/react-grab)\n[![downloads](https://img.shields.io/npm/dt/react-grab.svg?style=flat\u0026colorA=000000\u0026colorB=000000)](https://npmjs.com/package/react-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/Linux) 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://react-grab.com/blog/intro) and more accurate.\n\n### [Try out a demo! →](https://react-grab.com)\n\n![React Grab Demo](https://github.com/aidenybai/react-grab/blob/main/packages/website/public/demo.gif?raw=true)\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 -y grab@latest init\n```\n\nUse the `-y` flag to skip interactive prompts:\n\n```bash\nnpx -y grab@latest init -y\n```\n\n## Connect to Your Agent\n\nConnect React Grab directly to your coding agent (Cursor, Claude Code, Codex, Gemini, Amp, and more):\n\n```bash\nnpx -y grab@latest add [agent]\n```\n\nOr connect via MCP:\n\n```bash\nnpx -y grab@latest add mcp\n```\n\nDisconnect an agent:\n\n```bash\nnpx -y grab@latest remove [agent]\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/Linux\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=\"#\"\u003e\n  Forgot your password?\n\u003c/a\u003e\nin LoginForm at components/login-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/layout.tsx`:\n\n```jsx\nimport Script from \"next/script\";\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003chtml\u003e\n      \u003chead\u003e\n        {process.env.NODE_ENV === \"development\" \u0026\u0026 (\n          \u003cScript\n            src=\"//unpkg.com/react-grab/dist/index.global.js\"\n            crossOrigin=\"anonymous\"\n            strategy=\"beforeInteractive\"\n          /\u003e\n        )}\n      \u003c/head\u003e\n      \u003cbody\u003e{children}\u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n#### Next.js (Pages router)\n\nAdd this into your `pages/_document.tsx`:\n\n```jsx\nimport { Html, Head, Main, NextScript } from \"next/document\";\n\nexport default function Document() {\n  return (\n    \u003cHtml lang=\"en\"\u003e\n      \u003cHead\u003e\n        {process.env.NODE_ENV === \"development\" \u0026\u0026 (\n          \u003cScript\n            src=\"//unpkg.com/react-grab/dist/index.global.js\"\n            crossOrigin=\"anonymous\"\n            strategy=\"beforeInteractive\"\n          /\u003e\n        )}\n      \u003c/Head\u003e\n      \u003cbody\u003e\n        \u003cMain /\u003e\n        \u003cNextScript /\u003e\n      \u003c/body\u003e\n    \u003c/Html\u003e\n  );\n}\n```\n\n#### Vite\n\nAdd this to your `index.html`:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cscript type=\"module\"\u003e\n      if (import.meta.env.DEV) {\n        import(\"react-grab\");\n      }\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003cscript type=\"module\" src=\"/src/main.tsx\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\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/index.tsx` or `src/main.tsx`):\n\n```tsx\nif (process.env.NODE_ENV === \"development\") {\n  import(\"react-grab\");\n}\n```\n\n## Extending React Grab\n\nReact Grab exposes the `__REACT_GRAB__` API for extending functionality with plugins, hooks, actions, themes, and custom agents.\n\nSee [`packages/react-grab/src/types.ts`](https://github.com/aidenybai/react-grab/blob/main/packages/react-grab/src/types.ts) and [`packages/react-grab/src/core/plugin-registry.ts`](https://github.com/aidenybai/react-grab/blob/main/packages/react-grab/src/core/plugin-registry.ts) for reference.\n\nOr copy this into an agent to generate a plugin:\n\n```md\nClone https://github.com/aidenybai/react-grab into /tmp\n\nCheck these files for reference:\n\n- packages/react-grab/src/types.ts (Plugin and PluginHooks interfaces)\n- packages/react-grab/src/core/plugin-registry.ts (implementation)\n\nPlugins are registered via `__REACT_GRAB__.registerPlugin({ name, hooks, actions, theme })`.\n\nAdd the code in client-side code (e.g., \"use client\" in Next.js) inside a useEffect after React Grab loads.\n\nGenerate an example plugin that logs when an element is selected.\n```\n\n## Resources \u0026 Contributing Back\n\nWant to try it out? Check out [our demo](https://react-grab.com).\n\nLooking to contribute back? Check out the [Contributing Guide](https://github.com/aidenybai/react-grab/blob/main/CONTRIBUTING.md).\n\nWant to talk to the community? Hop in our [Discord](https://discord.com/invite/G7zxfUzkm7) and share your ideas and what you've built with React Grab.\n\nFind a bug? Head over to our [issue tracker](https://github.com/aidenybai/react-grab/issues) 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://github.com/aidenybai/react-grab/blob/main/.github/CODE_OF_CONDUCT.md).\n\n[**→ Start contributing on GitHub**](https://github.com/aidenybai/react-grab/blob/main/CONTRIBUTING.md)\n\n### License\n\nReact Grab is MIT-licensed open-source software.\n\n_Thank you to [Andrew Luetgers](https://github.com/andrewluetgers) for donating the `grab` npm package name._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faidenybai%2Freact-grab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faidenybai%2Freact-grab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faidenybai%2Freact-grab/lists"}