React Analyzer MCP

1# react-analyzer-mcp
2 
3Analyze & generate docs for React code using the Model Context Protocol. Based on [react-analyzer](https://github.com/azer/react-analyzer) library.
4 
5[<img src="https://github.com/user-attachments/assets/615f43d7-9b81-4480-9a2a-773819223ddb" width="500" />](https://x.com/azerkoculu/status/1910071779457900866)
6 
7## What it does
8 
9This tool analyzes React component files (JSX/TSX) and extracts information about components and their props.
10 
11## Available Tools
12 
13- **analyze-react**: Analyzes a single React component from source code
14- **analyze-project**: Generates documentation for all React components in a project folder
15- **list-projects**: Lists all projects under the root folder
16 
17## Installation
18 
19```bash
20# Clone the repository
21git clone https://github.com/azer/react-analyzer-mcp.git
22cd react-analyzer-mcp
23 
24# Install dependencies
25npm install
26 
27# Update PROJECT_ROOT in the index.ts file.
28vim src/index.ts
29 
30# Build
31npm run build
32```
33 
34## Using with Claude
35 
361. Enable MCP server in the Claude Desktop config:
37 
38```bash
39{
40    "react-analyzer-mcp": {
41      "command": "node",
42      "args": [
43        "/Users/azer/code/sandbox/react-analyzer-mcp/build/index.js"
44      ]
45    }
46}
47```
48 
492. Connect Claude to your MCP server using the Claude Shell.
50 
513. Use the tools directly in Claude conversations:
52 
53```
54Analyze my project's React components in the "ui" folder.
55```
56 
57Or:
58 
59```
60What React components do I have in my project?
61```
62 
63## Examples
64 
65### Analyzing a project folder:
66 
67Input:
68```
69Can you analyze the components in my "foobar" folder?
70```
71 
72Output:
73```
74# Components
75 
76## Button
77 
78### Props
79 
80| Prop | Type | Optional | Default |
81|------|------|----------|---------|
82| `variant` | `string` | ✓ | `primary` |
83| `size` | `string` | ✓ | `md` |
84| `onClick` | `function` | ✓ | |
85...
86```
87 
88## License
89 
90MIT
91