Limelight

Disponibilize o contexto de execução do seu aplicativo para a IA

Ver em getlimelight.ioExperimente este MCPPatrocinado

Documentação

Servidor MCP

Dê ao seu assistente de codificação com IA contexto de tempo de execução do seu aplicativo em execução

Visão geral

O servidor MCP do Limelight conecta seu aplicativo React ou React Native em execução a assistentes de codificação com IA como Cursor, Claude Code e qualquer editor compatível com MCP.

Em vez de copiar logs para o ChatGPT ou esperar que sua IA adivinhe o que está errado apenas pelo código-fonte, o Limelight transmite dados de tempo de execução ao vivo — renderizações, mudanças de estado, requisições de rede e logs de console — diretamente para a IA do seu editor.

Pergunte à sua IA "por que meu aplicativo está lento?" e ela responderá com dados reais, não suposições.

Informação

O servidor MCP roda localmente na sua máquina. Nenhum dado sai do seu sistema.

Início rápido

```bash theme={null} claude mcp add limelight-mcp npx limelight-mcp ``` 
  <Tab title="Cursor">
    Adicione às suas configurações de MCP:

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

  <Tab title="Other MCP Clients">
    Qualquer cliente que suporte servidores MCP stdio funciona. Use o comando:

    ```
    npx limelight-mcp
    ```
  </Tab>
</Tabs>
```bash theme={null} npm install @getlimelight/sdk ``` 
Inicialize com o alvo MCP:

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

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

Dica

Adicione stores Zustand ou Redux para capturar mudanças de estado:

Limelight.connect({
  target: "mcp",
  stores: { authStore: useAuthStore, cartStore: useCartStore },
});
Com seu aplicativo em execução e seu editor de IA aberto, tente: 
* *"Meu aplicativo está lento. Você vê algum problema?"*
* *"Por que minha busca está mostrando resultados errados?"*
* *"Quais componentes estão re-renderizando mais?"*

Sua IA chamará as ferramentas do Limelight automaticamente para inspecionar o estado de tempo de execução do seu aplicativo e dar respostas baseadas em dados reais.

O que sua IA pode ver

Uma vez conectado, seu assistente de IA tem acesso a tudo que acontece no seu aplicativo em execução:

Quais componentes estão renderizando, com que frequência, quão caros são e por quê. Detecta loops de renderização, re-renderizações desnecessárias e props instáveis. Conteúdo das stores Zustand e Redux, mudanças recentes e diffs. Veja exatamente como o estado evoluiu ao longo do tempo. Cada requisição e resposta com tempo, status, cabeçalhos e corpos. Detecta condições de corrida, cascatas e requisições com falha. Toda a saída do console com níveis, timestamps e stack traces. Filtrada e pesquisável.

Referência de ferramentas

O servidor MCP expõe 11 ferramentas que sua IA chama automaticamente com base nas suas perguntas. Para fluxos de trabalho detalhados e exemplos, veja o guia Ferramentas e Fluxos de Trabalho.

Diagnóstico

Snapshot de alto nível do seu aplicativo em execução. Contagens de eventos, erros, componentes suspeitos e padrões detectados. **Esta é geralmente a primeira ferramenta que sua IA chama.** 
Retorna: total de eventos por tipo, contagens de erros/avisos, componentes mais renderizados, itens suspeitos e metadados da sessão.
Varredura proativa em todos os eventos capturados. Executa o mecanismo de correlação do Limelight e o pipeline Debug IR em qualquer coisa que pareça problemática. 
Detecta: re-renderizações desnecessárias, props instáveis, cascatas de renderização, condições de corrida, consultas N+1, thrashing de estado e mais.

| Parâmetro | Tipo | Padrão | Descrição |
| - | - | - | - |
| `verbose` | boolean | false | Incluir resumos causais e IDs de eventos |
| `limit` | number | 5 | Máximo de problemas a retornar |
| `deduplicate` | boolean | true | Agrupar problemas semelhantes |
Análise completa de causa raiz em um erro. Executa o pipeline Debug IR para produzir uma cadeia causal, deltas de estado, violações e correções sugeridas. 
| Parâmetro | Tipo | Padrão | Descrição |
| - | - | - | - |
| `error_id` | string | — | ID de evento específico |
| `error_pattern` | string | — | Corresponder a mensagens de erro |
| `scope` | `"most_recent" \| "all"` | `"most_recent"` | Quais erros analisar |

Consultas

