Skip to main content
Glama
azer

react-analyzer-mcp

by azer

react-analyzer-mcp

使用模型上下文协议 (Model Context Protocol) 分析并生成 React 代码文档。基于react-analyzer库。

它的作用

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

Related MCP server: Project Explorer MCP Server

可用工具

  • 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 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` | ✓ | |
...

执照

麻省理工学院

-
security - not tested
F
license - not found
-
quality - not tested

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/azer/react-analyzer-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server