React 分析器 MCP

使用 Model Context Protocol 分析并生成 React 代码文档。基于 react-analyzer 库。

功能

此工具分析 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

# 更新 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` | ✓ | |
...

许可证

MIT