react-analyzer-mcp

by azer

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

  1. Enable MCP server in the Claude Desktop config:
{ "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

-
security - not tested
-
license - not tested
-
quality - not tested
  • analyze your react projects locally
  • consistent output w/ AST parsing + AI
  • create markdown docs, llm.txt for your react code at once
  1. What it does
    1. Available Tools
      1. Installation
        1. Using with Claude
          1. Examples
            1. Analyzing a project folder:
          2. License

            Related MCP Servers

            • -
              security
              F
              license
              -
              quality
              Provides tools for accessing coding style guidelines and best practices for various technologies including Java, Python, and React.
              Last updated -
              Python
            • A
              security
              F
              license
              A
              quality
              A TypeScript-based server that visualizes project directory structures in Markdown format, automatically documenting file contents with syntax highlighting and supporting customizable exclusion patterns.
              Last updated -
              1
              3
              2
              TypeScript
              • Linux
              • Apple
            • -
              security
              F
              license
              -
              quality
              Converts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
              Last updated -
              111
              1
              TypeScript
            • -
              security
              F
              license
              -
              quality
              Exposes Ant Design component documentation to Large Language Models, allowing LLMs to explore and understand Ant Design components through specialized tools for listing components, viewing documentation, inspecting props, and browsing code examples.
              Last updated -
              JavaScript
              • Apple
              • Linux

            View all related MCP servers

            ID: 6mmgi4xyxf