Set Up React Performance Profiling in 5 Minutes

Get Relens running end-to-end in your project. After this guide, both you and your AI coding agent will have everything needed to find, fix, and verify React performance issues.

Prerequisites: Node.js 18+, Chrome browser, an AI agent with MCP support (e.g., Claude Code, Cursor, Windsurf)

Install the npm package

Add @relensdev/relens to your React app and wrap your component tree:

App.tsx

import { RelensProvider } from '@relensdev/relens';

function App() {
  return (
    <RelensProvider
      instanceId="my-app"   // routing key — auto-detected by the server
      network={true}         // opt-in fetch/XHR interception
      urlRedaction="host"    // strip scheme+host from captured URLs
    >
      <YourApp />
    </RelensProvider>
  );
}

Provider props

Prop	Default	Description
instanceId	"default"	Routing key for multi-instance setups. Optional — the server auto-detects instances.
id	"default"	Profiler ID. Use different IDs to profile multiple parts of your app independently.
enabled	true	Set to false for zero overhead (renders a Fragment).
network	false	Enable fetch/XHR interception for network telemetry.
userEvents	false	Enable user interaction capture (clicks, input, scroll).
maxEntries	2000	Ring buffer cap. Oldest entries evicted when full.
sampleRate	1.0	Probability (0.0-1.0) of recording each render.
urlRedaction	"none"	Controls how much of captured network URLs is visible. Options: "none", "host" (pathname only), "path" (origin only), "full" (deterministic hash). Enforced at capture time.
filter	none	Function (componentId: string) => boolean to filter components.

Multiple providers

Large apps can wrap different sections in separate providers with distinct id values. Each provider can have its own configuration while sharing a single instance connection. The DevTools Settings panel shows per-provider tabs.

<RelensProvider id="dashboard" instanceId="my-app" network userEvents>
  <Dashboard />
</RelensProvider>

<RelensProvider id="sidebar" instanceId="my-app">
  <Sidebar />
</RelensProvider>

Install the Chrome extension

Install the Relens extension from the Chrome Web Store. Click "Add to Chrome" and the extension will appear in your toolbar.

A green dot in the extension popup means the server connection is active. You also get a full DevTools panel (Chrome DevTools → Relens tab) for free.

Sign in

Click the Relens extension icon in Chrome and sign in with Google or GitHub. The extension streams telemetry to the hosted server automatically once signed in.

The status indicator turns green when the connection is active. If your editor does not support MCP OAuth, you can also create an API key at portal.relens.dev (see Step 4).

Configure your AI agent

Add the MCP server to your project's .mcp.json. There are two ways to authenticate:

OAuth (recommended)

Just provide the URL — no API key needed:

.mcp.json

{
  "mcpServers": {
    "relens": {
      "type": "http",
      "url": "https://api.relens.dev/mcp"
    }
  }
}

In your editor's MCP settings, click Authenticate to sign in with Google or GitHub. Your session is managed automatically — no keys to copy or rotate.

API key (alternative)

If your editor does not support MCP OAuth, use an API key from portal.relens.dev:

.mcp.json

{
  "mcpServers": {
    "relens": {
      "type": "http",
      "url": "https://api.relens.dev/mcp",
      "headers": {
        "Authorization": "Bearer rl_live_your_api_key_here"
      }
    }
  }
}

Replace rl_live_your_api_key_here with your actual API key from the portal. Add .mcp.json to your .gitignore to avoid committing secrets.

The server automatically detects which app instances have data for your account. In Claude Code, run /mcp to verify the connection is active.

Verify the pipeline

Start your React app, open it in Chrome, and interact with it. Then ask your AI agent to call:

> connection_status

{
  "status": "connected",
  "tabCount": 1,
  "totalRenders": 42
}

If you see renders, everything is working. Try run_performance_audit to see real performance data.

Want AI-powered optimization?

Connect Claude Code or any MCP-compatible AI agent to get automated performance analysis, browser control, snapshot diffing, and more. 14-day free trial, no credit card required.

Start Free Trial

Troubleshooting

Symptom	Fix
Extension shows "disconnected"	Check that you've signed in via the extension popup (Google or GitHub). The status dot should be green once the server connection is active.
connection_status shows 0 renders	Reload the extension in chrome://extensions, then hard-refresh the app page.
Component names show as profiler ID	Stale npm-package in node_modules. Run: yarn install --force && rm -rf node_modules/.vite
Network tools return empty	Add network={true} to <RelensProvider>.
MCP tools return 401 Unauthorized	If using OAuth, click "Authenticate" in /mcp to re-sign in. If using an API key, check that it starts with rl_live_ and matches the key from portal.relens.dev.
OAuth sign-in window does not appear	Ensure your editor supports MCP OAuth. If not, switch to the API key method with an Authorization header in .mcp.json.