react-analyzer-mcp

by azer

react-analyzer-mcp

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

它的作用

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

可用工具

  • 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
-
license - not tested
-
quality - not tested
  • 在本地分析你的 React 项目
  • AST 解析 + AI 的一致输出
  • 立即为您的 React 代码创建 Markdown 文档、llm.txt
  1. 它的作用
    1. 可用工具
      1. 安装
        1. 与 Claude 一起使用
          1. 示例
            1. 分析项目文件夹:
          2. 执照

            Related MCP Servers

            • -
              security
              F
              license
              -
              quality
              Provides tools for accessing coding style guidelines and best practices for various technologies including Java, Python, and React.
              Last updated -
              Python
            • A
              security
              F
              license
              A
              quality
              A TypeScript-based server that visualizes project directory structures in Markdown format, automatically documenting file contents with syntax highlighting and supporting customizable exclusion patterns.
              Last updated -
              1
              3
              2
              TypeScript
              • Linux
              • Apple
            • -
              security
              F
              license
              -
              quality
              Converts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
              Last updated -
              111
              1
              TypeScript
            • -
              security
              F
              license
              -
              quality
              Exposes Ant Design component documentation to Large Language Models, allowing LLMs to explore and understand Ant Design components through specialized tools for listing components, viewing documentation, inspecting props, and browsing code examples.
              Last updated -
              JavaScript
              • Apple
              • Linux

            View all related MCP servers

            ID: 6mmgi4xyxf