React performance,
understood by AI
Relens bridges your React app and your AI coding agent. It sees every re-render, measures every interaction, and verifies every fix — so your AI can optimize with precision instead of guessing.
$ run_performance_audit
Found 3 issues (1 critical, 2 moderate):
● SearchResults re-renders 47x with identical props
● useEffect in Dashboard fires every render (missing deps)
● UserList causes 12 child re-renders per state change
$ Fix issue 1 and verify
✓ Wrapped SearchResults in React.memo. Unnecessary renders: 47 0
The problem
AI optimization today is guesswork
Your AI agent can't see what's happening in the browser. So it guesses, adds console.logs, and asks you to paste results back.
You describe the problem
"This page feels slow when I click the search button."
AI guesses blindly
It suggests wrapping things in React.memo, adding useMemo — hoping something sticks.
You verify manually
You check if it worked, copy DevTools output, paste it back. Repeat for every issue.
Relens eliminates every step. The AI sees, measures, fixes, and proves.
How it works
Three pieces, one pipeline
Relens connects your React app directly to your AI agent. No copy-pasting, no guessing.
Instrument
Add <RelensProvider> to your React app. One component, zero config needed. Captures every re-render, effect, network request, and user interaction.
<RelensProvider instanceId="my-app"> <App /> </RelensProvider>
Connect
The Chrome extension bridges browser and server. Telemetry flows in real-time over WebSocket. Your DevTools panel shows everything too.
Extension → WebSocket → Server
↓
MCP toolsOptimize
Your AI agent calls MCP tools to see exactly what's slow, why it re-renders, and whether the fix actually worked.
> run_performance_audit
> profile_interaction("click", "#btn")
> verify_optimization("after", [...])Capabilities
Everything your AI needs to see
26 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.
Render Cause Analysis
Know why each component re-rendered: own state change, props change, or forced by parent. Pinpoints root-cause components.
Effect Profiling
Track useEffect and useLayoutEffect firing patterns. Find effects with missing deps, effects that fire every render, and blocking layout effects.
Network Correlation
See which fetch/XHR requests trigger which component re-renders. Correlate network waterfalls with render timing.
Autonomous Loop
AI clicks, types, navigates, and scrolls in your browser. It measures the render impact of every interaction and verifies its own fixes.
Snapshot Diffing
Save performance snapshots before and after changes. Compare render counts, timing, and unnecessary renders to prove optimizations worked.
Demo
See it in action
Watch an AI agent find, fix, and verify a React performance issue — without any human intervention.
Demo video coming soon
Pricing
Simple pricing
The DevTools panel is free forever. Pay only when you connect AI agents.
Free
For manual performance debugging
- Chrome DevTools panel
- Timeline flame chart
- Component render analysis
- Effect profiling
- Network tab
- All browser-side features
Pro
For AI-powered optimization
- Everything in Free
- 26 MCP tools for AI agents
- Cloud telemetry relay
- Autonomous browser control
- Snapshot diffing & verification
- Session replay