React Analyzer MCP

🚀 React 分析器 MCP

React 分析器 MCP 藉助 Model Context Protocol 對 React 代碼文檔進行分析與生成。該工具基於 react-analyzer 庫開發，能有效助力開發者處理 React 組件相關事務。

🚀 快速開始

React 分析器 MCP 可分析 React 組件文件（JSX/TSX）並提取組件及其屬性的信息。以下是使用該工具的一些基本步驟：

1. 安裝工具（具體安裝步驟見下方“📦 安裝指南”）。
2. 配合 Claude 使用時，按“與 Claude 配合使用”部分的說明進行配置。
3. 利用工具提供的功能，如分析單個組件、為項目生成文檔等。

✨ 主要特性

• 此工具可分析 React 組件文件（JSX/TSX），精準提取組件及其屬性的信息。
• 提供多種實用工具，滿足不同場景需求。

📦 安裝指南

# 克隆倉庫
git clone https://github.com/azer/react-analyzer-mcp.git
cd react-analyzer-mcp

# 安裝依賴
npm install

# 更新 PROJECT_ROOT 在 index.ts 文件中。
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` | ✓ | |
...

📚 詳細文檔

可用工具

• analyze-react：從源代碼分析單個 React 組件。
• analyze-project：為項目文件夾中的所有 React 組件生成文檔。
• list-projects：列出根文件夾下的所有項目。

📄 許可證

本項目採用 MIT 許可證。