React Grab

画面上の要素を選んで、コンテキストをコーディングエージェントに渡す。Cursor / Copilot 等を最大約 3 倍速・高精度に。

1 — 概要
何か

React Grab は、ウェブ画面上の UI 要素を「指定」し、そのコンテキスト（ファイル名・React コンポーネント名・HTML ソース）をクリップボードにコピーして、Cursor・Claude Code・Copilot などのコーディングエージェントに貼り付けるためのライブラリとエコシステム。ホバーして ⌘C / Ctrl+C で要素を選ぶと、エージェント用のコンテキストが即コピーされ、エージェントの精度・速度向上（公式では最大約 3 倍）を狙う。

⌘Cホットキー
Solidコア UI
Plugin拡張
MCP連携

コアは packages/react-grab（Solid.js ベースのオーバーレイ・選択ラベル・コンテキスト解決・コピー）。CLI（grab）と各 provider-* でエージェント・MCP・拡張とつなぐ構成。

2 — パッケージ構成
モノレポ
パッケージ説明
react-grabコアライブラリ。要素選択・コンテキスト取得・コピー・プラグイン API。Solid.js で UI/状態。
grabCLI。npx grab init / npx grab add mcp でプロジェクトに導入。
@react-grab/clireact-grab から利用する CLI 機能。
provider-cursor, provider-copilot 等各コーディングエージェント向け連携パッケージ。
mcpMCP（Model Context Protocol）連携。
web-extensionブラウザ拡張。
3 — 使い方
導入

プロジェクトルート（next.config.ts や vite.config.ts がある場所）で:

npx -y grab@latest init

MCP に接続する場合:

npx -y grab@latest add mcp
操作

開発サーバー起動後、画面上の任意の要素にホバーして ⌘C（Mac）または Ctrl+C（Windows/Linux）を押すと、その要素のコンテキストがクリップボードにコピーされる。例:

<a class="ml-auto inline-block text-sm" href="#">
  Forgot your password?
</a>
in LoginForm at components/login-form.tsx:46:19
4 — コア API
エントリ

init(options?: Options): ReactGrabAPI で初期化。ブラウザ外では Noop API が返る。window.__REACT_GRAB__ に API が露出し、プラグイン登録はここから行う。

主な API（ReactGrabAPI）

  • activate / deactivate / toggle
  • copyElement(elements) — 要素のコンテキストをコピー
  • getSource(element) / getStackContext(element)
  • registerPlugin / unregisterPlugin、setOptions、getState、dispose
プリミティブ

react-grab/primitives から getElementContext、freeze / unfreeze、openFile、型 ReactGrabElementContext を利用できる。自前の「要素選択 UI」を組みたいときに使用。

公式