react-analyzer-mcp

react-analyzer-mcp

Analyze and generate documentation for React components with Model Context Protocol integration.

51
Stars
3
Forks
51
Watchers
0
Issues
react-analyzer-mcp analyzes React component source files (JSX/TSX) to extract information about components and their props. It features tools for analyzing individual components or entire project folders and can generate structured documentation automatically. The tool is designed to operate as an MCP (Model Context Protocol) server and integrates with AI assistants like Claude to provide real-time, context-aware analysis. Installation and usage workflows are streamlined for project integration, supporting both CLI and conversational interfaces.

Key Features

Analyzes React component files (JSX/TSX)
Extracts component and prop information
Generates project-wide documentation
Single file and project folder analysis tools
Lists all projects under root folder
Integrates as an MCP server for AI agents
Works with Claude AI Desktop and Shell
Customizable project root configuration
Supports command-line usage
Structured, markdown-style output

Use Cases

Automatic generation of documentation for React components
Assisting developers in understanding and onboarding to React codebases
Real-time analysis of code during conversations with AI assistants
Auditing projects for prop type and default value consistency
Enhancing code review by highlighting component usage
Integrating React analysis into CI workflows via CLI
Exploring large codebases to catalog available components
Supporting AI-powered coding assistants with context on React projects
Identifying component prop requirements across a project
Providing structured responses to natural language queries about project components

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

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"
      ]
    }
}
  1. Connect Claude to your MCP server using the Claude Shell.

  2. 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

Star History

Star History Chart

Repository Owner

azer
azer

User

Repository Details

Language TypeScript
Default Branch main
Size 10 KB
Contributors 1
MCP Verified Nov 12, 2025

Programming Languages

TypeScript
100%

Tags

Join Our Newsletter

Stay updated with the latest AI tools, news, and offers by subscribing to our weekly newsletter.

We respect your privacy. Unsubscribe at any time.

Related MCPs

Discover similar Model Context Protocol servers

  • 21st.dev Magic AI Agent

    21st.dev Magic AI Agent

    Instantly create and enhance UI components through natural language in your IDE.

    21st.dev Magic AI Agent enables developers to generate, preview, and integrate modern UI components using natural language commands directly within popular IDEs. It leverages the Model Context Protocol for seamless interoperability, supporting automated installation and configuration across tools like VSCode, Cursor, Windsurf, and Cline. With a vast library based on 21st.dev assets and advanced features such as TypeScript support and real-time previews, it streamlines the UI development workflow. The solution also supports customization, enhancements, and integration of brand assets through SVGL.

    • 3,919
    • MCP
    • 21st-dev/magic-mcp
  • Agentset MCP

    Agentset MCP

    Open-source MCP server for Retrieval-Augmented Generation (RAG) document applications.

    Agentset MCP provides a Model Context Protocol (MCP) server designed to power context-aware, document-based applications using Retrieval-Augmented Generation. It enables developers to rapidly integrate intelligent context retrieval into their workflows and supports integration with AI platforms such as Claude. The server is easily installable via major JavaScript package managers and supports environment configuration for namespaces, tenant IDs, and tool descriptions.

    • 22
    • MCP
    • agentset-ai/mcp-server
  • @bldbl/mcp

    @bldbl/mcp

    Official MCP client for integrating AI assistants with Buildable projects.

    @bldbl/mcp enables AI assistants like Claude and GPT to directly interact with Buildable projects using the Model Context Protocol (MCP). It provides full project context, smart task management, real-time progress tracking, and facilitates seamless communication between AI and human developers. TypeScript support and CLI tools ensure robust integration, making it ready for platforms like Claude Desktop and Cursor AI. The tool simplifies AI-driven project management and collaboration in software development.

    • 8
    • MCP
    • chunkydotdev/bldbl-mcp
  • MCP Status Observer

    MCP Status Observer

    Monitor and query real-time operational status of digital platforms using Model Context Protocol.

    MCP Status Observer enables real-time monitoring and querying of service status for major digital platforms and AI providers through the Model Context Protocol (MCP). It supports integration with tools like Claude Desktop for streamlined status checks, incident tracking, and impact analysis across a range of platforms including GitHub, Slack, OpenAI, and Cloudflare. The tool provides detailed component-level insights, incident histories, and resolution statuses, empowering rapid awareness of operational issues and outages.

    • 5
    • MCP
    • imprvhub/mcp-status-observer
  • codelogic-mcp-server

    codelogic-mcp-server

    Leverage CodeLogic’s dependency data for AI-powered impact analysis.

    Codelogic-mcp-server implements an MCP (Model Context Protocol) server, enabling integration of CodeLogic's software dependency data into AI programming assistants. It provides tools for code and database impact assessments by interacting with a CodeLogic server, enhancing context-aware code and database analysis. The server supports integration with popular IDEs, including VS Code and Claude Desktop, using Astral UV/UVX for communication. This solution is designed to bring actionable dependency insights to AI coding workflows.

    • 31
    • MCP
    • CodeLogicIncEngineering/codelogic-mcp-server
  • MCP Claude Code

    MCP Claude Code

    Claude Code-like functionality via the Model Context Protocol.

    Implements a server utilizing the Model Context Protocol to enable Claude Code functionality, allowing AI agents to perform advanced codebase analysis, modification, and command execution. Supports code understanding, file management, and integration with various LLM providers. Offers specialized tools for searching, editing, and delegating tasks, with robust support for Jupyter notebooks. Designed for seamless collaboration with MCP clients including Claude Desktop.

    • 281
    • MCP
    • SDGLBL/mcp-claude-code
  • Didn't find tool you were looking for?

    Be as detailed as possible for better results