内容摘录
<img src="https://github.com/aidenybai/react-grab/blob/main/.github/public/logo.png?raw=true" width="60" align="center" /> React Grab
size
version
downloads
Select context for coding agents directly from your website
How? Point at any element and press **⌘C** (Mac) or **Ctrl+C** (Windows/Linux) to copy the file name, React component, and HTML source code.
It makes tools like Cursor, Claude Code, Copilot run up to **3× faster** and more accurate.
Try out a demo! →
!React Grab Demo
Install
Run this command at your project root (where next.config.ts or vite.config.ts is located):
Connect to MCP
Usage
Once installed, hover over any UI element in your browser and press:
**⌘C** (Cmd+C) on Mac
**Ctrl+C** on Windows/Linux
This 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:
Manual Installation
If you're using a React framework or build tool, view instructions below:
Next.js (App router)
Add this inside of your app/layout.tsx:
Next.js (Pages router)
Add this into your pages/_document.tsx:
Vite
Add this to your index.html:
Webpack
First, install React Grab:
Then add this at the top of your main entry file (e.g., src/index.tsx or src/main.tsx):
Plugins
React Grab can be extended with plugins. A plugin can add context menu actions, toolbar menu items, lifecycle hooks, and theme overrides.
Register a plugin via window.__REACT_GRAB__:
In React, register inside a useEffect after React Grab loads:
Actions 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:
A plugin can provide any combination of:
**actions** — context menu and/or toolbar items in a single array (use target: "toolbar" for toolbar items)
**hooks** — lifecycle callbacks like onActivate, onElementSelect, onCopySuccess, transformCopyContent, etc. (see PluginHooks)
**theme** — partial theme overrides (see Theme)
**options** — override default options like activationMode or keyHoldDuration
**setup(api)** — a function that receives the full ReactGrabAPI and can return additional config or a cleanup function
See packages/react-grab/src/types.ts for the full Plugin, PluginHooks, and PluginConfig interfaces.
Resources & Contributing Back
Want to try it out? Check out our demo.
Looking to contribute back? Check out the Contributing Guide.
Want to talk to the community? Hop in our Discord and share your ideas and what you've built with React Grab.
Find a bug? Head over to our issue tracker and we'll do our best to help. We love pull requests, too!
We expect all contributors to abide by the terms of our Code of Conduct.
**→ Start contributing on GitHub**
License
React Grab is MIT-licensed open-source software.
_Thank you to Andrew Luetgers for donating the grab npm package name._