Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@react-perf-mcp review performance of src/components/Cart.tsx"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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.
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 |
MemoAgent | Incorrect |
BundleAgent | Heavy imports, missing |
ProfilerAgent | Cascading re-renders, missing virtualization, state co-location, |
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
npx react-perf-mcp initThe 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
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-..."
}
}
}
}Once configured, talk to your MCP client naturally:
review the performance of src/components/Cart.tsxanalyze this component for re-render issues:
[paste code]Tool | Description |
| Read a file from disk and analyze it |
| Analyze a code snippet directly |
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.
Node.js 18+
Anthropic API key (get one here)
Issues and PRs welcome. Each agent lives in src/agents/ — adding a new one is straightforward.
MIT
Analyze a React/TypeScript code snippet for performance issues using parallel AI agents (re-renders, memoization, bundle size, profiling patterns)
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | The React component code to analyze | |
| filePath | No | Optional file path hint for context (used to locate .react-perf.json and package.json) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It does disclose a notable behavioral trait ('using parallel AI agents'), which adds transparency. However, it lacks other behavioral details such as whether it is read-only, how results are returned, or any side effects. The mention of parallel agents is useful but incomplete.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that front-loads the core action and then lists specific areas of analysis. There is no redundant or extra information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has no output schema or annotations, so the description is the main source of context. It covers what the tool does and the primary focus areas, but it does not describe the output format, prerequisites, or limitations. For a simple two-parameter tool, it is adequate but leaves some gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% for both parameters, so the baseline is 3. The description does not add any additional semantics beyond what the schema already provides for 'code' and 'filePath'. It does not explain how the parameters interact or when to use them.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states a specific action ('Analyze a React/TypeScript code snippet') and resource (React/TypeScript code), with explicit focus areas (re-renders, memoization, bundle size, profiling patterns). It distinguishes from sibling 'review_file' by targeting snippets rather than files.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The use case is implied: it's for analyzing code snippets, while 'review_file' presumably handles full files. However, there is no explicit 'when to use' or 'when not to use' guidance, and no alternative is named. The implication is moderate but not explicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Analyze a React/TypeScript file for performance issues by reading it from disk
| Name | Required | Description | Default |
|---|---|---|---|
| path | Yes | Absolute or relative path to the React component file |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
There are no annotations, so the description must disclose behavior. It states 'by reading it from disk', which indicates a read-only operation and no modification to the file. However, it does not disclose return value format, potential side effects, or required permissions/context.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, direct sentence that immediately conveys purpose and method. It is concise with no unnecessary words and well-front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool is simple with one parameter, but no output schema exists and the description does not specify what the analysis returns (e.g., a report, list of issues). Given the read/analysis nature, this return value gap makes it incomplete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the schema already fully defines the 'path' parameter. The description adds minimal additional meaning, just reinforcing that it's a React/TypeScript file, which is already in the schema. Baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states a specific verb ('Analyze'), a specific resource ('React/TypeScript file'), and the focus ('performance issues'). It also distinguishes itself from sibling 'review_code' by specifying file-level analysis via reading from disk.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus the sibling 'review_code'. The description implies usage for performance analysis of a file, but does not explicitly state when to prefer this tool or any alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
The two tools are clearly differentiated by input: one accepts a code snippet directly, the other reads a file from disk. While they share the same review purpose, the distinct input mechanisms prevent meaningful confusion.
Both tool names follow the consistent verb_noun pattern (review_code, review_file), making the naming predictable and easy to understand.
With only two tools, the server feels minimal for its intended scope. The count is borderline but acceptable for a focused performance-review utility, though it could benefit from additional entry points.
The tool surface covers two common input modes but lacks broader workflow support, such as analyzing a project directory, comparing branches, or generating reports. Agents may need to work around these missing capabilities.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
MCP server for building and testing AI agents with multi-model experimentation and insights.
MCP server connecting AI agents to 100+ apps (Gmail, Slack, Notion, GitHub) via one-click OAuth.
The Polar Signals MCP server enables AI assistants to connect directly with performance profiling data, allowing users to analyze application performance through natural language queries. Key capabilities include querying CPU performance and memory usage, exploring profiling metadata like profile types and labels, and providing AI-driven code optimization suggestions directly within development environments like Claude Code or Cursor.
MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/cma0232/react-perf-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
