Home/Mcp
AI Ready

Frontend Performance Lab MCP

Connect your AI assistant to a specialized frontend performance knowledge graph. Use Frontend Performance Lab from Cursor, Claude Desktop, VS Code, Windsurf and any MCP-compatible client.

Install CLI Documentation
Works With
Cursor Claude Desktop VS Code Windsurf

Live Server Status

Real-time diagnostics from the running MCP API endpoint.

Frontend Performance Lab Server
Connecting...
Version1.0.0
8 Tools
5 Experiments

What can Frontend Performance Lab do?

Review Component Performance

Analyze Vue and React code for hidden performance issues.

Detect Rendering Bottlenecks

Identify layout thrashing and large component trees instantly.

Explain Browser APIs

Get structured documentation on performance APIs directly in your IDE.

Recommend Optimizations

Provide actionable recipes to fix identified bottlenecks.

Search Performance Knowledge

Query a curated database of modern frontend patterns.

Launch Interactive Experiments

Open live, sandboxed demonstrations of specific bugs.

Architecture

How the Frontend Performance Lab integrates with your IDE.

IDE
Cursor / VS Code
MCP Client
JSON-RPC
FPL
MCP Server
Tools & Resources
Experiments
Browser APIs
Recipes
Analyzer

Example Workflow

The automated "aha" moment powered by MCP tools.

Paste Vue Component
Analyzer detects Layout Thrashing
Graph recommends ResizeObserver
Recipe explains virtualization
Optimized Code

Try Frontend Performance Lab
API Powered

Execute real MCP tools directly from your browser. This playground communicates with the same unified core as the stdio server via the Nuxt /api/mcp/execute endpoint.

Response
// Output will appear here...

Tools Explorer

list_experiments

Knowledge

List all available frontend performance experiments.

{}

get_experiment

Knowledge

Get full manifest or specific section.

{ id: string, section?: string }

list_browser_apis

Browser APIs

List all available Browser APIs in the performance registry.

{}

get_browser_api

Browser APIs

Get the full details of a specific Browser API.

{ id: string }

list_recipes

Knowledge

List all available performance recipes.

{}

get_recipe

Knowledge

Get the full details of a specific recipe.

{ id: string }

search

Search

Search the knowledge base.

{ query?: string, type?: string, difficulty?: string, tags?: string[], browserAPI?: string, limit?: number }

system_diagnostics

Diagnostics

Generate system health report.

{}

Resources Explorer

Experiments

performance://experiments/{id}

Browser APIs

performance://browser-apis/{id}

Recipes

performance://recipes/{id}

Checklists

performance://checklists/{id}

Prompt Explorer

Review Performance

Tool: review_performance

Ask the AI to review your current code for performance bottlenecks based on the lab guidelines.

Example Prompt
"Review this Vue component for rendering bottlenecks."
Arguments: { framework?: string }