MCP 服务器

react-perf-mcp

An MCP server that runs parallel AI agents to analyze React components for performance issues, including unnecessary re-renders, memoization errors, bundle size problems, and profiling concerns.

README

react-perf-mcp

An MCP server that runs parallel AI agents to analyze your React components for performance issues. Works in Claude Code, Cursor, or any MCP-compatible client.

How it works

Most code review tools send your code to a single LLM and ask for a general review. react-perf-mcp runs four specialized agents in parallel, each focused on a specific performance domain:

Agent	Analyzes
RenderAgent	Unnecessary re-renders, inline objects/functions, missing `React.memo`
MemoAgent	Incorrect `useMemo`/`useCallback` usage, missing or over-memoization
BundleAgent	Heavy imports, missing `React.lazy`, full-library imports vs named imports
ProfilerAgent	Cascading re-renders, missing virtualization, state co-location, `Suspense`

All agents run in parallel and are aware of your project context (React version, bundler, Redux usage) and your team's custom rules via .react-perf.json.

Setup

npx react-perf-mcp init

The setup wizard will:

Ask for your Anthropic API key
Auto-detect Claude Desktop, Claude Code, and Cursor
Write the MCP server config to the right place

Manual config

Add to your MCP client config (e.g. ~/.claude/settings.json for Claude Code):

{
  "mcpServers": {
    "react-perf": {
      "command": "npx",
      "args": ["react-perf-mcp"],
      "env": {
        "ANTHROPIC_API_KEY": "sk-ant-..."
      }
    }
  }
}

Usage

Once configured, talk to your MCP client naturally:

review the performance of src/components/Cart.tsx

analyze this component for re-render issues:
[paste code]

Available tools

Tool	Description
`review_file(path)`	Read a file from disk and analyze it
`review_code(code, filePath?)`	Analyze a code snippet directly

Team config

Add a .react-perf.json to your project root to customize the agents' standards:

{
  "rules": {
    "memo": "always for list items and components receiving callbacks",
    "bundleLimit": "200kb per chunk",
    "lazyLoad": "required for routes and heavy third-party components"
  }
}