react-analyzer-mcp

Name: react-analyzer-mcp
Author: azer

本地服务

github.com/azer开发工具5881 周前更新

代码仓库

关于 react-analyzer-mcp

react-analyzer-mcp 是一个 MCP 服务，用于分析 React 组件文件（JSX/TSX）并生成文档，基于 react-analyzer 库构建，可在本地运行。

主要功能

01分析单个 React 组件的源代码
02为项目文件夹中的所有组件生成文档
03列出根目录下的项目

适用场景

01查看项目中有哪些 React 组件及其 props
02为 ui 目录下的组件生成文档

MCP 相关

该项目是一个 MCP 服务，向 MCP 客户端暴露 analyze-react、analyze-project 和 list-projects 三个工具。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

暂未收录安装方式

我们还没有获取到这个服务的安装包或远程地址，请按项目 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 搭配使用

在 Claude Desktop 配置中启用 MCP 服务：

{
    "react-analyzer-mcp": {
      "command": "node",
      "args": [
        "/Users/azer/code/sandbox/react-analyzer-mcp/build/index.js"
      ]
    }
}

使用 Claude Shell 将 Claude 连接到 MCP 服务。
在 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` | ✓ | |
...