react-analyzer MCP Server

Use This MCP server To

Analyze individual React components for prop and structure details Generate full documentation for all React components in a project List all React projects under a specified root directory Integrate React component analysis into AI-assisted development workflows Automate React codebase documentation generation locally Support LLMs in understanding React code context for better code suggestions

README

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

react-analyzer-mcp FAQ

How do I install react-analyzer-mcp?

Clone the GitHub repo, install dependencies with npm, update PROJECT_ROOT in src/index.ts, then build with npm run build.

Can react-analyzer-mcp analyze both JSX and TSX files?

Yes, it supports analyzing React component files written in both JSX and TSX formats.

How does react-analyzer-mcp integrate with LLMs like Claude or Gemini?

It exposes React component data via MCP, allowing LLMs like Claude, OpenAI, and Gemini to access structured React code context for enhanced interactions.

What tools are available in react-analyzer-mcp?

It includes analyze-react for single components, analyze-project for full project docs, and list-projects to list projects under a root folder.

Is react-analyzer-mcp suitable for large React codebases?

Yes, it can generate documentation for entire projects, making it scalable for large React codebases.

Does react-analyzer-mcp require internet access to function?

No, it runs locally, analyzing React code without needing internet connectivity.

Can I customize the root folder for project analysis?

Yes, you can set the PROJECT_ROOT path in the source code configuration before building.

What programming languages does react-analyzer-mcp support?

It focuses on React components written in JavaScript and TypeScript (JSX/TSX).