AI导哈

React代码分析工具

基于Model Context Protocol的React代码分析与文档生成工具，可提取组件及其属性信息。

  • by azer
  • TypeScript
  • 本地部署
  • 58 星标
  • 更新于
在 GitHub 查看 azer/react-analyzer-mcp

使用说明

反应分析仪mcp

使用模型上下文协议分析和生成React代码的文档。基于 反应分析器 图书馆。

它做什么

此工具分析React组件文件（JSX/TSX）并提取有关组件及其道具的信息。

可用工具

  • 分析反应：从源代码中分析单个React组件
  • 分析项目：为项目文件夹中的所有React组件生成文档
  • 列出项目：列出根文件夹下的所有项目

安装

# 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

与克劳德一起使用

  1. 在Claude Desktop配置中启用MCP服务器：
{
    "react-analyzer-mcp": {
      "command": "node",
      "args": [
        "/Users/azer/code/sandbox/react-analyzer-mcp/build/index.js"
      ]
    }
}

  1. 使用Claude Shell将Claude连接到您的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` | ✓ | |
...

许可证

麻省理工学院

相关 MCP