JSX Prop Lookup Server

An MCP (Model Context Protocol) server that analyzes JSX prop usage in React/TypeScript codebases using AST parsing.

Features

• AST-based Analysis: Uses Babel parser for accurate JSX/TSX parsing
• Prop Usage Tracking: Find where props are used across components
• Component Analysis: Analyze prop definitions and usage patterns (supports destructuring and identifier-based props access in function/arrow components)
• TypeScript Support: Includes TypeScript interface analysis
• Identifier Param Support: Detects props accessed via identifier parameters (not just destructured), e.g., p.onClick and buttonProps.disabled inside function/arrow component bodies
• Multiple Search Options: Search by component, prop name, or analyze entire directories

Installation

Option 1: Use with npx (Recommended)

No installation required! Use directly with npx:

npx jsx-prop-lookup-mcp-server

Option 2: Install Globally

npm install -g jsx-prop-lookup-mcp-server
jsx-prop-lookup-mcp-server

Option 3: Development Setup

git clone https://github.com/your-username/jsx-prop-lookup-mcp-server.git
cd jsx-prop-lookup-mcp-server
npm install
npm run build
npm start

Usage

The server provides four main tools:

1. analyze_jsx_props

Analyze JSX prop usage in files or directories.

Parameters:

• path (required): File or directory path to analyze
• componentName (optional): Specific component name to analyze
• propName (optional): Specific prop name to search for
• includeTypes (optional): Include TypeScript type information (default: true)

2. find_prop_usage

Find all usages of a specific prop across JSX files. The directory must be an absolute path.

Parameters:

• propName (required): Name of the prop to search for
• directory (optional): Directory to search in (default: "."). Must be an absolute path.
• componentName (optional): Limit search to specific component

3. get_component_props

Get all props used by a specific component. The directory must be an absolute path.

Parameters:

• componentName (required): Name of the component to analyze
• directory (optional): Directory to search in (default: "."). Must be an absolute path.

4. find_components_without_prop

Find component instances that are missing a required prop (e.g., Select components without width prop). The directory must be an absolute path.

Parameters:

• componentName (required): Name of the component to check (e.g., "Select")
• requiredProp (required): Name of the required prop (e.g., "width")
• directory (optional): Directory to search in (default: "."). Must be an absolute path.

Example Output

{
  "summary": {
    "totalFiles": 5,
    "totalComponents": 3,
    "totalProps": 12
  },
  "components": [
    {
      "componentName": "Button",
      "file": "./src/Button.tsx",
      "props": [
        {
          "propName": "onClick",
          "componentName": "Button",
          "file": "./src/Button.tsx",
          "line": 5,
          "column": 10
        }
      ],
      "propsInterface": "ButtonProps"
    }
  ],
  "propUsages": [
    {
      "propName": "className",
      "componentName": "Button",
      "file": "./src/App.tsx",
      "line": 15,
      "column": 20,
      "value": "btn-primary"
    }
  ]
}

Component name matching

• Namespaced JSX components (e.g., UI.Select) are supported. You can target either the full dotted name (e.g., UI.Select) or the local component name (e.g., Select) in tool inputs. Results record the full dotted name where applicable.

Supported File Types

• .js - JavaScript
• .jsx - JavaScript with JSX
• .ts - TypeScript
• .tsx - TypeScript with JSX

MCP Client Configuration

Using with npx (Recommended)

Add to your MCP client configuration:

{
  "mcpServers": {
    "jsx-prop-lookup": {
      "command": "npx",
      "args": ["jsx-prop-lookup-mcp-server"]
    }
  }
}

Using with global installation

{
  "mcpServers": {
    "jsx-prop-lookup": {
      "command": "jsx-prop-lookup-mcp-server"
    }
  }
}

Using with local development

{
  "mcpServers": {
    "jsx-prop-lookup": {
      "command": "node",
      "args": ["dist/index.js"],
      "cwd": "/path/to/jsx-prop-lookup-mcp-server"
    }
  }
}

Development

npm run dev  # Run in development mode
npm run build  # Build for production
npm start  # Run built version