> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getlimelight.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> The runtime context layer for AI-assisted development. Capture, correlate, and query everything that happens when your code runs.

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/limelight/zo12IJdbCI5UlqWl/images/ll-hero-light.png?fit=max&auto=format&n=zo12IJdbCI5UlqWl&q=85&s=936f6372428e6e013fd1ee515d8add62" alt="Limelight interface" width="2095" height="1242" data-path="images/ll-hero-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/limelight/zo12IJdbCI5UlqWl/images/ll-hero.png?fit=max&auto=format&n=zo12IJdbCI5UlqWl&q=85&s=0b9ab98b8fc7859a8edb8f0f06b5b69e" alt="Limelight interface" width="2096" height="1242" data-path="images/ll-hero.png" />
</Frame>

## Get Started

Set up Limelight in your app and start debugging with real runtime context — on the client, the server, or both.

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/quickstart" horizontal>
    Install the SDK and connect your React Native or React app in under 60
    seconds.
  </Card>

  <Card title="Server-Side Setup" icon="server" href="/server-side" horizontal>
    Add middleware to your Express, Next.js, or Node.js server to capture
    incoming requests.
  </Card>
</CardGroup>

## Two Ways to Use Limelight

<CardGroup cols={2}>
  <Card title="MCP Server" icon="robot" href="/mcp/installation">
    **AI-powered debugging** — Give Cursor, Claude Code, or any MCP-compatible
    editor direct access to your app's runtime. Ask questions in natural language
    and get answers backed by correlated runtime data. The AI calls 11 debugging
    tools automatically.
  </Card>

  <Card title="Desktop App" icon="desktop" href="/quickstart">
    **Visual debugging workspace** — Interactive timeline with network requests,
    renders, state, console logs, and full-stack traces. Works locally with zero
    sign-up. All data stays on your machine.
  </Card>
</CardGroup>

## Core Features

<CardGroup cols={2}>
  <Card title="Network Requests" icon="network-wired" href="/features/network-requests">
    Capture and inspect all HTTP requests with full headers, payloads, timing,
    and GraphQL intelligence including complexity scoring.
  </Card>

  <Card title="Full-Stack Tracing" icon="link" href="/features/full-stack-tracing">
    Automatically trace requests from client to server. See the complete request
    lifecycle in one place.
  </Card>

  <Card title="Render Tracking" icon="bolt" href="/features/render-tracking">
    Find unnecessary re-renders automatically. Zero config, zero Babel plugins.
    Detects render loops, unstable props, and cascades.
  </Card>

  <Card title="State Inspection" icon="database" href="/features/state">
    Debug Zustand and Redux stores in real-time. See state changes, diffs, and
    action history.
  </Card>

  <Card title="Console Logs" icon="terminal" href="/features/console-logs">
    Stream console logs in real-time with filtering, search, and stack traces.
  </Card>

  <Card title="Issue Detection" icon="triangle-exclamation" href="/features/issue-detection">
    Automatic detection of N+1 queries, render loops, race conditions, retry
    storms, and other runtime anti-patterns.
  </Card>
</CardGroup>

## Why Limelight?

<CardGroup cols={2}>
  <Card title="Runtime Context for AI" icon="robot">
    AI assistants can read your code but can't see what happens at runtime.
    Limelight bridges that gap with structured, pre-analyzed context.
  </Card>

  <Card title="Causal Analysis" icon="diagram-project" href="/concepts">
    Not just raw events — Limelight correlates them into causal chains and
    detects anti-patterns automatically via the Debug IR engine.
  </Card>

  <Card title="Zero Config" icon="wand-magic-sparkles">
    One line of code. No wrappers, no Babel plugins, no Metro config. Just
    works.
  </Card>

  <Card title="Privacy-First" icon="shield-halved" href="/features/security">
    All data stays local. Automatic redaction of sensitive headers. No
    telemetry, no cloud dependency.
  </Card>

  <Card title="Full-Stack" icon="arrows-left-right">
    Client-to-server request tracing and full-stack correlation — linked
    automatically via trace IDs.
  </Card>

  <Card title="Framework Support" icon="layer-group">
    React, React Native, Node.js, Express, Next.js, Expo. Zustand and Redux
    state tracking built in.
  </Card>
</CardGroup>

## Learn More

<CardGroup cols={2}>
  <Card title="How It Works" icon="gears" href="/how-it-works">
    SDK capture, correlation engine, Debug IR, and how context reaches your AI.
  </Card>

  <Card title="Concepts" icon="lightbulb" href="/concepts">
    Debug IR, causal chains, and the correlation engine — the core ideas behind
    Limelight.
  </Card>

  <Card title="MCP Tools & Workflows" icon="wrench" href="/mcp/tools">
    All 11 MCP tools, example workflows, and what your AI sees when it debugs.
  </Card>

  <Card title="GitHub" icon="github" href="https://github.com/getlimelight/limelight-sdk">
    The SDK is fully open source. Star us on GitHub!
  </Card>
</CardGroup>
