react-analyzer-mcp

Analyze & generate docs for React code using the Model Context Protocol. Based on react-analyzer library.

What it does

This tool analyzes React component files (JSX/TSX) and extracts information about components and their props.

Related MCP server: Project Explorer MCP Server

Available Tools

analyze-react: Analyzes a single React component from source code
analyze-project: Generates documentation for all React components in a project folder
list-projects: Lists all projects under the root folder

Installation

# 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

Using with Claude

Enable MCP server in the Claude Desktop config:

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

Connect Claude to your MCP server using the Claude Shell.
Use the tools directly in Claude conversations:

Analyze my project's React components in the "ui" folder.

Or:

What React components do I have in my project?

Examples

Analyzing a project folder:

Input:

Can you analyze the components in my "foobar" folder?

Output:

# Components ## Button ### Props | Prop | Type | Optional | Default | |------|------|----------|---------| | `variant` | `string` | ✓ | `primary` | | `size` | `string` | ✓ | `md` | | `onClick` | `function` | ✓ | | ...