关键词

React分析代码文档生成组件信息提取项目上下文开发工具

使用说明

项目简介

react-analyzer-mcp 是一个 MCP 服务器，它利用 react-analyzer 库来分析 React 代码（JSX/TSX 文件）。该服务器提供工具，允许 LLM 客户端（如 Claude）获取 React 项目的组件信息、属性定义等，从而更好地理解和操作 React 代码库。

主要功能点

  • 分析 React 组件：从单个 React 组件源文件中提取组件名称、属性、类型、默认值等详细信息。
  • 生成项目文档：扫描指定项目文件夹，分析所有 React 组件，并生成 Markdown 格式的文档，包含组件及其属性的表格。
  • 列出项目：列出服务器配置的根目录下所有子项目（文件夹）的名称。

安装步骤

  1. 克隆仓库 
    git clone https://github.com/azer/react-analyzer-mcp.git
cd react-analyzer-mcp
  2. 安装依赖 
    npm install
  3. 配置项目根目录 编辑 'src/index.ts' 文件，根据你的实际项目根目录修改 'PROJECT_ROOT' 变量的值。例如，如果你的项目都存放在 '/Users/yourname/projects' 目录下，则修改为： 
    const PROJECT_ROOT = "/Users/yourname/projects";
  4. 构建项目 
    npm run build

服务器配置

要将此 MCP 服务器与 MCP 客户端（例如 Claude）连接，您需要在客户端配置中指定服务器的启动命令和参数。以下是一个示例配置（JSON 格式）：

{
  "react-analyzer-mcp": {
    "command": "node",
    "args": [
      "/path/to/react-analyzer-mcp/build/index.js"  // 请替换为实际的 build/index.js 文件路径
    ]
  }
}

注意：请将 '/path/to/react-analyzer-mcp' 替换为您克隆的 'react-analyzer-mcp' 仓库在您系统上的绝对路径。

基本使用方法

成功配置并连接 MCP 客户端后，您可以通过自然语言指令来调用服务器提供的工具。例如：

  • 分析项目组件：在对话中输入类似于 'Analyze my project's React components in the "ui" folder.' 的指令，服务器将分析 "ui" 文件夹下的 React 组件并返回文档。
  • 列出项目：输入类似于 'What React components do I have in my project?' 或 'List projects.' 的指令，服务器将返回项目列表。

服务器会将分析结果以 Markdown 格式返回，MCP 客户端通常能够直接渲染这些 Markdown 内容。

信息

分类

开发者工具

访问项目