Skip to main content

Overview

The Limelight MCP Server connects your running React or React Native app to AI coding assistants like Cursor, Claude Code, and any MCP-compatible editor. Instead of copying logs into ChatGPT or hoping your AI can guess what’s wrong from source code alone, Limelight streams live runtime data — renders, state changes, network requests, and console logs — directly into your editor’s AI. Ask your AI “why is my app slow?” and it answers with real data, not guesses.
The MCP server runs locally on your machine. No data leaves your system.

Quickstart

1

Add the MCP server to your editor

claude mcp add limelight-mcp npx limelight-mcp
2

Install the SDK in your app

npm install @getlimelight/sdk
Initialize with the MCP target:
import { Limelight } from "@getlimelight/sdk";

Limelight.connect({
  target: "mcp",
});
Add Zustand or Redux stores to capture state changes:
Limelight.connect({
  target: "mcp",
  stores: { authStore: useAuthStore, cartStore: useCartStore },
});
3

Start your app and ask your AI

With your app running and your AI editor open, try:
  • “My app feels slow. Do you see any issues?”
  • “Why is my search showing wrong results?”
  • “Which components are re-rendering the most?”
Your AI will call Limelight’s tools automatically to inspect your app’s runtime state and give you answers backed by real data.

What your AI can see

Once connected, your AI assistant has access to everything happening in your running app:

Renders

Which components are rendering, how often, how expensive, and why. Detects render loops, unnecessary re-renders, and unstable props.

State

Zustand and Redux store contents, recent changes, and diffs. See exactly how state evolved over time.

Network

Every request and response with timing, status, headers, and bodies. Detects race conditions, waterfalls, and failed requests.

Console

All console output with levels, timestamps, and stack traces. Filtered and searchable.

Tools reference

The MCP server exposes 10 tools that your AI calls automatically based on your questions.

Diagnostics

High-level snapshot of your running app. Event counts, errors, suspicious components, and detected patterns. This is usually the first tool your AI calls.Returns: total events by type, error/warning counts, top rendered components, suspicious items, and session metadata.
Proactive scan across all captured events. Runs Limelight’s correlation engine and Debug IR pipeline on anything that looks problematic.Detects: unnecessary re-renders, unstable props, render cascades, race conditions, N+1 queries, state thrashing, and more.
ParameterTypeDefaultDescription
severity"info" | "warning" | "critical"allMinimum severity
limitnumber5Max issues to return
verbosebooleanfalseInclude full analysis detail
Full root cause analysis on an error. Runs the Debug IR pipeline to produce a causal chain, state deltas, violations, and suggested fixes.
ParameterTypeDefaultDescription
error_idstringSpecific event ID
error_patternstringMatch against error messages
scope"most_recent" | "all""most_recent"Which errors to analyze

Querying

Filter and search captured network requests.
ParameterTypeDefaultDescription
url_patternstringURL substring or pattern
methodstringHTTP method filter
status_range{ min, max }Status code range
min_duration_msnumberSlow request threshold
include_bodiesbooleanfalseInclude request/response bodies
limitnumber10Max results
Filter and search console events.
ParameterTypeDefaultDescription
level"error" | "warn" | "log" | "info" | "debug"Log level filter
message_patternstringSearch within messages
include_stack_tracesbooleanautoInclude stack traces
limitnumber50Max results
Chronological view of all events within a time range.
ParameterTypeDefaultDescription
last_n_secondsnumber30Time window
event_typesarrayallFilter by type
min_severity"info" | "warning" | "error"Minimum importance

Deep dives

Full analysis of a React component — render history, props driving re-renders, and correlated state/network activity.
ParameterTypeDescription
component_namestringComponent to investigate
Component render performance profiling. Shows render counts, costs, velocity, cause breakdown, and suspicious flags.
ParameterTypeDefaultDescription
component_namestringFilter to one component
suspicious_onlybooleanfalseOnly flagged components
sort_by"render_count" | "render_cost" | "velocity""render_cost"Sort order
limitnumber10Max results
Current state store contents and recent change history.
ParameterTypeDefaultDescription
store_idstringSpecific store
pathstringDot-notation path into state
include_historybooleanfalseInclude recent changes
history_limitnumber10Number of recent changes
Find everything related to a specific event using Limelight’s correlation engine.
ParameterTypeDefaultDescription
event_idstringEvent to correlate
max_depthnumber2Hops in the correlation graph

Configuration

The MCP server accepts CLI arguments for customization:
npx limelight-mcp --port 9229 --max-events 10000 --verbose
FlagDefaultDescription
--port9229WebSocket port for SDK connection
--max-events10000Maximum events stored in memory
--verbosefalseEnable verbose logging

How it works

Your App (with SDK) → WebSocket → Limelight MCP Server → stdio → AI Editor
  1. The Limelight SDK captures runtime events in your app
  2. Events stream to the MCP server over a local WebSocket connection
  3. The MCP server runs correlation and analysis on the events
  4. Your AI assistant calls Limelight’s tools via the MCP protocol
  5. Responses include structured, pre-analyzed debugging context — not raw logs
All data stays on your machine. The MCP server runs locally and communicates with your editor over stdio.
The MCP server stores events in memory. Data resets when the server restarts. Maximum capacity is configurable with --max-events.

Supported frameworks

FrameworkStatus
React NativeSupported
React (web)Supported
Next.jsSupported
NodeSupported

Supported state libraries

LibraryStatus
ZustandSupported
ReduxSupported
JotaiComing soon
MobXPlanned