Relens

React performance,
understood by AI

Your AI agent sees every re-render, measures it, fixes it, and proves it worked.

Start Free TrialView Setup Guide
claude code

The problem

AI optimization today is guesswork

“This page feels slow when I click the search button.”
01

You describe the problem

You tell your AI agent something feels slow. It has no runtime data, no visibility into what's happening in the browser.

02

AI guesses blindly

It suggests wrapping things in React.memo, adding useMemo — hoping something sticks. No measurement, no proof.

03

You verify manually

You check DevTools, copy profiler output, paste it back into the chat. Repeat for every issue, every component.

Relens eliminates every step. The AI sees, measures, fixes, and proves.

How it works

Install. See. Optimize.

Three steps to give your AI agent full visibility into React runtime behavior. Under five minutes.

1

Add the provider

One component wraps your app. Zero config needed. It captures every re-render, effect, network request, and user interaction automatically.

<RelensProvider instanceId="my-app">
  <App />
</RelensProvider>
2

Install the extension

The Chrome extension connects your browser to your AI agent. Install it, sign in, and data flows automatically. You also get a full DevTools panel for free.

// Chrome DevTools → Relens tab

✓ Connected to api.relens.dev
✓ Streaming to AI agent
✓ 42 renders captured
3

Ask your AI

Your AI agent sees real runtime data — not guesses. It identifies the root cause, applies the fix, and proves it worked with a before/after snapshot.

> run_performance_audit

Issues:
  SearchResults: parent-forced (47 renders)
  suggestion: "Wrap in React.memo()"

Works with any React 18+ framework

Next.js
React Router
Gatsby
Astro
Vite
Remix

Plus CRA, webpack, Parcel, and any custom bundler. Setup guide

Free forever — no limits, no credit card

See everything in Chrome DevTools

The DevTools panel is free with no limits. It gives you full visibility into your React app's runtime behavior.

Timeline

Flame chart of every render commit. Zoom, pan, and drill into individual components.

Components

Unified table with render counts, timing, causes, and unnecessary render flags.

Effects

useEffect and useLayoutEffect fire rates, dependency counts, and cleanup tracking.

Network

Fetch and XHR requests with timing, status codes, and render correlation.

User Events

Captured clicks, inputs, scrolls, and other interactions. Expandable rows show which components re-rendered within 300ms of each event.

Heatmap Overlay

Live overlay paints render causes directly on the page — mount, state, props, parent. Frequent re-renders accumulate heat and glow brighter.

DevTools panel screenshot

Coming soon

Install Free Extension

Capabilities

21 MCP tools for React performance

21 MCP tools give your AI agent deep visibility into React runtime behavior. Plus a DevTools panel for you.

Re-render Detection

See exactly which components re-rendered, how long they took, and whether it was necessary. Props diffing tells you what changed. Detects React Compiler optimizations automatically.

get_render_profile
unnecessary:
true
changedProps:
["userId", "isActive"]
renderCause:
"props"

Why Relens

What your current tools can't tell your AI

General-purpose tools give your AI screenshots and DOM access. Relens gives it React-specific performance intelligence.

Relens10/10
Chrome DevTools MCP1/10
React Scan2/10
React DevTools0/10

Proof

Prove your optimizations worked

Save a snapshot before your change, another after. Relens shows exactly what improved.

Before

run_performance_audit

● SearchResults 47 unnecessary re-renders

cause: parent (47 of 47)

suggestion: Wrap in React.memo()

● Dashboard useEffect fires every render

fireRate: 100% (depsCount: 0)

suggestion: Add dependency array

● UserList 12 child re-renders per update

Total wasted render time: 48ms

After

compare_snapshots "before" "after"

3 components improved:

✓ SearchResults

unnecessary: 47 0 (-100%)

✓ Dashboard

effect fire rate: 100% 8% (-92%)

✓ UserList

child re-renders: 12 1 (-92%)

Total wasted render time: 48ms 0.4ms

FAQ

Common questions

The fiber walk runs synchronously during React's commit phase (~3-8ms) — this is necessary because fiber internals are mutable and would be corrupted if deferred. All storage happens in a Web Worker off the main thread. Setting enabled={false} removes the Profiler entirely — true zero overhead.

Component names, render durations, and timing metadata only. No source code, no DOM content, no user data from your app's visitors. Data is ephemeral — stored in memory on the server, never persisted to disk.

Any MCP-compatible client: Claude Code, Cursor, Windsurf, GitHub Copilot, and others. Relens exposes tools via standard Streamable HTTP transport — add the URL to your .mcp.json and you're connected.

Yes. Relens instruments React's fiber tree at the framework-agnostic level, so it works with any React 18+ setup. It's been tested with Next.js (App Router and Pages Router), React Router (framework mode, formerly Remix), Gatsby, and Astro (React Islands). See the Works With section above for integration details.

Yes. Add multiple <RelensProvider> wrappers with different id props — for example, id="dashboard" and id="sidebar". Each provider can have its own configuration (network, userEvents, sampleRate) while sharing a single server connection. The DevTools Settings panel shows per-provider tabs with individual configurations.

Not yet. Relens uses browser-specific APIs (fiber tree via DOM nodes, Chrome extension for data relay). React Native support is on the roadmap.

The free DevTools panel keeps working forever with no limits. Only the AI agent connection (21 MCP tools, cloud relay, browser control) requires a Pro subscription.

Relens is designed for development. In production builds, the Provider automatically becomes a zero-cost passthrough — no instrumentation code ships to your users. This happens automatically via standard NODE_ENV dead code elimination, the same mechanism React itself uses.

Telemetry is stored in memory per-session and isolated by user and instance ID. WebSocket connections use WSS encryption, API keys are hashed with SHA-256, and data is never shared across accounts or persisted beyond the session.

Privacy & security

Your code stays yours

Relens collects the minimum data needed for performance analysis. Nothing more.

Metadata only

Component names and render timing. No source code, no DOM content, no user data from your app's visitors. Configurable URL redaction levels let teams enforce network privacy policies in code.

Ephemeral storage

Data lives in memory for the duration of your session. Nothing is persisted to disk. Disconnect and it's gone.

Encrypted & isolated

WSS transport, SHA-256 hashed API keys, per-user data isolation. Your telemetry is never shared across accounts.

Pricing

Simple pricing

The DevTools panel is free forever. Pay only when you connect AI agents.

Free

For manual performance debugging

$0/ forever
  • Chrome DevTools panel
  • Timeline flame chart
  • Component render analysis
  • Effect profiling
  • Network tab
  • All browser-side features
Get Started
Recommended

Pro

For AI-powered optimization

$9/ monthexcl. VAT

or $79/year (save 27%)

  • Everything in Free
  • 21 MCP tools for AI agents
  • Real-time data streaming to AI
  • Autonomous browser control
  • Snapshot diffing & verification
  • Interaction replay for testing
Start Free Trial

14-day free trial, no credit card required

Prices exclude applicable taxes.