反応アナライザーMCP
モデルコンテキストプロトコルを使用してReactコードの分析とドキュメント生成を行います。react -analyzerライブラリをベースにしています。
何をするのか
このツールは、React コンポーネント ファイル (JSX/TSX) を分析し、コンポーネントとそのプロパティに関する情報を抽出します。
利用可能なツール
- analyze-react : ソースコードから単一のReactコンポーネントを解析する
- analyze-project : プロジェクトフォルダ内のすべてのReactコンポーネントのドキュメントを生成します
- list-projects : ルートフォルダの下にあるすべてのプロジェクトを一覧表示します
インストール
# Clone the repository
git clone https://github.com/azer/react-analyzer-mcp.git
cd react-analyzer-mcp
# Install dependencies
npm install
# Update PROJECT_ROOT in the index.ts file.
vim src/index.ts
# Build
npm run build
クロードと一緒に使う
- Claude Desktop 構成で MCP サーバーを有効にします。
{
"react-analyzer-mcp": {
"command": "node",
"args": [
"/Users/azer/code/sandbox/react-analyzer-mcp/build/index.js"
]
}
}
- Claude Shell を使用して、Claude を MCP サーバーに接続します。
- Claude の会話でツールを直接使用します。
Analyze my project's React components in the "ui" folder.
または：
What React components do I have in my project?
例
プロジェクト フォルダーの分析:
入力：
Can you analyze the components in my "foobar" folder?
出力：
# Components
## Button
### Props
| Prop | Type | Optional | Default |
|------|------|----------|---------|
| `variant` | `string` | ✓ | `primary` |
| `size` | `string` | ✓ | `md` |
| `onClick` | `function` | ✓ | |
...
ライセンス
マサチューセッツ工科大学