🚀 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 许可证。