Limelight

Haz que el contexto de ejecución de tu aplicación esté disponible para la IA.

Ver en getlimelight.ioPrueba este MCPPatrocinado

Documentación

Servidor MCP

Dale a tu asistente de codificación con IA contexto de ejecución desde tu aplicación en funcionamiento

Descripción general

El servidor MCP de Limelight conecta tu aplicación React o React Native en ejecución con asistentes de codificación con IA como Cursor, Claude Code y cualquier editor compatible con MCP.

En lugar de copiar registros en ChatGPT o esperar que tu IA adivine qué está mal solo con el código fuente, Limelight transmite datos de ejecución en vivo (renderizados, cambios de estado, solicitudes de red y registros de consola) directamente al asistente de IA de tu editor.

Pregúntale a tu IA "¿por qué mi aplicación está lenta?" y te responderá con datos reales, no con suposiciones.

Información

El servidor MCP se ejecuta localmente en tu máquina. Ningún dato sale de tu sistema.

Inicio rápido

```bash theme={null} claude mcp add limelight-mcp npx limelight-mcp ```

  <Tab title="Cursor">
    Añade a tu configuración de MCP:

    ```json theme={null}
    {
      "mcpServers": {
        "limelight": {
          "command": "npx",
          "args": ["limelight-mcp"]
        }
      }
    }
    ```
  </Tab>

  <Tab title="Other MCP Clients">
    Cualquier cliente que admita servidores MCP stdio funciona. Usa el comando:

    ```
    npx limelight-mcp
    ```
  </Tab>
</Tabs>

```bash theme={null} npm install @getlimelight/sdk ```

Inicializa con el destino MCP:

```typescript theme={null}
import { Limelight } from "@getlimelight/sdk";

Limelight.connect({
  target: "mcp",
});
```

Consejo

Añade stores de Zustand o Redux para capturar cambios de estado:
Limelight.connect({
  target: "mcp",
  stores: { authStore: useAuthStore, cartStore: useCartStore },
});

Con tu aplicación en ejecución y tu editor de IA abierto, prueba:

* *"Mi aplicación se siente lenta. ¿Ves algún problema?"*
* *"¿Por qué mi búsqueda muestra resultados incorrectos?"*
* *"¿Qué componentes se están renderizando más veces?"*

Tu IA llamará automáticamente a las herramientas de Limelight para inspeccionar el estado de ejecución de tu aplicación y darte respuestas respaldadas por datos reales.

Lo que tu IA puede ver

Una vez conectado, tu asistente de IA tiene acceso a todo lo que sucede en tu aplicación en ejecución:

Qué componentes se renderizan, con qué frecuencia, cuán costosos son y por qué. Detecta bucles de renderizado, re-renderizados innecesarios y props inestables. Contenido de stores de Zustand y Redux, cambios recientes y diferencias. Ve exactamente cómo evolucionó el estado con el tiempo. Cada solicitud y respuesta con tiempos, estado, encabezados y cuerpos. Detecta condiciones de carrera, cascadas y solicitudes fallidas. Toda la salida de consola con niveles, marcas de tiempo y seguimientos de pila. Filtrada y buscable.

Referencia de herramientas

El servidor MCP expone 11 herramientas que tu IA llama automáticamente según tus preguntas. Para flujos de trabajo detallados y ejemplos, consulta la guía Herramientas y flujos de trabajo.

Diagnóstico

Instantánea de alto nivel de tu aplicación en ejecución. Conteos de eventos, errores, componentes sospechosos y patrones detectados. **Esta suele ser la primera herramienta que llama tu IA.**

Devuelve: total de eventos por tipo, conteos de errores/advertencias, componentes más renderizados, elementos sospechosos y metadatos de sesión.

Escaneo proactivo de todos los eventos capturados. Ejecuta el motor de correlación de Limelight y el pipeline de IR de depuración en cualquier cosa que parezca problemática.

Detecta: re-renderizados innecesarios, props inestables, cascadas de renderizado, condiciones de carrera, consultas N+1, thrashing de estado y más.

| Parámetro | Tipo | Predeterminado | Descripción |
| - | - | - | - |
| `verbose` | boolean | false | Incluir resúmenes causales e IDs de eventos |
| `limit` | number | 5 | Máximo de problemas a devolver |
| `deduplicate` | boolean | true | Agrupar problemas similares |

Análisis completo de causa raíz de un error. Ejecuta el pipeline de IR de depuración para producir una cadena causal, deltas de estado, violaciones y correcciones sugeridas.

| Parámetro | Tipo | Predeterminado | Descripción |
| - | - | - | - |
| `error_id` | string | — | ID de evento específico |
| `error_pattern` | string | — | Coincidir con mensajes de error |
| `scope` | `"most_recent" \| "all"` | `"most_recent"` | Qué errores analizar |

Consultas

Filtra y busca solicitudes de red capturadas.

