react-analyzer-mcp

by azer

反応アナライザーMCP

モデルコンテキストプロトコルを使用してReactコードの分析とドキュメント生成を行います。react -analyzerライブラリをベースにしています。

何をするのか

このツールは、React コンポーネント ファイル (JSX/TSX) を分析し、コンポーネントとそのプロパティに関する情報を抽出します。

利用可能なツール

  • analyze-react : ソースコードから単一のReactコンポーネントを解析する
  • analyze-project : プロジェクトフォルダ内のすべてのReactコンポーネントのドキュメントを生成します
  • list-projects : ルートフォルダの下にあるすべてのプロジェクトを一覧表示します

インストール

# 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

クロードと一緒に使う

  1. Claude Desktop 構成で MCP サーバーを有効にします。
{ "react-analyzer-mcp": { "command": "node", "args": [ "/Users/azer/code/sandbox/react-analyzer-mcp/build/index.js" ] } }
  1. Claude Shell を使用して、Claude を MCP サーバーに接続します。
  2. Claude の会話でツールを直接使用します。
Analyze my project's React components in the "ui" folder.

または:

What React components do I have in my project?

プロジェクト フォルダーの分析:

入力:

Can you analyze the components in my "foobar" folder?

出力:

# Components ## Button ### Props | Prop | Type | Optional | Default | |------|------|----------|---------| | `variant` | `string` | ✓ | `primary` | | `size` | `string` | ✓ | `md` | | `onClick` | `function` | ✓ | | ...

ライセンス

マサチューセッツ工科大学

-
security - not tested
-
license - not tested
-
quality - not tested
  • Reactプロジェクトをローカルで分析する
  • AST解析+AIによる一貫した出力
  • Reactコード用のマークダウンドキュメント、llm.txtをすぐに作成します
  1. 何をするのか
    1. 利用可能なツール
      1. インストール
        1. クロードと一緒に使う
            1. プロジェクト フォルダーの分析:
          1. ライセンス

            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