React Analyzer Mcp
What is React Analyzer Mcp
react-analyzer-mcp is an MCP server designed for analyzing and generating documentation for React code locally. It utilizes the Model Context Protocol and is based on the react-analyzer library.
Use cases
Use cases include analyzing a project’s React components, generating documentation for components, and understanding the props and types used within those components.
How to use
To use react-analyzer-mcp, clone the repository, install the dependencies, update the PROJECT_ROOT in the index.ts file, and build the project. Then, enable the MCP server in your Claude Desktop configuration and connect it to your MCP server.
Key features
Key features include analyzing individual React components, generating documentation for all components in a project folder, and listing all projects under the root folder.
Where to use
react-analyzer-mcp can be used in software development environments where React applications are built, particularly for documentation and analysis of React component structures.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Overview
What is React Analyzer Mcp
react-analyzer-mcp is an MCP server designed for analyzing and generating documentation for React code locally. It utilizes the Model Context Protocol and is based on the react-analyzer library.
Use cases
Use cases include analyzing a project’s React components, generating documentation for components, and understanding the props and types used within those components.
How to use
To use react-analyzer-mcp, clone the repository, install the dependencies, update the PROJECT_ROOT in the index.ts file, and build the project. Then, enable the MCP server in your Claude Desktop configuration and connect it to your MCP server.
Key features
Key features include analyzing individual React components, generating documentation for all components in a project folder, and listing all projects under the root folder.
Where to use
react-analyzer-mcp can be used in software development environments where React applications are built, particularly for documentation and analysis of React component structures.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Content
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
Dev Tools Supporting MCP
The following are the main code editors that support the Model Context Protocol. Click the link to visit the official website for more information.
