# 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

```bash
npx react-perf-mcp init
```

The setup wizard will:
1. Ask for your [Anthropic API key](https://console.anthropic.com/settings/keys)
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):

```json
{
  "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:

```json
{
  "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](https://console.anthropic.com/settings/keys))

## Contributing

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

## License

MIT