Analyzes React component files (JSX/TSX) to extract component information and props, enabling documentation generation for React components in a project.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@react-analyzer-mcp analyze the React components in my ui folder"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Analyze & generate docs for React code using the Model Context Protocol. Based on react-analyzer library.
This tool analyzes React component files (JSX/TSX) and extracts information about components and their props.
Related MCP server: Local DeepWiki MCP Server
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
# 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 buildEnable 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?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` | ✓ | |
...MIT
This server cannot be deployed
AI-powered codebase analysis — call graphs, security, dead code, complexity. 150+ tools.
Code intelligence for LLMs. Analyze, search, and retrieve code from any public git repository.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Generate and validate a .specs/ bundle for your repo, then hand it to your AI coding agent
