react-inspector-mcp

MCP server for inspecting React/TypeScript projects with ts-morph.

It helps find React components, read props and metadata, locate JSX usages, detect unused components, and inspect component dependency graphs.

Requirements

• Node.js 20+
• A React/TypeScript project with a tsconfig.json

Installation

For MCP clients, use the npm package through npx:

npx -y react-inspector-mcp

Or install it into your React project as a dev dependency:

cd C:/absolute/path/to/target-react-project
npm install -D react-inspector-mcp

For a local checkout:

git clone https://github.com/vgratsilev/react-inspector-mcp.git
cd react-inspector-mcp
npm install
npm run build

MCP Client Configuration

Production

Use the npm package through npx:

{
  "mcpServers": {
    "react-inspector-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "react-inspector-mcp"
      ]
    }
  }
}

For a project-local install, point to that project's installed package:

{
  "mcpServers": {
    "react-inspector-mcp": {
      "command": "node",
      "args": [
        "C:/absolute/path/to/target-react-project/node_modules/react-inspector-mcp/dist/index.js"
      ]
    }
  }
}

For a local compiled checkout, point to that checkout's dist/index.js:

{
  "mcpServers": {
    "react-inspector-mcp": {
      "command": "node",
      "args": [
        "C:/absolute/path/to/react-inspector-mcp/dist/index.js"
      ]
    }
  }
}

Development

Use the TypeScript entrypoint while working on this server:

{
  "mcpServers": {
    "react-inspector-mcp-dev": {
      "command": "npx",
      "args": [
        "tsx",
        "C:/absolute/path/to/react-inspector-mcp/src/index.ts"
      ]
    }
  }
}

On Windows, escaped backslashes in JSON configs are also valid.

Tool Call Example

After connecting the server, pass the target React project path in tool arguments:

{
  "tool": "list_components",
  "arguments": {
    "projectPath": "C:/absolute/path/to/target-react-project",
    "limit": 20,
    "mode": "summary"
  }
}

Tools

• search_components - search paginated components by name, path, description, prop names, and prop types.
• list_components - list detected components with paginated props and metadata.
• get_component - get one component by exact name.
• get_component_report - get a compact component report with props, usages, dependencies, dependents, and risk.
• get_dependency_graph - get a bounded component dependency graph.
• find_component_usages - find JSX usages for one component.
• find_unused_components - find components without external JSX usages.
• get_component_dependencies - list components used inside one component.
• get_component_dependents - list components that use one component.

For the common agent task "what is this component and who uses it", prefer get_component_report.

Full tool inputs, outputs, scan rules, and limitations are documented in docs/REFERENCE.md.

Scripts

npm run dev
npm run build
npm start
npm test
npm run test:smoke

• npm run dev starts the MCP server from src/index.ts using tsx.
• npm run build compiles TypeScript into dist.
• npm start starts the compiled MCP server from dist/index.js.
• npm test runs fixture-based tool tests.
• npm run test:smoke packs and installs the package into a temporary project, then checks the MCP stdio handshake and list_components.

Project Docs

• Tool reference
• Roadmap