Provides tools for profiling React component rendering, detecting spurious renders, analyzing compiler efficacy, diagnosing hydration issues, evaluating external store performance, tracing state cascades, suggesting memoization, and auto-remediating performance bottlenecks via AST modifications.
Evaluates external store performance including Redux selectors, detecting unstable references and high-priority blocking tasks.
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-render-profile-mcp profile the UserList component for performance issues"
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 Autonomous Performance SRE & Auto-Remediation Engine for React, exposed as a Model Context Protocol (MCP) server. Built specifically to bridge the performance perception gap for AI coding agents (Claude, Cursor, Copilot).
When an AI agent refactors a Context Provider, changes state architecture, or hooks up a global store, it is completely blind to the runtime performance impact.
An agent can successfully pass unit tests and compile code while introducing catastrophic performance regressions:
A single state update cascading into 80 unnecessary child re-renders.
Infinite rendering loops triggered by unstable Zustand/Redux selector references.
Hydration mismatches forcing React to throw away server-rendered HTML and mount from scratch.
Unstable key props causing components to unmount and mount on every render cycle (lifecycle anomalies).
react-render-profile-mcp gives AI agents a "third eye" to dynamically measure, visualize, and auto-remediate these performance bottlenecks.
Related MCP server: react-profiler-mcp
Instead of raw JSON dumps, this server organizes performance data into structured, actionable insights across four core engineering pillars:
ts-morph)γ’ When a bottleneck is found, the agent doesn't need to manually rewrite code. The server can mutate component source code on disk:
Hoisting: Statically hoisting object and array literals out of render bodies.
Dynamic Memoization: Wrapping unstable functions and variables in useCallback and useMemo with computed dependency arrays.
ROI Wrapping: Wrapping components in React.memo only if the profiled self-time and spurious render count justify the comparison overhead (ROI > 1.5).
Rule Auditing: Scanning code to prevent compiler bailouts (detecting Date.now(), Math.random(), or render-phase useRef mutations).
Generates parent-child rendering graphs directly into the agent's chat window using the custom resource URI scheme react-profile://commits/{commitId}/cascade?profile_path={profile_path}.
Triggers are styled with distinct HSL palettes to isolate propagation channels:
π΅ Context Trigger: Blue (ocean wave)
π Zustand/Redux Store: Orange (subscriber ripple)
π΄ Props Invalidation: Red (reference mismatch)
π’ State Change: Green (emerald trigger source)
Analyzes React Server Components (RSC) Flight streams to optimize delivery:
Identifies bloated chunks (> 50KB) and sequential waterfalls.
Scans payloads for prototype traversal vulnerabilities like CVE-2025-55182 (React2Shell) exploits.
Aligns React commits with Chrome Performance timeline events using blink.user_timing markers.
Measures post-commit layout, paint, and style calculation tasks to calculate real Core Web Vitals impacts (CLS / INP estimates).
Below is a compact summary of the tools exposed by this server. All tools accept a required profile_path pointing to a React DevTools export .json.
Tool Name | Parameters | Purpose / Output |
|
| Overview of commits, total render time, spurious renders count, and lifecycle anomalies. |
|
| Lists components that rendered with identical props/state. Classifies trigger into |
|
| Computes Invalidation Index to identify where React Compiler or |
|
| Detects server-client hydration mismatches and nested Suspense fetch waterfalls. |
|
| Finds unstable useSyncExternalStore selectors and high-priority blocking sync tasks. |
|
| Traces virtual owner tree to measure propagation depth and consumer count of updates. |
|
| Provides high-ROI |
|
| Modifies AST on disk to hoist variables, wrap hooks, and apply memoization. |
|
| Statically audits component source code for React Compiler rule violations. |
|
| Parses RSC Flight logs to audit chunk sizes, waterfalls, and |
|
| Aligns React commits with Chrome trace events to calculate CLS/INP web vitals impacts. |
To get the most out of this server, add the following prompt to your agent's system instructions (e.g., in .cursorrules, Cursor System Prompt, or Claude Custom Instructions):
You are equipped with `react-render-profile-mcp`. Use it systematically whenever:
1. You make structural changes to React components, global state providers, or store selectors.
2. The user reports lag, slow input response, or UI stuttering.
3. You refactor context providers, Zustand selectors, or Redux dispatches.
Debugging Workflow:
- Ask the user to record and export a React DevTools profile (.json).
- Run `get_render_summary` to understand the scale of the problem and look for `lifecycle_anomaly: true` (unstable keys).
- Run `find_spurious_renders` and `analyze_compiler_efficacy` to pinpoint unstable prop references.
- Call the `react-profile://commits/{commitId}/cascade` resource to visualize cascades.
- Use `remediate_component` to automatically apply AST optimizations (hoisting static variables, wrapping hooks) instead of doing it manually.Open React DevTools in your browser.
Navigate to the Profiler tab.
Click the Record button (circle), interact with your application to trigger the performance issue, and click Stop.
Click the Save Profile icon (πΎ) to download the .json file.
Provide the absolute path to this file to the MCP server.
Add this to your claude_desktop_config.json:
{
"mcpServers": {
"react-render-profile": {
"command": "npx",
"args": ["-y", "react-render-profile-mcp"]
}
}
}Add an MCP server of type command:
Command: npx -y react-render-profile-mcp
ESM-Native: Built with TypeScript ESM, optimized for fast Node.js imports.
React DevTools v5 Protocol: Natively decodes serialized operations arrays, resolving fiber snapshots and name maps.
Lane Identification: Distinguishes between high-priority lane updates and concurrent transition commits (Low Priority/Idle) to prevent false-positive regression flags.
AST Modification Safety: Implements ts-morph statement manipulation blocks, avoiding common parser state corruption during multi-pass rewrites.
Developed alongside:
tailwind-context-resolver-mcp β Resolve Tailwind design tokens and validate utility classes.
v8-cpu-profile-decoder-mcp β Decode V8 CPU profiles for Node.js backend performance tuning.
MIT
Evaluates React Compiler or manual React.memo efficacy by tracking spurious renders. Calculates the Invalidation Index for each component to identify where unstable prop references trigger wasteful renders.
| Name | Required | Description | Default |
|---|---|---|---|
| profile_path | Yes | Absolute path to the React DevTools Profiler export (.json) | |
| invalid_threshold | No | Minimum invalidation index threshold to report (default: 10) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Since no annotations are provided, the description carries the burden of explaining behavior. It does so by stating that it tracks spurious renders and calculates the Invalidation Index per component, giving insight into the analysis process. It does not explicitly mention side effects, but as a pure analysis tool consuming a file, this is acceptable 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 only two sentences, front-loaded with the primary action, and every clause carries substantial meaning. There is no redundant or filler content, making it an exemplar of concise structure.
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?
With only two simple parameters and no output schema, the description adequately conveys what the tool computes and the context (React DevTools profile). It describes the Invalidation Index concept and the input source. It could be more explicit about the return format, but the phrase 'for each component' implies a per-component result, providing sufficient completeness.
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 baseline is 3. The description indirectly references the profile input ('tracking spurious renders') and the threshold concept ('wasteful renders'), but it adds no detail beyond the schema's own descriptions. The schema already labels both parameters clearly, so the description does not enhance parameter understanding.
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 ('Evaluates', 'Calculates') on a well-defined resource (React Compiler/manual React.memo efficacy, Invalidation Index). It distinguishes itself from sibling tools by focusing on efficacy evaluation via a calculated metric, not merely finding or suggesting memoization.
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 description implies a clear context: use this when you have a React DevTools Profiler export (profile_path) and want to evaluate compiler/memo efficacy. It does not explicitly name alternatives or exclusion cases, but the intended use case is evident enough that an agent can infer when this tool is appropriate.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Audits a React component file to check if it violates compiler memoization safety guidelines (e.g., Date.now(), Math.random(), useRef mutations in render, 'use no memo' bails).
| Name | Required | Description | Default |
|---|---|---|---|
| file_path | Yes | Absolute path to the React component file on disk | |
| component_name | Yes | Name of the React component to audit |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must disclose behavioral traits. The word 'Audits' implies a read-only operation, and the examples indicate the kind of checks performed. However, it does not explicitly state whether the tool modifies files, requires specific permissions, or reports results, nor what the return format is. It provides some value beyond the schema but lacks rich behavioral context, so a score of 3 is appropriate.
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, focused sentence that front-loads the verb and purpose, with inline examples that add value without verbosity. Every word earns its place, and there is no redundant or filler content. This is a model of conciseness.
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?
Given the absence of an output schema and annotations, the description should explain what the tool returns or how the audit is delivered. It only states that it 'checks' for violations, leaving the result unspecified. With two parameters fully documented, the missing output behavior makes the description incomplete for an agent deciding whether and how to invoke the tool. A score of 2 reflects this gap.
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?
The schema already provides full descriptions for both parameters (file_path and component_name), achieving 100% coverage. The tool description adds context by referring to 'React component file' and 'component to audit', but does not add syntax or format details. Since the schema already does the heavy lifting, the baseline of 3 is appropriate.
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 uses a specific verb 'Audits' and a clear resource 'React component file', and states the exact purpose: checking for violations of compiler memoization safety guidelines. It provides concrete examples (Date.now(), Math.random(), etc.), which distinguishes it from sibling tools focused on rendering, profiling, or remediation. This is a clear and differentiated purpose.
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 description implies when to use the toolβwhen you need to audit a component for memoization safetyβbut does not explicitly state when not to use it or mention alternatives. No comparisons with sibling tools like 'suggest_memoization' or 'analyze_compiler_efficacy' are provided, leaving the choice to the agent. This is a clear but non-explicit usage context, so it earns a mid-range score.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Aligns React commits with Chrome Performance trace events (re-layout, paint, style calculations) using blink.user_timing β markers to calculate Core Web Vitals (INP/CLS) impact.
| Name | Required | Description | Default |
|---|---|---|---|
| trace_path | Yes | Absolute path to Chrome performance timeline trace export (.json) | |
| profile_path | Yes | Absolute path to the React DevTools Profiler export (.json) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so the description is the sole source. It conveys a read-only analysis operation by describing alignment and calculation using blink.user_timing markers. However, it does not explicitly state that it modifies nothing, nor does it mention prerequisites, limitations, or failure modes.
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?
One compact sentence with no fluff. It front-loads the action and includes key details (input sources, marker type, output metrics) efficiently.
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?
For a two-parameter tool with no output schema, the description is largely complete: it states what it does, how (alignment via markers), and what it calculates (INP/CLS impact). It lacks explicit limitations or what happens with invalid inputs, but gives enough context for an agent to select and invoke correctly.
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 has 100% parameter coverage with detailed descriptions of both paths. The description adds minor context about using blink.user_timing markers, but does not significantly enhance meaning beyond the schema; baseline 3 is appropriate.
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?
Description uses specific verb 'Aligns' with a clear resource ('React commits with Chrome Performance trace events') and a specific outcome ('calculate Core Web Vitals impact'). This clearly distinguishes it from sibling tools focusing on rendering analysis, memoization, and state tracing.
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 context is clear: use when you have both a React DevTools profile and a Chrome trace and want to know CWV impact. It does not explicitly name alternatives or exclusions, but the specialized wording strongly implies when it applies.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Detects server-client hydration mismatches and sequential nested Suspense waterfalls by analyzing mount durations, unmount events, and timelines.
| Name | Required | Description | Default |
|---|---|---|---|
| profile_path | Yes | Absolute path to the React DevTools Profiler export (.json) | |
| waterfall_threshold_ms | No | Timeline delta threshold in ms to detect Suspense waterfalls (default: 100) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. It discloses that the tool analyzes mount durations, unmount events, and timelines, suggesting a read-only diagnostic behavior. However, it does not explicitly state whether the tool modifies the profile file, requires write permissions, or has any side effects. The methodology hint 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 main purpose and then provides the analytical approach. There is no redundancy or filler, every word contributes to understanding the tool's function.
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?
For a diagnostic tool with two well-documented parameters and no output schema, the description covers the core purpose and methodology adequately. The only minor gap is the lack of detail about return format, but given the tool's narrow scope and schema richness, it is sufficiently complete.
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%, with both profile_path and waterfall_threshold_ms clearly described in the input schema. The description adds no extra parameter information, but the schema already provides sufficient semantics, so a baseline score of 3 is appropriate.
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 uses a specific verb 'Detects' and names two distinct targets: server-client hydration mismatches and sequential nested Suspense waterfalls. It also mentions the analysis method (mount durations, unmount events, timelines), which clearly differentiates it from sibling tools like find_spurious_renders or get_render_summary.
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 description implies when to use the tool (when hydration or Suspense waterfall issues are suspected), but it does not explicitly compare with alternatives or state when not to use it. It doesn't mention exclusions or prerequisites, so guidance is present but not strongly articulated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Analyzes useSyncExternalStore performance, identifying selector reference instability and concurrency bypasses where heavy store updates block the high-priority main thread.
| Name | Required | Description | Default |
|---|---|---|---|
| profile_path | Yes | Absolute path to the React DevTools Profiler export (.json) | |
| max_blocking_task_ms | No | Maximum duration budget in ms for synchronous tasks before flagging bypass (default: 50) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden of behavioral disclosure. It does add specific context about what it detects (selector reference instability, concurrency bypasses), which goes beyond a generic 'analyze' statement. However, it does not mention whether the tool is read-only, whether it has performance implications, or what it does with the profile path. For a profiling/analysis tool, some of this is implied, but the transparency is only partial.
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, focused sentence with no unnecessary words. It front-loads the action ('Analyzes') and specifies the target resource and key outcomes, earning every word.
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?
Given the tool's moderate complexity (2 params, no output schema), the description covers the 'what' and 'why' but does not explicitly describe the return value or report structure. However, the tool name and phrasing ('identifying') imply it returns an analysis result. For a simple analysis tool, this is mostly complete, but the missing output format slightly reduces completeness.
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?
The schema description coverage is 100%, so the baseline is 3. The description adds no additional meaning to the parameters beyond what the schema already provides. The parameters are well-documented in the schema, so the description correctly relies on that.
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 the tool's specific purpose: analyzing useSyncExternalStore performance and identifying selector reference instability and concurrency bypasses. This verb+resource construction distinguishes it from sibling tools like get_render_summary or find_spurious_renders, which target broader rendering issues.
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 context is clear: this tool is for when you need to evaluate useSyncExternalStore performance and detect specific issues like selector instability or main-thread blocking. However, it does not explicitly mention alternatives or exclusions, such as 'use get_render_summary for general rendering issues' or 'not for non-external-store problems.' The implied usage is evident but not fully explicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Finds React components that re-rendered without any meaningful prop, state, context, or hook changes. These are wasted renders caused by unstable references (inline objects/functions/arrays) passed from a parent. Returns component name, total render count, spurious count, and wasted milliseconds. Use to identify the highest-ROI targets for React.memo.
| Name | Required | Description | Default |
|---|---|---|---|
| profile_path | Yes | Absolute path to the React DevTools Profiler export (.json) | |
| min_render_count | No | Only include components with at least this many total renders (default: 1) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full transparency burden. It explains what the tool detects (wasted renders from unstable references), what it returns (component name, counts, wasted milliseconds), and implies read-only analysis of a profiler export. Lacks explicit side-effect or safety declarations, but the behavior is well conveyed.
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?
Two sentences convey purpose, cause, return values, and intended use without waste. Information is front-loaded: the core function first, then outputs and guidance.
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?
For a fairly simple diagnostic tool with good schema descriptions, the description is complete. It covers what, why, return data, and when to use it. No output schema, but the description explicitly lists the return fields, eliminating ambiguity.
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% since both profile_path and min_render_count already have clear descriptions. The tool description adds no param-specific meaning, but the schema fully covers semantics, so the baseline of 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?
Description clearly states the tool finds React components that re-rendered without meaningful changes (spurious renders), specifying a distinct purpose from siblings like get_hottest_components or trace_render_cascade. It also names the specific outputs (component name, render counts), making the tool's role unambiguous.
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 description directs the agent to use this tool to identify high-ROI targets for React.memo, providing a clear use case. It does not explicitly mention when not to use it or name alternative tools, but the context is sufficient for selecting this tool over similar profiling tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Returns the top N React components ranked by self CPU time (excluding children) across the entire profiling session. Includes total self ms, average per render, and percentage of total profile time. Use to find which components are the most expensive to render, regardless of cause.
| Name | Required | Description | Default |
|---|---|---|---|
| top_n | No | Number of components to return (default: 10) | |
| profile_path | Yes | Absolute path to the React DevTools Profiler export (.json) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It reveals important behaviors: the exclusion of children from CPU time, aggregation across the entire session, and the specific output metrics. This goes beyond what the schema provides, although it does not discuss potential performance impacts or edge cases.
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 three sentences long, front-loaded with the core functionality, and every sentence provides valuable information. There is no redundancy or filler; it is appropriately sized for the tool's simplicity.
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?
Despite lacking an output schema, the description lists the return metrics (total self ms, average per render, percentage of total profile time), which covers the main output expectations. The scope and intended use are clear. A minor omission is the lack of explicit output format, but it is sufficient for a tool with only two parameters and a simple query.
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%, with both parameters already described in the input schema. The description does not add meaning beyond acknowledging the 'top N' concept and the profile path; it relies on the schema for parameter details, so the baseline score of 3 is appropriate.
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 it returns the top N React components ranked by self CPU time, explicitly excluding children, and lists the metrics included. This specific verb-resource pairing distinguishes it from siblings like find_spurious_renders or trace_render_cascade, which target different aspects of rendering behavior.
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 description provides a clear usage context: 'Use to find which components are the most expensive to render, regardless of cause.' However, it does not explicitly mention when not to use this tool or name alternative tools, so it lacks a full when-to-use/alternatives contrast.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Returns a high-level overview of a React DevTools Profiler export: total commits, total render time, top 5 slowest components by self time, and total spurious (wasted) render count. Use this first to understand the scale of the performance problem before drilling into specifics.
| Name | Required | Description | Default |
|---|---|---|---|
| profile_path | Yes | Absolute path to the React DevTools Profiler export (.json) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It discloses its read-only nature by returning a summary and lists the result fields, but it does not mention error cases (e.g., invalid file path) or any edge-case behavior. This is adequate but not rich.
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 two sentences: the first lists the output components, the second gives a single actionable usage instruction. No filler or redundant detail.
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 straightforward with one simple parameter, and the description enumerates all returned fields explicitly, compensating for the lack of an output schema. It also contextualizes when this should be used.
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?
The input schema already describes profile_path as an absolute path to the JSON export with 100% coverage. The description adds no further meaning beyond implying the file is a Profiler export, so the schema alone sufficiently defines the parameter.
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 the tool returns a high-level overview of a React DevTools Profiler export and enumerates the exact outputs: total commits, total render time, top 5 slowest components by self time, and total spurious render count. It distinguishes itself from sibling tools by positioning this as the first-step overview before drilling into specifics.
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 description explicitly instructs 'Use this first to understand the scale of the performance problem before drilling into specifics,' which provides clear when-to-use guidance. It does not name alternative tools, but the tie to 'drilling into specifics' implies the other sibling tools are for deeper analysis.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Analyzes a React Server Components (RSC) Flight stream text log. Detects bloated chunks (>50KB), sequential Waterfall request bottlenecks, and security hazards like constructor traversing exploits (CVE-2025-55182 / React2Shell).
| Name | Required | Description | Default |
|---|---|---|---|
| stream_payload | Yes | Raw line-separated Flight stream text payload |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full transparency burden. It discloses the analysis scope (bloated chunks, waterfall, security hazards) but does not explicitly state whether the tool is read-only, what output it produces, or if any side effects occur. 'Analyzes' implies non-destructive, but that is not made explicit.
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, front-loaded sentence that packs a lot of specific value (purpose, detection criteria, security references) without redundancy. Every clause adds 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 is simple with one parameter, but there is no output schema and no explicit description of return values or limitations. The description covers what it detects but not what the agent should expect in the response. This leaves a moderate gap for a specialized analysis tool.
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%, so the parameter is already well-documented. The description's mention of 'text log' adds little beyond the schema's 'Raw line-separated Flight stream text payload.' Baseline score of 3 is appropriate as the schema does the heavy lifting.
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 the tool analyzes RSC Flight stream text logs and specifies three concrete detection targets (bloated chunks, waterfall bottlenecks, security exploits). This verb-resource pairing is specific and distinguishes it from sibling tools like get_render_summary or find_spurious_renders.
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 description implies the tool should be used when analyzing RSC Flight stream logs for performance and security issues, but it does not explicitly mention alternatives or when not to use it. Clear context without exclusions aligns with a score of 4.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Automatically optimizes a React component's AST by hoisting static declarations, wrapping unstable callbacks/objects in useCallback/useMemo, and wrapping the component in React.memo if the ROI score is above 1.5. Mutates the file on disk.
| Name | Required | Description | Default |
|---|---|---|---|
| file_path | Yes | Absolute path to the React component file on disk | |
| roi_score | Yes | Estimated ROI score from profiling (usually 0 to 5) justifying memoization overhead | |
| component_name | Yes | Name of the React component to optimize | |
| unstable_props | Yes | Comma-separated or space-separated list of props to memoize/wrap in hooks |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden of behavioral disclosure. It explicitly states 'Mutates the file on disk' and lists the AST transformations performed. It could add details about irreversibility or file backup, but the core mutation behavior is clearly disclosed.
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?
Two sentences cover action, target, specific transformations, threshold condition, and mutation warning. No redundant phrasing; every clause earns its place. Front-loaded with 'Automatically optimizes' for quick comprehension.
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?
Given no output schema and a clear action-oriented role, the description is complete for a mutation tool. It covers behavior, mutation, and input semantics via the schema and description. Minor gaps include error handling and rollback details, but these are not critical given the schema and sibling context.
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 baseline is 3. The description adds value by explaining the ROI threshold (1.5) that triggers React.memo and clarifies that unstable_props are wrapped in hooks, providing context beyond the individual property descriptions.
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 that the tool automatically optimizes a React component's AST with specific transformations (hoisting, useCallback/useMemo, React.memo). This distinguishes it from all sibling analysis tools, which focus on profiling and diagnosis rather than modification.
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 description gives a condition for using the tool (ROI score above 1.5) but does not explicitly state when to use it instead of sibling tools like suggest_memoization or diagnose_hydration_and_suspense. It implies usage after profiling, but lacks explicit exclusions or alternative guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Analyzes the profiling data and returns concrete memoization suggestions. Currently detects React.memo candidates: components with spurious renders above the wasted ms threshold. Each suggestion explains why the component re-renders unnecessarily and what to do about it.
| Name | Required | Description | Default |
|---|---|---|---|
| profile_path | Yes | Absolute path to the React DevTools Profiler export (.json) | |
| min_wasted_ms | No | Only suggest for components wasting more than this many ms total (default: 0) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the burden. It adequately discloses non-mutating analysis behavior, the current React.memo-only scope, and the content of returned suggestions (why and what to do). This sets proper expectations.
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?
Three sentences, front-loaded with the main purpose, and no filler. Each sentence adds value: what the tool does, the current detection scope, and what each suggestion contains.
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?
For a two-parameter read-only analysis tool with no output schema, the description is adequately complete. It explains the input purpose, the threshold semantics, and the nature of the output. It doesn't describe exact return format, but the high-level explanation is sufficient for tool selection and invocation.
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%, so the schema already documents both parameters. The description adds a little extra context by linking 'wasted ms threshold' to min_wasted_ms, but it doesn't add meaning beyond what the schema provides.
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 uses a specific verb ('Analyzes...returns') and names the resource ('profiling data') and concrete output ('memoization suggestions', 'React.memo candidates'). It is clear and distinct from siblings like find_spurious_renders, though it doesn't explicitly name alternatives.
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 description implies the tool is for use when you want memoization suggestions from profiling data, but it provides no explicit when-not-to-use guidance or alternatives. Context is clear enough, but it lacks exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
For a specific React commit (render cycle), shows what triggered it and lists every component that re-rendered as a result, sorted by actual duration descending. Reveals propagation β e.g. a context update cascading into 40 children. Call get_render_summary first to find total_commits, then use 0-based commit_index.
| Name | Required | Description | Default |
|---|---|---|---|
| commit_index | Yes | Zero-based index of the commit to inspect | |
| profile_path | Yes | Absolute path to the React DevTools Profiler export (.json) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the burden of behavioral disclosure. It explains the output behavior (lists components, sorts by duration) and gives an example of propagation. It also notes the 0-based index and the prerequisite call, which are important behavioral traits. However, it doesn't state side effects or explicitly say it's read-only, but the wording implies non-destructive inspection.
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?
Two sentences, front-loaded with the core purpose, followed by an illustrative example and a clear usage instruction. Every sentence earns its place with no wasted words.
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?
For a tool with no output schema and no annotations, the description covers the main aspects: what it does, how it behaves, and how to invoke it. It even explains the relationship with a sibling tool. The only minor gap is not describing the exact shape of the output, but the textual description of the list is sufficient for an agent to understand the result.
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%, so the parameters are already well-documented. The description reinforces the meaning of commit_index ('0-based commit_index') and ties it to get_render_summary's total_commits, but this is marginal value beyond the schema. No additional semantics for profile_path.
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 has a specific verb+resource: 'shows what triggered it and lists every component that re-rendered as a result, sorted by actual duration descending.' It clearly identifies the tool's scope (a specific React commit) and distinguishes it from siblings like get_render_summary by focusing on the cascade of re-renders.
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?
Provides explicit usage guidance: 'Call get_render_summary first to find total_commits, then use 0-based commit_index.' This names a dependency and a sequence, helping the agent understand when this tool is appropriate. It doesn't mention exclusions or alternatives beyond get_render_summary, but the context is clear.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Reconstructs the virtual parent/owner tree traversal to measure the depth and consumer count of a state update cascade for a specific commit index.
| Name | Required | Description | Default |
|---|---|---|---|
| commit_index | Yes | Zero-based index of the commit to trace | |
| profile_path | Yes | Absolute path to the React DevTools Profiler export (.json) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It does disclose the algorithmic approach (reconstructing the virtual parent/owner tree traversal) and the measurement goals, which gives some insight into behavior. However, it does not state whether the operation is read-only, what inputs are validated, or any performance implications.
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, front-loaded sentence with no redundant words. Every phrase contributes meaning: the verb, the resource, the measurement outputs, and the context (specific commit index). It is efficient and easy to parse.
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?
With no output schema and no annotations, the description must convey the tool's output and behavior. It does mention the outputs (depth and consumer count) but does not explain the return structure or how to interpret them. It also lacks usage context or prerequisites beyond what the schema states. This is adequate but not comprehensive.
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%, so the parameters are already well-documented. The description adds no additional meaning to commit_index or profile_path beyond what the schema provides. It implies the commit index is used to select the specific update, but that is already clear.
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 uses the specific verb 'Reconstructs' and identifies a clear resource: 'the virtual parent/owner tree traversal' to measure 'depth and consumer count of a state update cascade'. This clearly distinguishes it from similar siblings like trace_render_cascade, which focuses on render cascades rather than state updates.
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 alternatives. It does not mention any specific scenarios where state cascade tracing is preferable to render cascade tracing or other analysis tools. The description is purely definitional.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
v1.0.2analyze_compiler_efficacyaudit_compiler_rulescorrelate_chrome_tracediagnose_hydration_and_suspenseevaluate_external_store_performancefind_spurious_rendersget_hottest_componentsget_render_summaryprofile_rsc_streamremediate_componentsuggest_memoizationtrace_render_cascadetrace_state_cascade_footprintMost tools target distinct analysis areas (spurious renders, RSC, hydration, external stores, Chrome traces). However, close pairs like trace_render_cascade and trace_state_cascade_footprint, or find_spurious_renders and suggest_memoization, could cause selection confusion despite clear descriptions.
All tool names follow a consistent verb_noun pattern (get_, find_, trace_, analyze_, diagnose_, evaluate_, remediate_, audit_, correlate_), with clear actions and targets. No mixing of conventions or vague verbs.
13 tools is well-scoped for a React performance profiling server, covering analysis, diagnostics, suggestions, and remediation without bloat. Each tool addresses a specific aspect of the profiling workflow.
The tool surface covers the full profiling lifecycle: high-level summary, detailed hotspot analysis, spurious render detection, cascade tracing, hydration/RSC/external store diagnostics, compiler rule auditing, memoization suggestions, and automatic component remediation. No critical gaps for the domain.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Production-readiness for your AI coding agents.
Code intelligence platform for AI agents. 20 tools for architecture, security & impact analysis.
Give AI coding agents access to your Vynix visual feedback, bug reports, and AI diagnosis.
Lints + auto-fixes how AI coding agents discover any new product. 24 rules, 6 tools, score 0-100.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/vola-trebla/react-render-profile-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