| Parámetro | Tipo | Predeterminado | Descripción |
| - | - | - | - |
| `url_pattern` | string | — | Subcadena o patrón de URL |
| `method` | string | — | Filtro de método HTTP |
| `status_range` | `{ min, max }` | — | Rango de códigos de estado |
| `min_duration_ms` | number | — | Umbral de solicitudes lentas |
| `include_bodies` | boolean | false | Incluir cuerpos de solicitud/respuesta |
| `limit` | number | 10 | Máximo de resultados |

Filtra y busca eventos de consola.

| Parámetro | Tipo | Predeterminado | Descripción |
| - | - | - | - |
| `level` | `"error" \| "warn" \| "log" \| "info" \| "debug"` | — | Filtro de nivel de registro |
| `message_pattern` | string | — | Buscar dentro de mensajes |
| `include_stack_traces` | boolean | auto | Incluir seguimientos de pila |
| `limit` | number | 10 | Máximo de resultados |

Vista cronológica de todos los eventos dentro de un rango de tiempo.

| Parámetro | Tipo | Predeterminado | Descripción |
| - | - | - | - |
| `last_n_seconds` | number | 10 | Ventana de tiempo |
| `event_types` | array | all | Filtrar por tipo |
| `min_severity` | `"info" \| "warning" \| "error"` | — | Importancia mínima |

Análisis en profundidad

Análisis completo de un componente React: historial de renderizado, props que impulsan re-renderizados y actividad de estado/red correlacionada.

| Parámetro | Tipo | Descripción |
| - | - | - |
| `component_name` | string | Componente a investigar |

Perfilado de rendimiento de renderizado de componentes. Muestra conteos de renderizado, costos, velocidad, desglose de causas y banderas sospechosas.

| Parámetro | Tipo | Predeterminado | Descripción |
| - | - | - | - |
| `component_name` | string | — | Filtrar a un componente |
| `suspicious_only` | boolean | false | Solo componentes marcados |
| `sort_by` | `"render_count" \| "render_cost" \| "velocity"` | `"render_cost"` | Orden de clasificación |
| `limit` | number | 10 | Máximo de resultados |

Contenido actual de los stores de estado e historial de cambios recientes.

| Parámetro | Tipo | Predeterminado | Descripción |
| - | - | - | - |
| `store_id` | string | — | Store específico |
| `path` | string | — | Ruta en notación de puntos dentro del estado |
| `include_history` | boolean | false | Incluir cambios recientes |
| `history_limit` | number | 10 | Número de cambios recientes |

Encuentra todo lo relacionado con un evento específico usando el motor de correlación de Limelight. Devuelve una línea de tiempo (antes/simultáneo/después) y un gráfico de correlación con tipos de aristas y puntuaciones de confianza.

| Parámetro | Tipo | Predeterminado | Descripción |
| - | - | - | - |
| `event_id` | string | — | Evento a correlacionar (obligatorio) |
| `verbose` | boolean | false | Gráfico completo con todos los nodos y aristas |

Recupera los detalles completos de un solo evento por su ID. Devuelve datos completos del evento, incluidos cuerpos, encabezados, seguimientos de pila, diferencias de estado o detalles de renderizado según el tipo de evento. Úsalo para inspección económica después de encontrar IDs de eventos con otras herramientas.

| Parámetro | Tipo | Descripción |
| - | - | - |
| `event_id` | string | El ID del evento a recuperar (obligatorio) |

Configuración

El servidor MCP acepta argumentos de línea de comandos para personalización:

npx limelight-mcp --port 9229 --max-events 10000 --verbose

Banderas	Predeterminado	Descripción
`--port`	9229	Puerto WebSocket para conexión SDK
`--max-events`	10000	Máximo de eventos almacenados en memoria
`--verbose`	false	Habilitar registro detallado

Cómo funciona

Your App (with SDK) → WebSocket → Limelight MCP Server → stdio → AI Editor

El SDK de Limelight captura eventos de ejecución en tu aplicación
Los eventos se transmiten al servidor MCP a través de una conexión WebSocket local
El servidor MCP ejecuta correlación y análisis sobre los eventos
Tu asistente de IA llama a las herramientas de Limelight mediante el protocolo MCP
Las respuestas incluyen contexto de depuración estructurado y preanalizado, no registros sin procesar

Todos los datos permanecen en tu máquina. El servidor MCP se ejecuta localmente y se comunica con tu editor a través de stdio.

Nota

El servidor MCP almacena eventos en memoria. Los datos se restablecen cuando el servidor se reinicia. La capacidad máxima es configurable con --max-events.

Frameworks compatibles

Framework	Estado
React Native	Compatible
React (web)	Compatible
Next.js	Compatible
Node	Compatible

Bibliotecas de estado compatibles

Biblioteca	Estado
Zustand	Compatible
Redux	Compatible
Jotai	Próximamente
MobX	Planificado