[mcp] Add proper web-vitals metric collection

Author: jorge-cab

compiler/packages/react-mcp-server/src/index.ts

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {McpServer} from '@modelcontextprotocol/sdk/server/mcp.js';
-import {StdioServerTransport} from '@modelcontextprotocol/sdk/server/stdio.js';
-import {z} from 'zod';
-import {compile, type PrintedCompilerPipelineValue} from './compiler';
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { z } from 'zod';
+import { compile, type PrintedCompilerPipelineValue } from './compiler';
 import {
   CompilerPipelineValue,
   printReactiveFunctionWithOutlined,
@@ -17,10 +17,14 @@ import {
   SourceLocation,
 } from 'babel-plugin-react-compiler/src';
 import * as cheerio from 'cheerio';
-import {queryAlgolia} from './utils/algolia';
+import { queryAlgolia } from './utils/algolia';
 import assertExhaustive from './utils/assertExhaustive';
-import {convert} from 'html-to-text';
-import {measurePerformance} from './tools/runtimePerf';
+import { convert } from 'html-to-text';
+import { measurePerformance } from './tools/runtimePerf';
+
+function calculateMean(values: number[]): string {
+  return values.length > 0 ? (values.reduce((acc, curr) => acc + curr, 0) / values.length) + 'ms' : 'could not collect';
+}
 
 const server = new McpServer({
   name: 'React',
@@ -33,12 +37,12 @@ server.tool(
   {
     query: z.string(),
   },
-  async ({query}) => {
+  async ({ query }) => {
     try {
       const pages = await queryAlgolia(query);
       if (pages.length === 0) {
         return {
-          content: [{type: 'text' as const, text: `No results`}],
+          content: [{ type: 'text' as const, text: `No results` }],
         };
       }
       const content = pages.map(html => {
@@ -64,7 +68,7 @@ server.tool(
     } catch (err) {
       return {
         isError: true,
-        content: [{type: 'text' as const, text: `Error: ${err.stack}`}],
+        content: [{ type: 'text' as const, text: `Error: ${err.stack}` }],
       };
     }
   },
@@ -77,7 +81,7 @@ server.tool(
     text: z.string(),
     passName: z.enum(['HIR', 'ReactiveFunction', 'All', '@DEBUG']).optional(),
   },
-  async ({text, passName}) => {
+  async ({ text, passName }) => {
     const pipelinePasses = new Map<
       string,
       Array<PrintedCompilerPipelineValue>
@@ -129,7 +133,7 @@ server.tool(
         }
       }
     };
-    const errors: Array<{message: string; loc: SourceLocation | null}> = [];
+    const errors: Array<{ message: string; loc: SourceLocation | null }> = [];
     const compilerOptions: Partial<PluginOptions> = {
       panicThreshold: 'none',
       logger: {
@@ -158,10 +162,10 @@ server.tool(
       if (result.code == null) {
         return {
           isError: true,
-          content: [{type: 'text' as const, text: 'Error: Could not compile'}],
+          content: [{ type: 'text' as const, text: 'Error: Could not compile' }],
         };
       }
-      const requestedPasses: Array<{type: 'text'; text: string}> = [];
+      const requestedPasses: Array<{ type: 'text'; text: string }> = [];
       if (passName != null) {
         switch (passName) {
           case 'All': {
@@ -262,91 +266,14 @@ server.tool(
       }
       return {
         content: [
-          {type: 'text' as const, text: result.code},
+          { type: 'text' as const, text: result.code },
           ...requestedPasses,
         ],
       };
     } catch (err) {
       return {
         isError: true,
-        content: [{type: 'text' as const, text: `Error: ${err.stack}`}],
-      };
-    }
-  },
-);
-
-server.tool(
-  'review-react-runtime',
-  `Run this tool every time you propose a performance related change to verify if your suggestion actually improves performance.
-  <requirements>
-  This tool has some requirements on the code input:
-  - The react code that is passed into this tool MUST contain an App functional component without arrow function.
-  - DO NOT export anything since we can't parse export syntax with this tool.
-  - Only import React from 'react' and use all hooks and imports using the React. prefix like React.useState and React.useEffect
-  </requirements>
-
-  <goals>
-  - LCP - loading speed: good ≤ 2.5 s, needs-improvement 2.5-4 s, poor > 4 s
-  - INP - input responsiveness: good ≤ 200 ms, needs-improvement 200-500 ms, poor > 500 ms
-  - CLS - visual stability: good ≤ 0.10, needs-improvement 0.10-0.25, poor > 0.25
-  - (Optional: FCP ≤ 1.8 s, TTFB ≤ 0.8 s)
-  </goals>
-
-  <evaluation>
-  Classify each metric with the thresholds above. Identify the worst category in the order poor > needs-improvement > good.
-  </evaluation>
-
-  <iterate>
-  (repeat until every metric is good or two consecutive cycles show no gain)
-  - Apply one focused change based on the failing metric plus React-specific guidance:
-    - LCP: lazy-load off-screen images, inline critical CSS, preconnect, use React.lazy + Suspense for below-the-fold modules. if the user requests for it, use React Server Components for static content (Server Components).
-    - INP: wrap non-critical updates in useTransition, avoid calling setState inside useEffect.
-    - CLS: reserve space via explicit width/height or aspect-ratio, keep stable list keys, use fixed-size skeleton loaders, animate only transform/opacity, avoid inserting ads or banners without placeholders.
-
-    Stop when every metric is classified as good. Return the final metric table and the list of applied changes.
-  </iterate>
-  `,
-  {
-    text: z.string(),
-    iterations: z.number().optional().default(2),
-  },
-  async ({text, iterations}) => {
-    try {
-      const results = await measurePerformance(text, iterations);
-      const formattedResults = `
-# React Component Performance Results
-
-## Mean Render Time
-${results.renderTime / iterations}ms
-
-## Mean Web Vitals
-- Cumulative Layout Shift (CLS): ${results.webVitals.cls / iterations}ms
-- Largest Contentful Paint (LCP): ${results.webVitals.lcp / iterations}ms
-- Interaction to Next Paint (INP): ${results.webVitals.inp / iterations}ms
-- First Input Delay (FID): ${results.webVitals.fid / iterations}ms
-
-## Mean React Profiler
-- Actual Duration: ${results.reactProfiler.actualDuration / iterations}ms
-- Base Duration: ${results.reactProfiler.baseDuration / iterations}ms
-`;
-
-      return {
-        content: [
-          {
-            type: 'text' as const,
-            text: formattedResults,
-          },
-        ],
-      };
-    } catch (error) {
-      return {
-        isError: true,
-        content: [
-          {
-            type: 'text' as const,
-            text: `Error measuring performance: ${error.message}\n\n${error.stack}`,
-          },
-        ],
+        content: [{ type: 'text' as const, text: `Error: ${err.stack}` }],
       };
     }
   },
@@ -431,6 +358,83 @@ Server Components - Shift data-heavy logic to the server whenever possible. Brea
   ],
 }));
 
+server.tool(
+  'review-react-runtime',
+  `Run this tool every time you propose a performance related change to verify if your suggestion actually improves performance.
+  <requirements>
+  This tool has some requirements on the code input:
+  - The react code that is passed into this tool MUST contain an App functional component without arrow function.
+  - DO NOT export anything since we can't parse export syntax with this tool.
+  - Only import React from 'react' and use all hooks and imports using the React. prefix like React.useState and React.useEffect
+  </requirements>
+
+  <goals>
+  - LCP - loading speed: good ≤ 2.5 s, needs-improvement 2.5-4 s, poor > 4 s
+  - INP - input responsiveness: good ≤ 200 ms, needs-improvement 200-500 ms, poor > 500 ms
+  - CLS - visual stability: good ≤ 0.10, needs-improvement 0.10-0.25, poor > 0.25
+  - (Optional: FCP ≤ 1.8 s, TTFB ≤ 0.8 s)
+  </goals>
+
+  <evaluation>
+  Classify each metric with the thresholds above. Identify the worst category in the order poor > needs-improvement > good.
+  </evaluation>
+
+  <iterate>
+  (repeat until every metric is good or two consecutive cycles show no gain)
+  - Apply one focused change based on the failing metric plus React-specific guidance:
+    - LCP: lazy-load off-screen images, inline critical CSS, preconnect, use React.lazy + Suspense for below-the-fold modules. if the user requests for it, use React Server Components for static content (Server Components).
+    - INP: wrap non-critical updates in useTransition, avoid calling setState inside useEffect.
+    - CLS: reserve space via explicit width/height or aspect-ratio, keep stable list keys, use fixed-size skeleton loaders, animate only transform/opacity, avoid inserting ads or banners without placeholders.
+
+    Stop when every metric is classified as good. Return the final metric table and the list of applied changes.
+  </iterate>
+  `,
+  {
+    text: z.string(),
+    iterations: z.number().optional().default(2),
+  },
+  async ({ text, iterations }) => {
+    try {
+      const results = await measurePerformance(text, iterations);
+      const formattedResults = `
+# React Component Performance Results
+
+## Mean Render Time
+${calculateMean(results.renderTime)}
+
+TEST: ${results.webVitals.inp}
+## Mean Web Vitals
+- Cumulative Layout Shift (CLS): ${calculateMean(results.webVitals.cls)}
+- Largest Contentful Paint (LCP): ${calculateMean(results.webVitals.lcp)}
+- Interaction to Next Paint (INP): ${calculateMean(results.webVitals.inp)}
+
+## Mean React Profiler
+- Actual Duration: ${calculateMean(results.reactProfiler.actualDuration)}
+- Base Duration: ${calculateMean(results.reactProfiler.baseDuration)}
+`;
+
+      return {
+        content: [
+          {
+            type: 'text' as const,
+            text: formattedResults,
+          },
+        ],
+      };
+    } catch (error) {
+      return {
+        isError: true,
+        content: [
+          {
+            type: 'text' as const,
+            text: `Error measuring performance: ${error.message}\n\n${error.stack}`,
+          },
+        ],
+      };
+    }
+  },
+);
+
 async function main() {
   const transport = new StdioServerTransport();
   await server.connect(transport);