React Grab: copy any UI element as context for your coding agent
Copy any UI element for your agent
At a glance
- What is it?
- React Grab is an MIT-licensed tool that lets you click any element in a running React app and copy it, its source location and React context, in a form a coding agent can use. It turns pointing at UI into precise instructions for an AI assistant.
- Who is it for?
- Adopt React Grab if you develop React apps with an AI coding assistant and want to click a UI element and hand the agent its component, source location and context instead of describing it. Do not expect it to help outside React or to edit anything itself; it supplies context, and it is a development-time tool, not for production.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 27 days ago.
- What is it written in?
- Mainly TypeScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 15, 2026, and from our analysis. They are not legal advice.
DEEP OPEN-SOURCE ANALYSIS
The problem React Grab solves
Telling a coding agent to change a specific part of your app is awkward: you have to describe which element you mean, find its source file, and explain its context in words. React Grab removes that friction. It lets you click any UI element in your running React app and copy it, along with where it lives in the source and its React context, into a form an agent can consume directly, so pointing at something on screen becomes a precise instruction. The audience is React developers who use AI coding assistants and want to say change this by clicking it rather than describing it. It runs in your app during development as an overlay, and its job is translation: from a visual element you can see to the structured context, component, source location, surrounding tree, that an agent needs to act on it correctly.
From a clicked element to agent-ready context
The mechanism is a development-time overlay that inspects React's internals. When you activate React Grab and click an element, it identifies the React component behind it, resolves its source file and line, and gathers the surrounding context, then formats that into text you copy for an agent, so the assistant receives not just what the element looks like but where it is defined and how it fits the component tree. The 0.2.0 release simplified the toolbar to its Copy control while keeping a Comment action, removing an earlier style-editing panel, which signals the project narrowing to its core job of grabbing context rather than becoming a visual editor. Because it reads React's component information, it works specifically for React apps, and it produces the file and line references an agent uses to make a targeted change rather than guessing which element you meant.
Adding React Grab to a project
React Grab is distributed on npm and can be initialized with a single command or added as a dependency. The quickest start uses its initializer:
npx grab@latest initAlternatively you install it directly and include it in your app:
npm install react-grabThe README also shows adding it via a Script tag for setups that prefer that. Once integrated into your development build, you activate the overlay in the running app, click an element, and copy its context to paste into your coding agent. The first real use is initializing it, opening your app, grabbing a single component, and pasting the copied context into your assistant with a change request, which shows how the element, its source location and context arrive together so the agent can act precisely.
Where React Grab is bounded
The limitations follow from its scope. It is React-specific, reading React's component internals, so it does not help with other frameworks or plain HTML. It is a development-time tool that you add to your build and activate while working, not something for production, and it depends on your source being available so the file and line references make sense. Its value is entirely about supplying context to an agent, so it improves how well an assistant can target a change but does nothing about the change itself, that is still the agent's and your job. The 0.2.0 removal of the style panel also means it is deliberately not a visual editor; if you wanted in-browser style editing, that is out of scope now. These are the boundaries of a focused developer utility, and the project's simplification toward copy-for-agent reflects a clear sense of what it is for.
React Grab versus browser devtools and React DevTools
The alternatives are the browser's inspect tool or React DevTools plus manual copying. Browser devtools let you inspect an element and its DOM, but they do not resolve the React component's source file or format context for an agent, so you still translate that yourself. React DevTools shows the component tree and props, which is closer, but again you manually gather and phrase what the agent needs. React Grab's difference is that it packages the whole thing, click an element and get its component, source location and context in one agent-ready copy, purpose-built for the AI-assisted coding workflow. Use devtools when you are debugging for yourself; use React Grab when the goal is handing an AI assistant a precise, context-rich reference to a specific element so it can make the change you want without guessing which element or file you meant.
MIT license and cadence
React Grab is MIT-licensed, so it is freely reusable, and it is a TypeScript monorepo published on npm as react-grab with an initializer available through npx. The last push was on 2026-08-22, and the 0.2.0 release shows the project sharpening its focus by removing the style panel and keeping Copy and Comment, which is a sign of deliberate scoping rather than feature accretion. Adopt it if you develop in React and use an AI coding assistant and want to point at UI instead of describing it, add it with npx grab@latest init or npm install react-grab, grab a single element and paste its context into your agent to see the workflow, and keep it to development builds since it is a dev-time tool for feeding precise context to an assistant.
Editorial conclusion
Adopt React Grab if you develop React apps with an AI coding assistant and want to click a UI element and hand the agent its component, source location and context instead of describing it. Do not expect it to help outside React or to edit anything itself; it supplies context, and it is a development-time tool, not for production. Add it with npx grab@latest init or npm install react-grab, grab a single element, and paste the copied context into your agent with a change request to see the workflow.
Frequently asked questions
What is React Grab?
React Grab is an MIT-licensed tool that lets you click any element in a running React app and copy it, its source file and line, and its React context, in a form a coding agent can use to make a targeted change.
How do I add it?
It is on npm. Initialize it with npx grab@latest init, or install it with npm install react-grab and include it in your development build; the README also shows a Script-tag setup. Then activate the overlay and click an element to copy its context.
Does React Grab work outside React?
No. It reads React's component internals to resolve components and source locations, so it is React-specific and does not help with other frameworks or plain HTML. It is also a development-time tool, not for production.
Community notes