Analyze & Model Context Protocol을 사용하여 React 코드를 위한 docs를 생성합니다. react-analyzer 라이브러리를 기반으로 합니다.

무엇 그것

이 도구는 React 구성 요소 파일 (JSX/TSX)를 분석하고 구성 요소와 그 prop에 대한 정보를 추출합니다.

사용 가능한 도구

• analyze-react: 소스 코드에서 단일 React 컴포넌트 분석
• **analyze-project **: 프로젝트 폴더의 모든 React 구성 요소에 대한 문서 생성
• ** 목록 프로젝트**: root 폴더의 모든 프로젝트 목록

설치

Claude 사용

1. Claude 데스크톱 설정에서 MCP 서버 활성화:

2. Claude Shell을 사용하여 MCP 서버에 Claude를 연결합니다.

3. Claude 대화에서 직접 도구를 사용하십시오.

또는:

예제

프로젝트 폴더 분석:

입력 :

산출:

라이센스

·

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"
      ]
    }
}

2. Connect Claude to your MCP server using the Claude Shell.

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