Grab [![size](https://img.shields.io/bundlephobia/minzip/grab?label=gzip&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/package/grab) [![version](https://img.shields.io/npm/v/grab?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/grab) [![downloads](https://img.shields.io/npm/dt/grab.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/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) ![React Grab Demo](https://github.com/aidenybai/react-grab/blob/main/packages/website/public/demo.gif?raw=true) ## Install Run this command at your project root (where `next.config.ts` or `vite.config.ts` is located): ```bash npx -y grab@latest init ``` ## Connect to MCP ```bash npx -y grab@latest add 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: ```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" && (