React Grab — Copy Any UI Element for Your AI Agent

Introduction

React Grab is an open-source developer tool that lets you point at any UI element in a running React application and extract its component tree, props, state, and styles into a structured format that AI coding agents can understand and reproduce. It bridges the gap between visual design and code by providing precise component context.

What React Grab Does

• Lets you click any element in a running React app to capture its component hierarchy
• Extracts component names, props, state values, and computed styles
• Outputs structured data that AI agents can use to reproduce or modify the component
• Works with React, Next.js, Remix, and any React-based framework
• Provides a browser DevTools panel and CLI interface for different workflows

Architecture Overview

React Grab injects a fiber inspector into the React runtime that walks the component fiber tree from any DOM element up to the root. For each component in the chain, it captures the component name, props (serialized), hooks state, and associated CSS. The output is formatted as a structured prompt context that includes the component tree, relevant imports, and styling information needed to recreate the element.

Self-Hosting & Configuration

• Install as a dev dependency in any React project
• Add the ReactGrab provider component to your app root
• Configure the activation hotkey and capture depth in the options
• Set output format (JSON, Markdown, or clipboard-ready prompt)
• Optionally connect to AI agent runtimes via the MCP server

Key Features

• One-click capture of full component context from a running app
• Captures not just markup but React-specific data (props, hooks, context)
• Smart serialization that handles circular references and large state trees
• Clipboard integration for quick paste into AI coding conversations
• MCP server mode for direct integration with coding agents

Comparison with Similar Tools

• React DevTools — inspection-focused; React Grab formats output for AI consumption
• Storybook — documents components in isolation; React Grab captures from live apps
• Screenshot-to-code tools — use visual screenshots; React Grab provides structured code data
• Browser copy-as-HTML — captures markup only; React Grab includes React-specific context

FAQ

Q: Does it work in production builds? A: It works best in development mode where React fiber data is fully available. Production builds have limited component name information.

Q: Does it capture CSS-in-JS styles? A: Yes. It extracts computed styles regardless of the styling approach (CSS modules, styled-components, Tailwind classes).

Q: Can I use it with Vue or Svelte? A: React Grab is React-specific. The fiber inspection approach is tied to React's internals.

Q: Does it affect application performance? A: The inspector is only active when grab mode is triggered. It has zero overhead during normal app usage.

Sources

• https://github.com/aidenybai/react-grab