react-analyzer-mcp

react-analyzer-mcp

Model Context Protocol を使用して、React コードを解析し、ドキュメントを生成します。react-analyzer ライブラリをベースにしています。

概要

このツールは React コンポーネントファイル（JSX/TSX）を解析し、コンポーネントとその props に関する情報を抽出します。

利用可能なツール

• 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 での使用

1. Claude Desktop の設定で MCP サーバーを有効にします：

{
    "react-analyzer-mcp": {
      "command": "node",
      "args": [
        "/Users/azer/code/sandbox/react-analyzer-mcp/build/index.js"
      ]
    }
}

2. Claude Shell を使用して Claude を MCP サーバーに接続します。

3. 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` | ✓ | |
...

ライセンス

MIT