React Analyzer MCP

🚀 React 分析器 MCP

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

🚀 快速开始

此工具借助 Model Context Protocol 对 React 代码文档进行分析与生成，以助力开发者更好地理解和管理 React 项目。它基于 react-analyzer 库开发，能够有效分析 React 组件文件（JSX/TSX），提取组件及其属性的信息。

✨ 主要特性

• 分析 React 组件文件（JSX/TSX）并提取组件及其属性的信息。
• 提供多种实用工具，满足不同场景下对 React 组件的分析和文档生成需求。

📦 安装指南

# 克隆仓库
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 许可证。