React Analyzer MCP

🚀 React 分析器 MCP

このツールは、Model Context Protocol を使用して React コードのドキュメントを分析および生成します。react-analyzer ライブラリに基づいています。

🚀 クイックスタート

このツールは、Model Context Protocol を使用して React コードのドキュメントを分析および生成するものです。以下に使用方法を説明します。

✨ 主な機能

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

利用可能なツール

• analyze-react：ソースコードから単一の React コンポーネントを分析します。
• analyze-project：プロジェクトフォルダ内のすべての React コンポーネントに対してドキュメントを生成します。
• list-projects：ルートフォルダ内のすべてのプロジェクトをリストします。

📦 インストール

# リポジトリをクローンする
git clone https://github.com/azer/react-analyzer-mcp.git
cd react-analyzer-mcp

# 依存関係をインストールする
npm install

# index.ts ファイル内の PROJECT_ROOT を更新する
vim src/index.ts

# ビルドする
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 を使用して MCP サーバーに接続します。
3. Claude の会話で直接これらのツールを使用します。

分析我项目“ui”文件夹中的 React 组件。

または

我在项目中有哪些 React 组件？

💻 使用例

プロジェクトフォルダの分析

基本的な使用法

入力:

你能分析我的“foobar”文件夹中的组件吗？

出力:

# コンポーネント

## ボタン

### 属性

| 属性 | タイプ | オプション | デフォルト値 |
|------|------|----------|---------|
| `variant` | `string` | ✓ | `primary` |
| `size` | `string` | ✓ | `md` |
| `onClick` | `function` | ✓ | |
...

📄 ライセンス

MIT