azer/react-analyzer-mcp
💻 Developer Tools🟢 Verified Active
0 Views
0 Installs
📇 🏠 - Analyze React code locally, generate docs / llm.txt for whole project at once
Quick Install
One-Click IDE Configuration
claude_desktop_config.json
{
"mcpServers": {
"azer-react-analyzer-mcp": {
"command": "npx",
"args": [
"-y",
"azer-react-analyzer-mcp"
]
}
}
}Or
Using an AI coding agent (Claude Code, Cursor, etc.)? Copy a ready-made prompt that tells it to fetch the setup instructions and install this server for you.
Documentation Overview
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.
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` | ✓ | |
...
License
MIT