\n \n \n
\n \n \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/index.tsx` or `src/main.tsx`):\n\n```tsx\nif (process.env.node_env === \"development\") {\n import(\"react-grab\");\n}\n```\n\n## mcp server\n\nreact grab includes an mcp (model context protocol) server that gives ai coding agents direct access to your browser. this enables agents to navigate, click, fill forms, and take screenshots.\n\n### setup\n\nrun during project init:\n\n```bash\nnpx -y grab@latest init\n# when prompted, choose to add the mcp server\n```\n\nor add it separately:\n\n```bash\nnpx -y grab@latest add mcp --client cursor\n```\n\nsupported clients: `cursor`, `claude-code`, `vscode`, `opencode`, `codex`, `gemini-cli`, `windsurf`, `zed`, `droid`\n\nor add it manually to your `mcp.json` file:\n\n```json\n{\n \"mcpservers\": {\n \"react-grab-browser\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"grab\", \"browser\", \"mcp\"]\n }\n }\n}\n```\n\n### mcp tools\n\nonce configured, your agent has access to:\n\n- `browser_snapshot` - get aria accessibility tree with element refs (e1, e2...)\n- `browser_execute` - run playwright code with helpers like `ref('e1').click()`\n\n## skill\n\nfor agents that support skills (like codex), install the `react-grab` skill:\n\n```bash\nnpx -y grab@latest add skill\n# or\nnpx -y add-skill aidenybai/react-grab\n```\n\n## extending react grab\n\nreact grab uses a plugin system to extend functionality. check out the [type definitions](https://github.com/aidenybai/react-grab/blob/main/packages/react-grab/src/types.ts) to see all available options.\n\n#### basic usage\n\n```typescript\nimport { init } from \"react-grab/core\";\n\nconst api = init();\n\napi.activate();\napi.copyelement(document.queryselector(\".my-element\"));\nconsole.log(api.getstate());\n```\n\n#### lifecycle hooks plugin\n\ntrack element selections with analytics:\n\n```typescript\napi.registerplugin({\n name: \"analytics\",\n hooks: {\n onelementselect: (element) => {\n analytics.track(\"element_selected\", { tagname: element.tagname });\n },\n ondragend: (elements, bounds) => {\n analytics.track(\"drag_end\", { count: elements.length, bounds });\n },\n oncopysuccess: (elements, content) => {\n analytics.track(\"copy\", { count: elements.length });\n },\n },\n});\n```\n\n#### context menu plugin\n\nadd custom actions to the right-click menu:\n\n```typescript\napi.registerplugin({\n name: \"custom-actions\",\n actions: [\n {\n id: \"log-to-console\",\n label: \"log to console\",\n onaction: ({ elements }) => console.dir(elements[0]),\n },\n ],\n});\n```\n\n#### theme plugin\n\ncustomize the ui appearance:\n\n```typescript\napi.registerplugin({\n name: \"theme\",\n theme: {\n hue: 180, // shift colors (pink \u2192 cyan)\n crosshair: { enabled: false },\n elementlabel: { enabled: false },\n },\n});\n```\n\n#### agent plugin\n\ncreate a custom agent that processes selected elements:\n\n```typescript\napi.registerplugin({\n name: \"my-custom-agent\",\n actions: [\n {\n id: \"custom-agent\",\n label: \"ask ai\",\n onaction: ({ enterpromptmode }) => enterpromptmode?.(),\n agent: {\n provider: {\n async *send({ prompt, content }, signal) {\n yield \"analyzing element...\";\n\n const response = await fetch(\"/api/ai\", {\n method: \"post\",\n headers: { \"content-type\": \"application/json\" },\n body: json.stringify({ prompt, content }),\n signal,\n });\n\n yield \"processing response...\";\n\n const result = await response.json();\n yield `done: ${result.message}`;\n },\n },\n },\n },\n ],\n});\n```\n\n## resources & contributing back\n\nwant to try it out? check the [our demo](https://react-grab.com).\n\nlooking to contribute back? check the [contributing guide](https://github.com/aidenybai/react-grab/blob/main/contributing.md) out.\n\nwant to talk to the community? hop in our [discord](https://discord.com/invite/g7zxfuzkm7) and share your ideas and what you've build 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[**\u2192 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._", "installation_instructions": null, "categories": [ "Everything" ], "owners": [], "owner": null, "code_snippets": {}, "evaluation_results": [], "found_via_ownership_request": false, "hosting_eligible": false, "knative_enabled": false, "security_scans": [] } }