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:

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.

Related MCP server: react-native-dev-mcp

Setup

npx react-perf-mcp init

The setup wizard will:

1. Ask for your Anthropic API key

2. Auto-detect Claude Desktop, Claude Code, and Cursor

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

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

This is similar to .eslintrc — commit it so your whole team gets consistent suggestions.

Requirements

• Node.js 18+

• Anthropic API key (get one here)

Contributing

Issues and PRs welcome. Each agent lives in src/agents/ — adding a new one is straightforward.

License

MIT