React Analyzer MCP

What azer/react-analyzer-mcp MCP server does

azer/react-analyzer-mcp MCP server examines React component files written in JSX or TSX. Its analysis focuses on identifying components and extracting information about their props, including details such as type, optionality, and defaults when those details are available in the source.

The server exposes three MCP tools:

• analyze-react examines one React component supplied as source code.
• analyze-project processes the React components in a project folder and produces documentation for them.
• list-projects returns the projects found below the configured root folder.

Project documentation can include a component section and a props table. The repository example shows generated output for a Button component with prop names, types, optional values, and defaults.

How it works

The project is based on the react-analyzer library. MCP clients connect to the locally built server, then invoke the analysis tools in a conversation. A request can ask the client to inspect a named project folder or identify the React components available in the configured project area.

For a single component, the server receives source code and runs the component analyzer against it. For project analysis, it works from a folder under the configured root and generates documentation for all React components it finds there. list-projects provides a way to discover available project folders before requesting a broader analysis.

This makes the azer/react-analyzer-mcp MCP server suitable for creating a component reference, reviewing prop interfaces, or giving an AI assistant an inventory of an existing React codebase.

Setup and configuration

Clone the repository, install its npm dependencies, and build the TypeScript project:

git clone https://github.com/azer/react-analyzer-mcp.git
cd react-analyzer-mcp
npm install
npm run build

Before building, update PROJECT_ROOT in src/index.ts to point at the directory containing the projects to inspect. The README does not describe PROJECT_ROOT as an environment variable; it is configured directly in the source file.

After building, the documented Claude Desktop configuration starts Node with the generated build/index.js file. The example uses an absolute path to that file, so each installation must provide its own local path in the client configuration.

Limitations and notes

The provided material documents React component analysis for JSX and TSX files, rather than general JavaScript or TypeScript program analysis. Project-wide operations depend on the configured root folder and the projects located beneath it. The repository instructions require a local clone, dependency installation, and build step; no hosted endpoint or package-manager installation command is documented.

The README shows Claude Desktop as the client configuration example. It does not provide configuration examples for other MCP clients, authentication settings, environment variables, or remote deployment. The project is licensed under MIT.