https://github.com/aidenybai/react-grab
Grab any element on in your app and give it to Cursor, Claude Code, etc
https://github.com/aidenybai/react-grab
ai coding react react-grab
Last synced: about 2 months ago
JSON representation
Grab any element on in your app and give it to Cursor, Claude Code, etc
- Host: GitHub
- URL: https://github.com/aidenybai/react-grab
- Owner: aidenybai
- License: mit
- Created: 2025-10-17T10:08:55.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-10-24T18:04:28.000Z (2 months ago)
- Last Synced: 2025-10-24T18:24:29.313Z (2 months ago)
- Topics: ai, coding, react, react-grab
- Language: TypeScript
- Homepage: https://react-grab.com
- Size: 3.56 MB
- Stars: 93
- Watchers: 0
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - aidenybai/react-grab - Select context for coding agents directly from your website (TypeScript)
README
# 
React Grab
[](https://bundlephobia.com/package/react-grab)
[](https://npmjs.com/package/react-grab)
[](https://npmjs.com/package/react-grab)
> [**Install using Cursor**](https://cursor.com/link/prompt?text=1.+Search+in+this+codebase+for+the+project%0A2.+Determine+if+the+project+is+using+Next.js+app%2Fpages+router%2C+or+Vite%2C+or+something+else%0A3.+Scrape%3A+https%3A%2F%2Fraw.githubusercontent.com%2Faidenybai%2Freact-grab%2Frefs%2Fheads%2Fmain%2FREADME.md%0A4.+Find+the+installation+instructions+in+the+scraped+content+and+install+it+in+the+user%27s+project%0A)
Grab any element on in your app and give it to Cursor, Claude Code, etc. to change.
By default coding agents cannot access elements on your page. React Grab fixes this - just point and click to provide context!
- Hold ⌘C and click on any element on your page
- Works with Cursor, Claude Code, OpenCode
- Just a single script tag (it’s just JavaScript!)
### [Try out a demo! →](https://react-grab.com)
## Install
> [**Install using Cursor**](https://cursor.com/link/prompt?text=1.+Search+in+this+codebase+for+the+project%0A2.+Determine+if+the+project+is+using+Next.js+app%2Fpages+router%2C+or+Vite%2C+or+something+else.+Then%2C+modify+their+files+based+on+the+framework%3A%0A%0ANext.js+%28App+router%29%0A%0AAdd+this+inside+of+your+%60app%2Flayout.tsx%60%3A%0A%0A%60%60%60jsx%0Aimport+Script+from+%22next%2Fscript%22%3B%0A%0Aexport+default+function+RootLayout%28%7B+children+%7D%29+%7B%0A++return+%28%0A++++%3Chtml%3E%0A++++++%3Chead%3E%0A++++++++%7B%2F*+put+this+in+the+%3Chead%3E+*%2F%7D%0A++++++++%7Bprocess.env.NODE_ENV+%3D%3D%3D+%22development%22+%26%26+%28%0A++++++++++%3CScript%0A++++++++++++src%3D%22%2F%2Funpkg.com%2Freact-grab%2Fdist%2Findex.global.js%22%0A++++++++++++crossOrigin%3D%22anonymous%22%0A++++++++++++strategy%3D%22beforeInteractive%22%0A++++++++++++data-enabled%3D%22true%22%0A++++++++++%2F%3E%0A++++++++%29%7D%0A++++++++%7B%2F*+rest+of+your+scripts+go+under+*%2F%7D%0A++++++%3C%2Fhead%3E%0A++++++%3Cbody%3E%7Bchildren%7D%3C%2Fbody%3E%0A++++%3C%2Fhtml%3E%0A++%29%3B%0A%7D%0A%60%60%60%0A%0A%23%23%23%23+Next.js+%28Pages+router%29%0A%0AAdd+this+into+your+%60pages%2F_document.tsx%60%3A%0A%0A%60%60%60jsx%0Aimport+%7B+Html%2C+Head%2C+Main%2C+NextScript+%7D+from+%22next%2Fdocument%22%3B%0A%0Aexport+default+function+Document%28%29+%7B%0A++return+%28%0A++++%3CHtml+lang%3D%22en%22%3E%0A++++++%3CHead%3E%0A++++++++%7B%2F*+put+this+in+the+%3CHead%3E+*%2F%7D%0A++++++++%7Bprocess.env.NODE_ENV+%3D%3D%3D+%22development%22+%26%26+%28%0A++++++++++%3CScript%0A++++++++++++src%3D%22%2F%2Funpkg.com%2Freact-grab%2Fdist%2Findex.global.js%22%0A++++++++++++crossOrigin%3D%22anonymous%22%0A++++++++++++strategy%3D%22beforeInteractive%22%0A++++++++++++data-enabled%3D%22true%22%0A++++++++++%2F%3E%0A++++++++%29%7D%0A++++++++%7B%2F*+rest+of+your+scripts+go+under+*%2F%7D%0A++++++%3C%2FHead%3E%0A++++++%3Cbody%3E%0A++++++++%3CMain+%2F%3E%0A++++++++%3CNextScript+%2F%3E%0A++++++%3C%2Fbody%3E%0A++++%3C%2FHtml%3E%0A++%29%3B%0A%7D%0A%60%60%60%0A%0A%23%23%23%23+Vite%0A%0A1.+Run+%60npm+i+react-grab%40latest%60%0A2.+Add+this+to+your+%60vite.config.ts%60%3A%0A%0A%60%60%60ts%0A%2F%2F+...%0Aimport+%7B+reactGrab+%7D+from+%22react-grab%2Fplugins%2Fvite%22%3B%0A%0Aexport+default+defineConfig%28%7B%0A++plugins%3A+%5B%0A++++%2F%2F+add+react+grab+as+a+plugin%0A++++reactGrab%28%29%2C%0A++%5D%2C%0A%7D%29%3B%0A%60%60%60%0A%0A3.+If+no+framework+or+project+available%2C+ask+the+user+where+it+is+or+what+it+is.+If+there+is+a+project+but+no+framework%2C+then+use%3A%0A%0A%60%60%60html%0A%3Cscript%0A++src%3D%22%2F%2Funpkg.com%2Freact-grab%2Fdist%2Findex.global.js%22%0A++crossorigin%3D%22anonymous%22%0A++data-enabled%3D%22true%22%0A%3E%3C%2Fscript%3E%0A%60%60%60%0A%0ATo+install)
Get started in 1 minute by adding this script tag to your app:
```html
```
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`:
```jsx
import Script from "next/script";
export default function RootLayout({ children }) {
return (
{/* put this in the */}
{process.env.NODE_ENV === "development" && (
)}
{/* rest of your scripts go under */}
{children}
);
}
```
#### Next.js (Pages router)
Add this into your `pages/_document.tsx`:
```jsx
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
{/* put this in the */}
{process.env.NODE_ENV === "development" && (
)}
{/* rest of your scripts go under */}
);
}
```
#### Vite
1. Run `npm i react-grab@latest`
2. Add this to your `vite.config.ts`:
```ts
// ...
import { reactGrab } from "react-grab/plugins/vite";
export default defineConfig({
plugins: [
// add react grab as a plugin
reactGrab(),
],
});
```
## Resources & Contributing Back
Want to try it out? Check the [our demo](https://react-grab.com).
Looking to contribute back? Check the [Contributing Guide](https://github.com/aidenybai/react-grab/blob/main/CONTRIBUTING.md) out.
Want 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.
Find 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!
We 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).
[**→ Start contributing on GitHub**](https://github.com/aidenybai/react-grab/blob/main/CONTRIBUTING.md)
### License
React Grab is MIT-licensed open-source software.