Limelight is a runtime debugging platform built for React Native. It captures your app's full runtime context — network requests, GraphQL operations, console logs, state changes (Zustand, Redux), and component renders — correlates them into a structured Debug IR, and delivers that intelligence to AI coding assistants like Cursor, Claude, and Copilot via MCP, or to Limelight's own visual debugger. Works with Expo and the React Native New Architecture.

How does the Limelight MCP server work with Cursor, Claude, and Copilot?

Limelight includes an MCP (Model Context Protocol) server that pipes correlated runtime context directly into AI editors. When you ask your AI assistant a debugging question, Limelight provides the runtime evidence — out-of-order API responses, state overwrites, unnecessary re-renders — so the AI gives you a specific fix instead of a generic suggestion. Connect it to Cursor, Claude Code, Copilot, or Windsurf in minutes.

How is Limelight different from Reactotron?

Reactotron requires significant configuration and plugin setup, has limited GraphQL support, and no AI capabilities. Limelight works out of the box with zero config — just two lines of code. It includes a full network inspector with GraphQL operation tracking, automatic event correlation that links requests to state changes to re-renders, and AI-powered root cause analysis via both the built-in debugger and the MCP server. It's a modern alternative built for how developers work today.

What frameworks does Limelight support?

Limelight currently supports React Native (including Expo and New Architecture) and React applications with a lightweight, open-source SDK. Setup takes under 60 seconds with zero config. Node.js and Next.js backend support is coming next for full-stack debugging. The SDK is free and available on npm as @getlimelight/sdk.

Yes. The Limelight SDK is open source and free to use. The Free plan includes core debugging features — network inspection, GraphQL debugging, console logs, state tracking (Zustand, Redux), and render analysis. A Pro plan is available at $29/month for advanced features including AI-powered root cause analysis, the MCP server for Cursor/Claude/Copilot integration, unlimited projects, and 500 AI queries per month.

Debug IR (Intermediate Representation) is Limelight's structured output format optimized for AI consumption. Raw runtime events from your React Native app are correlated by timing, causality, and component relationship. Patterns and anomalies like render loops, stale closures, and retry storms are detected automatically. The output is structured, anonymized, and token-efficient. The same Debug IR powers the visual debugger, the built-in AI, and the MCP server.

Guide

How to Debug React and React Native Apps with AI and MCP

Name: Limelight
Author: Limelight

Connect your AI coding assistant to your app's runtime so it can debug with real data instead of guessing from source code.

What is MCP, and why does it matter for debugging?

MCP (Model Context Protocol) is an open standard that lets AI models call external tools and data sources. Instead of the AI only seeing your source files, MCP lets it query live data — runtime events, state, API responses — through a structured interface.

For debugging, this means the AI can ask "what network requests happened in the last 10 seconds?" or "what state changes led to this error?" and get real answers from your running app — not guesses from static analysis.

Setup

Install the SDK and call Limelight.connect() — it auto-detects your environment (React web or React Native) and starts capturing runtime events.

npm install @getlimelight/sdk

// Add to your entry file (App.tsx, index.ts, etc.)
import { Limelight } from "@getlimelight/sdk"

Limelight.connect()

Then connect your editor's MCP client to the Limelight desktop app:

Cursor

// .cursor/mcp.json
{
  "mcpServers": {
    "limelight": {
      "command": "npx",
      "args": ["limelight-mcp"]
    }
  }
}

Claude Code

claude mcp add limelight-mcp npx limelight-mcp

GitHub Copilot / Windsurf

Both support MCP servers. See docs for editor-specific details.

Example: unnecessary re-renders in React

Your dashboard feels sluggish — components re-render on every keystroke in an unrelated search field. You ask the AI: "Why is DashboardStats rendering so often?"

The AI calls the MCP render profiler and gets:

Component: DashboardStats
Renders: 47 in last 30 seconds
Avg cost: 12.3ms
Cause breakdown:
  props: 45 (95.7%) SUSPICIOUS
  state: 2 (4.3%)

Unstable prop: onRefresh
  Type: function
  Reference changes on every parent render
  Parent: DashboardPage (re-renders on search input)

Root cause: an inline onRefresh callback creates a new function reference on every render, bypassing React.memo. Fix: wrap it in useCallback. A precise answer backed by runtime data, not a generic "try memoizing your components."

Example: stale auth token in React Native

Users get logged out randomly. You suspect the token refresh logic is failing intermittently. With Limelight running, you reproduce the issue and ask: "Why did the user get logged out?"

The AI investigates via MCP and gets:

Causal Chain:
1. GET /api/me → 401 (token expired)
2. POST /api/auth/refresh → 200 (new token received)
3. State: auth.token ← new token
4. GET /api/me → 401 (still using OLD token)
5. State: auth.isLoggedIn ← false (logout triggered)

Root Cause: The retry of request #1 was queued before
the refresh response updated the token. The retry
read the stale token from a closure, not the store.

A stale closure captured the old token. Fix: refactor the retry interceptor to read the token from the store at retry time, not at queue time.

Tips for effective AI debugging

Reproduce, then ask. Trigger the bug while Limelight is running so the runtime context is fresh.
Be specific. "Why is the user list empty after login?" beats "my app is broken." Specific questions help the AI choose the right MCP tools.
Let the AI use the tools. Don't paste logs manually when MCP is connected. The AI gets more complete, structured data by calling the tools itself.
Keep the SDK on. Negligible overhead. Always-on means runtime context is ready whenever a bug appears.

FAQ

React (web) and React Native with a production-ready SDK. Node.js and Next.js backend support is coming next. The SDK is open source on npm as @getlimelight/sdk.

The MCP protocol is standard, but each editor registers servers differently. Cursor uses a JSON config file, Claude Code uses the CLI, and Copilot uses VS Code settings. Setup takes under a minute in every case.

Negligible overhead. It uses passive interception (wrapping fetch, subscribing to store changes) rather than polling or profiling loops. Render profiling uses React's built-in Profiler API. Designed to stay on during all local development.

Yes. Everything runs on your local machine. The SDK auto-redacts sensitive values (auth tokens, passwords, API keys) before data leaves your app. No data is sent externally unless you explicitly configure it. The SDK is open source.