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: 4 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 (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-24T18:04:28.000Z (7 months ago)
- Last Synced: 2025-10-24T18:24:29.313Z (7 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)
- AiTreasureBox - aidenybai/react-grab - 03-09_6349_62](https://img.shields.io/github/stars/aidenybai/react-grab.svg)|Select context for coding agents directly from your website| (Repos)
- StarryDivineSky - aidenybai/react-grab - grab`，引入组件并提供 API key，即可在自己的项目里把 AI 助手嵌成一键即可的“右侧面板”式工具；库还内置了代码高亮、错误提示和示例页面，帮助快速上手。整体思路是把网页内容当作“一次性 context”，通过 `window`/`document.querySelectorAll` 抓取所需信息，再包装成 OpenAI 可识别的 JSON 结构并返回给前端展示；其 API 与 props 设计兼顾可读写、易配置，适合各种项目（从博客到 SaaS 产品）想在网站上实现实时 AI 编程功能时，可直接引用此仓库快速搭建。 (A01_文本生成_文本对话 / 大语言对话模型及数据)
- awesome-claude-code - aidenybai/react-grab - grab?style=flat-square&logo=github) | Select context for coding agents directly from your website | (Skills & Plugins)
README
# 
React Grab
[](https://bundlephobia.com/package/react-grab)
[](https://npmjs.com/package/react-grab)
[](https://npmjs.com/package/react-grab)
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**](https://react-grab.com/blog/intro) and more accurate.
### [Try out a demo! →](https://react-grab.com)
## Install
Run this command at your project root (where `next.config.ts` or `vite.config.ts` is located):
```bash
npx -y grab@latest init
```
Use the `-y` flag to skip interactive prompts:
```bash
npx -y grab@latest init -y
```
## Connect to Your Agent
Connect React Grab directly to your coding agent (Cursor, Claude Code, Codex, Gemini, Amp, and more):
```bash
npx -y grab@latest add [agent]
```
Or connect via MCP:
```bash
npx -y grab@latest add mcp
```
Disconnect an agent:
```bash
npx -y grab@latest remove [agent]
```
## 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:
```js
Forgot your password?
in LoginForm at components/login-form.tsx:46:19
```
## 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`:
```jsx
import Script from "next/script";
export default function RootLayout({ children }) {
return (
{process.env.NODE_ENV === "development" && (
)}
{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 (
{process.env.NODE_ENV === "development" && (
)}
);
}
```
#### Vite
Add this to your `index.html`:
```html
if (import.meta.env.DEV) {
import("react-grab");
}
```
#### Webpack
First, install React Grab:
```bash
npm install react-grab
```
Then add this at the top of your main entry file (e.g., `src/index.tsx` or `src/main.tsx`):
```tsx
if (process.env.NODE_ENV === "development") {
import("react-grab");
}
```
## Extending React Grab
React Grab exposes the `__REACT_GRAB__` API for extending functionality with plugins, hooks, actions, themes, and custom agents.
See [`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.
Or copy this into an agent to generate a plugin:
```md
Clone https://github.com/aidenybai/react-grab into /tmp
Check these files for reference:
- packages/react-grab/src/types.ts (Plugin and PluginHooks interfaces)
- packages/react-grab/src/core/plugin-registry.ts (implementation)
Plugins are registered via `__REACT_GRAB__.registerPlugin({ name, hooks, actions, theme })`.
Add the code in client-side code (e.g., "use client" in Next.js) inside a useEffect after React Grab loads.
Generate an example plugin that logs when an element is selected.
```
## Resources & Contributing Back
Want to try it out? Check out [our demo](https://react-grab.com).
Looking to contribute back? Check out the [Contributing Guide](https://github.com/aidenybai/react-grab/blob/main/CONTRIBUTING.md).
Want 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.
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.
_Thank you to [Andrew Luetgers](https://github.com/andrewluetgers) for donating the `grab` npm package name._