react-analyzer-mcp

# react-analyzer-mcp Analyze & generate docs for React code using the Model Context Protocol. Based on [react-analyzer](https://github.com/azer/react-analyzer) library. [<img src="https://github.com/user-attachments/assets/615f43d7-9b81-4480-9a2a-773819223ddb" width="500" />](https://x.com/azerkoculu/status/1910071779457900866) ## What it does This tool analyzes React component files (JSX/TSX) and extracts information about components and their props. ## 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 ```bash # 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 1. Enable MCP server in the Claude Desktop config: ```bash { "react-analyzer-mcp": { "command": "node", "args": [ "/Users/azer/code/sandbox/react-analyzer-mcp/build/index.js" ] } } ``` 2. Connect Claude to your MCP server using the Claude Shell. 3. 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` | ✓ | | ... ``` ## License MIT