Home / MCP / React Analyzer MCP Server

React Analyzer MCP Server

Analyzes React components and generates documentation from JSX/TSX sources.

typescript

54stars

View on GitHub

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

You can run a dedicated MCP server to analyze React components and generate documentation from your codebase. This MCP exposes tools to inspect individual components, scan an entire project, or list available projects, making it easier to understand and document your React API surface.

How to use

To use this MCP server with an MCP client, first start the server locally and connect your client to it. In practice, you enable the MCP server in your client’s configuration, then run the client commands to analyze components from your project. You can analyze a single component, analyze all components in a folder, or list all known projects.

How to install

Prerequisites you need installed before starting: Node.js (recommended LTS) and a modern npm. Optional tooling for editing project files depends on your preferred editor.

Step 1: Clone the MCP server repository.

git clone https://github.com/azer/react-analyzer-mcp.git
cd react-analyzer-mcp

Step 2: Install dependencies.

npm install

Step 3: Update runtime configuration if needed. Set PROJECT_ROOT in the project’s index file as appropriate for your environment.

Step 4: Build the server.

npm run build

Example configuration for MCP client (stdio)

Use this configuration to run the MCP server as a local process via Node.

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

Available tools

analyze-react

Analyzes a single React component from source code to extract component details and prop information.

analyze-project

Generates documentation for all React components in a given project folder.

list-projects

Lists all projects under the configured root folder.