React Analyzer MCP

🚀 React Analyzer MCP

Analyze and generate React code documentation using the Model Context Protocol. Built on the react-analyzer library.

🚀 Quick Start

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

✨ Features

Available Tools

• analyze-react: Analyze a single React component from source code.
• analyze-project: Generate documentation for all React components in a project folder.
• list-projects: List 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

💻 Usage Examples

Using with Claude

1. Enable the MCP server in the Claude Desktop configuration:

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

2. Connect to your MCP server using Claude Shell.
3. Use these tools directly in a Claude conversation:

Analyze the React components in the "ui" folder of my project.

Or:

What React components do I have in my project?

Analyzing a Project Folder

Basic Usage

Input:

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

Output:

# Components

## Button

### Properties

| Property | Type | Optional | Default Value |
|----------|------|----------|---------------|
| `variant` | `string` | ✓ | `primary` |
| `size` | `string` | ✓ | `md` |
| `onClick` | `function` | ✓ | |
...

📄 License

This project is licensed under the MIT license.