Webサイトの要素をクリックするだけ！AIコーディングエージェントに的確なコンテキストを渡す魔法のツール — react-grab

対応フレームワーク・ビルドツール

• Next.js: App Router / Pages Router 両対応
• Vite: index.html に数行追加するだけ
• Webpack: エントリーファイルでの動的インポート
• 開発環境（NODE_ENV === 'development'）でのみ動作するよう設計されている

コピーされるコンテキスト情報

選択した要素について以下の情報がクリップボードにコピーされる：

• HTML要素のソースコード
• Reactコンポーネント名
• ファイルパスと行番号

例：

<a class="ml-auto inline-block text-sm" href="#">
  Forgot your password?
</a>
in LoginForm at components/login-form.tsx:46:19

MCP（Model Context Protocol）対応

npx -y grab@latest add mcp コマンドでMCPサーバーを追加でき、AIコーディングエージェントとの直接的な連携が可能。

プラグインシステム

window.__REACT_GRAB__ APIを通じてプラグインを登録可能：

• コンテキストメニューアクション: 右クリックメニューにカスタムアクションを追加
• ツールバーメニュー項目: ツールバードロップダウンにアクションを追加
• ライフサイクルフック: onElementSelect など要素選択時のコールバック
• テーマオーバーライド: 見た目のカスタマイズ

アクションには target フィールド（"context-menu" または "toolbar"）で表示場所を制御可能。

プリミティブAPI

react-grab/primitives から基本的な機能を個別にインポートして、独自のUI要素セレクターを構築可能：

• getElementContext(element): 要素のコンテキスト情報を取得
• freeze() / unfreeze(): UI状態の凍結・解凍
• openFile(fileName, lineNumber): エディタでファイルを直接開く
• ReactGrabElementContext 型: コンポーネント名、セレクター、スタック情報を含む

パフォーマンス

• AIコーディングエージェント（Cursor, Claude Code, Copilot）の動作を最大3倍高速化
• バンドルサイズは gzip 圧縮後のサイズが非常に小さい（npm バッジで確認可能）

配布方法

• npm パッケージ: react-grab
• CDN: //unpkg.com/react-grab/dist/index.global.js（スクリプトタグでの読み込み）
• CLI: npx -y grab@latest コマンド

ライセンス

MITライセンス（商用利用を含め自由に利用可能）

コミュニティ

• Discord で開発者コミュニティが活動
• GitHubでのコントリビューション歓迎（Contributing Guide あり）

基本インストール（1コマンド）

プロジェクトのルートディレクトリ（next.config.ts や vite.config.ts がある場所）で実行：

npx -y grab@latest init

MCP接続（AIツールとの直接連携）

npx -y grab@latest add mcp

使い方

インストール後、ブラウザで任意のUI要素にカーソルを合わせて以下を押す：

• Mac: ⌘C（Cmd+C）
• Windows/Linux: Ctrl+C

要素のコンテキスト（ファイル名・Reactコンポーネント・HTMLソース）がクリップボードにコピーされます。