react-analyzer-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

# 更新 src/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 </中文翻译>