Filtrar e pesquisar requisições de rede capturadas. 
| Parâmetro | Tipo | Padrão | Descrição |
| - | - | - | - |
| `url_pattern` | string | — | Substring ou padrão de URL |
| `method` | string | — | Filtro de método HTTP |
| `status_range` | `{ min, max }` | — | Faixa de código de status |
| `min_duration_ms` | number | — | Limite de requisição lenta |
| `include_bodies` | boolean | false | Incluir corpos de requisição/resposta |
| `limit` | number | 10 | Máximo de resultados |
Filtrar e pesquisar eventos de console. 
| Parâmetro | Tipo | Padrão | Descrição |
| - | - | - | - |
| `level` | `"error" \| "warn" \| "log" \| "info" \| "debug"` | — | Filtro de nível de log |
| `message_pattern` | string | — | Pesquisar dentro das mensagens |
| `include_stack_traces` | boolean | auto | Incluir stack traces |
| `limit` | number | 10 | Máximo de resultados |
Visão cronológica de todos os eventos dentro de um intervalo de tempo. 
| Parâmetro | Tipo | Padrão | Descrição |
| - | - | - | - |
| `last_n_seconds` | number | 10 | Janela de tempo |
| `event_types` | array | all | Filtrar por tipo |
| `min_severity` | `"info" \| "warning" \| "error"` | — | Importância mínima |

Análises aprofundadas

Análise completa de um componente React — histórico de renderização, props que impulsionam re-renderizações e atividade correlacionada de estado/rede. 
| Parâmetro | Tipo | Descrição |
| - | - | - |
| `component_name` | string | Componente a investigar |
Perfil de desempenho de renderização de componentes. Mostra contagens de renderização, custos, velocidade, detalhamento de causas e flags suspeitas. 
| Parâmetro | Tipo | Padrão | Descrição |
| - | - | - | - |
| `component_name` | string | — | Filtrar para um componente |
| `suspicious_only` | boolean | false | Apenas componentes sinalizados |
| `sort_by` | `"render_count" \| "render_cost" \| "velocity"` | `"render_cost"` | Ordem de classificação |
| `limit` | number | 10 | Máximo de resultados |
Conteúdo atual das stores de estado e histórico de mudanças recentes. 
| Parâmetro | Tipo | Padrão | Descrição |
| - | - | - | - |
| `store_id` | string | — | Store específica |
| `path` | string | — | Caminho em notação de pontos dentro do estado |
| `include_history` | boolean | false | Incluir mudanças recentes |
| `history_limit` | number | 10 | Número de mudanças recentes |
Encontre tudo relacionado a um evento específico usando o mecanismo de correlação do Limelight. Retorna uma linha do tempo (antes/concomitante/depois) e um grafo de correlação com tipos de aresta e pontuações de confiança. 
| Parâmetro | Tipo | Padrão | Descrição |
| - | - | - | - |
| `event_id` | string | — | Evento a correlacionar (obrigatório) |
| `verbose` | boolean | false | Grafo completo com todos os nós e arestas |
Recupere os detalhes completos de um único evento pelo seu ID. Retorna dados completos do evento incluindo corpos, cabeçalhos, stack traces, diffs de estado ou detalhes de renderização dependendo do tipo de evento. Use para inspeção barata após encontrar IDs de eventos em outras ferramentas. 
| Parâmetro | Tipo | Descrição |
| - | - | - |
| `event_id` | string | O ID do evento a recuperar (obrigatório) |

Configuração

O servidor MCP aceita argumentos de CLI para personalização:

npx limelight-mcp --port 9229 --max-events 10000 --verbose
FlagPadrãoDescrição
--port9229Porta WebSocket para conexão SDK
--max-events10000Máximo de eventos armazenados em memória
--verbosefalseHabilitar logging detalhado

Como funciona

Your App (with SDK) → WebSocket → Limelight MCP Server → stdio → AI Editor
  1. O SDK do Limelight captura eventos de tempo de execução no seu aplicativo
  2. Os eventos são transmitidos para o servidor MCP por uma conexão WebSocket local
  3. O servidor MCP executa correlação e análise nos eventos
  4. Seu assistente de IA chama as ferramentas do Limelight via protocolo MCP
  5. As respostas incluem contexto de depuração estruturado e pré-analisado — não logs brutos

Todos os dados permanecem na sua máquina. O servidor MCP roda localmente e se comunica com seu editor via stdio.

Nota

O servidor MCP armazena eventos em memória. Os dados são redefinidos quando o servidor reinicia. A capacidade máxima é configurável com --max-events.

Frameworks suportados

FrameworkStatus
React NativeSuportado
React (web)Suportado
Next.jsSuportado
NodeSuportado

Bibliotecas de estado suportadas

BibliotecaStatus
ZustandSuportado
ReduxSuportado
JotaiEm breve
MobXPlanejado