R

React 分析器 MCP

@azer/react-analyzer-mcp
0 Stars 41 次浏览 azer 更新于 2026-08-23

- 本地分析你的 React 项目 - 通过 AST 解析 + AI 实现一致的输出 - 一次性为你的 React 代码创建 Markdown 文档和 llm.txt 文件

该服务暂未提供标准配置,请参考 README 手动接入

服务介绍

react-analyzer-mcp

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

功能介绍

该工具分析 React 组件文件(JSX/TSX)并提取有关组件及其属性的信息。

可用工具

  • analyze-react: 从源代码中分析单个 React 组件
  • analyze-project: 为项目文件夹中的所有 React 组件生成文档
  • list-projects: 列出根文件夹下的所有项目

安装

# Clone the repository
git clone https://github.com/azer/react-analyzer-mcp.git
cd react-analyzer-mcp

# Install dependencies
npm install

# Update PROJECT_ROOT in the index.ts file.
vim src/index.ts

# Build
npm run build

与 Claude 一起使用

  1. 在 Claude 桌面配置中启用 MCP 服务器:
{
    "react-analyzer-mcp": {
      "command": "node",
      "args": [
        "/Users/azer/code/sandbox/react-analyzer-mcp/build/index.js"
      ]
    }
}
  1. 使用 Claude Shell 连接到您的 MCP 服务器。

  2. 直接在 Claude 对话中使用这些工具:

Analyze my project's React components in the "ui" folder.

或者:

What React components do I have in my project?

示例

分析项目文件夹:

输入:

Can you analyze the components in my "foobar" folder?

输出:

# Components

## Button

### Props

| Prop | Type | Optional | Default |
|------|------|----------|---------|
| `variant` | `string` | ✓ | `primary` |
| `size` | `string` | ✓ | `md` |
| `onClick` | `function` | ✓ | |
...

许可证

MIT