ExecBro

ExecBro

Dê aos seus assistentes de IA olhos e mãos dentro do seu aplicativo React Native em execução. Como o Chrome DevTools — mas para agentes de IA.

Compile, depure e verifique recursos de ponta a ponta — sem sair do chat.

O ExecBro é a ponte em tempo de execução entre seu assistente de codificação por IA e seu aplicativo React Native em execução — expondo ferramentas MCP para ler logs e rede, inspecionar estado de componentes, capturar capturas de tela, tocar na interface e executar JavaScript. Zero configuração, sem necessidade de SDK ou alterações de código para começar — e instalar o SDK opcional é recomendado para a captura de logs e rede mais robusta.

Comece agora

1. Configure o ExecBro como um servidor MCP para o agente de sua escolha
2. Configure os auxiliares de automação de interface
3. Instale o SDK no seu aplicativo React Native — opcional, mas recomendado para a experiência mais robusta de logs, rede e estado
4. Autorize e vincule ao painel web — opcional, para estatísticas de uso e histórico de sessões
5. Inicie seu aplicativo React Native (npm start / expo start)
6. Pergunte ao seu assistente de IA em linguagem natural — por exemplo, "Conecte-se ao simulador e investigue o que causou o erro na tela"

Veja seu uso — execbro.com

Faça login em execbro.com para ver sua atividade do ExecBro renderizada de volta para você: quais ferramentas você mais usa, taxas de erro das ferramentas e seu histórico de sessões — para que você possa identificar ferramentas instáveis, acompanhar o uso ao longo do tempo e entender como seu agente dirige o aplicativo entre sessões. É construído a partir da mesma telemetria anônima descrita em Telemetria e Privacidade, vinculada ao seu ID de instalação.

A vinculação é apenas para o painel: ela anexa suas instalações à sua conta para que as estatísticas sejam suas. Nada nas ferramentas é bloqueado por ela.

Recursos

Interação em Tempo de Execução

• Captura de Logs do Console - Capture console.log, warn, error, info, debug com filtragem e busca. Observação: em uma inicialização a frio (primeiro lançamento do aplicativo), os logs emitidos antes da conexão do servidor MCP são perdidos — recarregamentos subsequentes capturam tudo. Instale o SDK opcional para armazenar logs em buffer desde a primeira linha da inicialização do aplicativo
• Rastreamento de Requisições de Rede - Monitore requisições/respostas HTTP com cabeçalhos, tempo e conteúdo do corpo. Como nos logs, requisições de rede iniciais em inicialização a frio podem ser perdidas antes do estabelecimento da conexão. Instale o SDK opcional para captura completa desde a inicialização do aplicativo, incluindo corpos de requisição/resposta
• Simulação de Respostas - Substitua ou altere respostas HTTP para que caminhos de erro sejam alcançados através do código real do aplicativo — o construtor de requisições, o ramo de erro, a tentativa — em vez de serem falsificados escrevendo estado diretamente. Simule modo offline, atrase respostas, falhe apenas na primeira tentativa para testar uma nova tentativa, ou reenvie uma requisição capturada com um campo alterado. As regras sobrevivem ao recarregamento, e o tráfego alterado é sempre marcado. Veja o tutorial de simulação
• Execução de JavaScript - Execute código diretamente no seu aplicativo (estilo REPL) e inspecione os resultados
• Depuração de Estado Global - Descubra e inspecione Apollo Client, stores Redux, Expo Router e globais personalizados. Conecte stores e outros internals do aplicativo diretamente ao agente com o SDK opcional para acesso direto e confiável ao estado
• Detecção de Erros de Bundle - Obtenha erros do bundler Metro e problemas de compilação com localizações de arquivos
• Toque-para-Fonte - Aponte para qualquer elemento com o Inspetor de Elementos do RN e obtenha o arquivo fonte absoluto e a linha onde ele é renderizado, resolvido a partir do _debugStack da fibra React via simbolização do Metro. Funciona no React 19, onde _debugSource não existe mais. As seleções são armazenadas em buffer em segundo plano, então toques feitos durante uma sessão manual do inspetor são capturados sem pedir ao agente primeiro

Controle de Dispositivo

• Simulador iOS - Capturas de tela, gerenciamento de aplicativos, manipulação de URLs, inicialização/encerramento (via simctl)
• Dispositivos Android - Capturas de tela, instalação/inicialização de aplicativos, gerenciamento de pacotes (via ADB)
• Toque Unificado - Ferramenta tap única com cadeia de fallback automática: árvore de fibras → acessibilidade → OCR → coordenadas. Detecta automaticamente a plataforma, aceita coordenadas de capturas de tela e ferramentas de layout sem alterações. Retorna captura de tela pós-toque e verifica mudança visual por padrão
• Deslize Unificado - Ferramenta swipe única que roteia automaticamente para iOS ou Android com base no dispositivo conectado. Aceita coordenadas no mesmo espaço de tela das ferramentas de layout e capturas de tela — sem conversão — e retorna um sinal verification.meaningful para que agentes detectem fim de lista, superfícies não roláveis e coordenadas perdidas — e em uma tela sem conexão React Native, informa que não pôde inspecionar em vez de adivinhar. Essencial para rolar listas virtualizadas (FlatList/SectionList) onde itens fora da tela não estão na árvore de fibras
• Pinça Multi-Toque Real (somente emulador Android — iOS em andamento) - Ferramenta pinch que envia dois contatos de toque genuínos do kernel através da ponte multi-toque do emulador Android, para que amplie mapas, galerias, WebViews e visualizações nativas igualmente — funciona abaixo do aplicativo, não através do React Native. Retorna o mesmo sinal verification.meaningful que swipe, e recusa em alvos não suportados em vez de falsificar um resultado
• Automação de Interface - Deslize, toque longo (tap com duration, resolvendo o alvo por testID/texto/componente), eventos de tecla e entrada de texto em ambas as plataformas. input_text mira o campo em si e verifica a escrita lendo-o de volta; em aplicativos Bridgeless/Fabric, replace:true sobrescreve valores pré-preenchidos atualizando o estado React através de onChangeText, para que componentes controlados (Formik, react-hook-form, useState) permaneçam consistentes. native:true digita no que o SO reporta como focado, sem necessidade de conexão RN, e dismiss_keyboard opera da mesma forma
• Inspeção de Acessibilidade - Consulte a hierarquia da interface para encontrar elementos por texto, rótulo ou ID de recurso
• Extração de Texto por OCR - Extraia texto visível com coordenadas prontas para toque via Google Cloud Vision (funciona em qualquer conteúdo de tela)

Segurança de Credenciais

• Segredos nunca entram na transcrição - A saída de cada ferramenta passa por um ponto único de verificação de redação, então um token é substituído por um identificador ([secret:auth_api.acme.io]) seja em um cabeçalho de rede, um store Redux, uma linha de log ou uma URL. Cabeçalhos de credenciais são correspondidos por padrão em vez de uma lista fixa, então os com namespace de fornecedor (x-shopify-access-token, x-goog-api-key, x-hasura-admin-secret) também são cobertos, enquanto x-request-id e x-idempotency-key são deliberadamente deixados intactos. Não há escape por chamada: EXECBRO_REDACT=off é definido por um humano e requer reinicialização
• Use uma credencial sem lê-la - list_secrets nomeia os identificadores; http_request({auth:{secret:"api.acme.io"}}) substitui o valor no lado do host e emite a requisição da sua máquina — como Authorization: Bearer por padrão, ou em um cabeçalho chave ou outro esquema, para que uma credencial nunca precise ser colada para cobrir um formato não suportado, e vault_capture lê um token do aplicativo diretamente para o cofre quando nenhuma requisição capturada revelou um. Cada credencial é vinculada à origem onde foi observada e recusada em outros lugares; o cofre é apenas em memória
• Lado do servidor vs. lado do cliente, isolados - http_request executa a partir do host sem a confiança TLS, proxy, cookie jar ou regras de simulação do aplicativo; app_request executa dentro do aplicativo com todos eles. Comparar os dois é como você distingue um bug de backend de um de cliente — e um 401 do host onde o aplicativo tem sucesso é em si a resposta de que o backend impõe atestação
• Dados do aplicativo são tratados como dados - O servidor informa a cada agente conectado que logs, payloads, árvores de componentes e resultados de eval são moldados pelo que o aplicativo conversou, e nunca devem ser seguidos como instruções

Depuração Multi-Dispositivo

• Conectar Todos os Dispositivos - scan_metro descobre e conecta automaticamente a todos os alvos Bridgeless em cada porta Metro
• Segmentação de Dispositivos - Cada ferramenta aceita um parâmetro opcional device para segmentar dispositivos específicos por nome (correspondência de substring sem diferenciar maiúsculas/minúsculas)
• Buffers por Dispositivo - Logs e requisições de rede são capturados separadamente por dispositivo para depuração limpa
• Comparação Entre Plataformas - Depure iOS e Android lado a lado, comparando logs, tráfego de rede e árvores de componentes

Sob o Capô

• Descoberta Automática - Escaneia Metro nas portas 8081, 8082, 19000-19002 automaticamente
• Suporte Multi-Dispositivo - Conecta a todos os alvos Bridgeless simultaneamente, com buffers de log e rede por dispositivo
• Reconexão Automática - Backoff exponencial (até 8 tentativas) quando a conexão cai
• Buffer Eficiente - Buffers circulares: 500 logs, 200 requisições de rede, 100 seleções de inspetor
• Suporte de Plataforma - Expo SDK 54+ (Bridgeless) e React Native 0.70+ (Hermes)

Configuração

Adicione o ExecBro ao Claude Code em um comando — sem instalação, npx busca a versão mais recente sob demanda:

claude mcp add execbro --scope project -- npx -y execbro@latest

Em seguida, reinicie completamente o cliente (saia e reabra) para que ele reconheça o novo servidor.

O escopo do projeto escreve um .mcp.json que você pode commitar, para que todo o time adote o ExecBro neste repositório e em nenhum outro lugar. Troque project por user para registrá-lo globalmente — conveniente se você trabalha com React Native o dia todo, mas ele inicia o ExecBro em toda sessão que você abrir, incluindo repositórios sem servidor Metro para conectar.

Usando um cliente diferente ou precisa de configuração de plataforma? O guia de configuração completo cobre Claude Desktop, Codex CLI, Cursor, VS Code Copilot, Windsurf, Zed e Gemini CLI, além dos requisitos de automação de interface do Android e do simulador iOS.

Instale o SDK (recomendado)

O ExecBro funciona com zero alterações no aplicativo, mas instalar o pacote execbro-sdk complementar é o maior upgrade individual na qualidade de depuração. Ele permite conectar as partes importantes do seu aplicativo — seus stores de estado e sua camada de rede — diretamente ao alcance do agente, para que a IA inspecione estado real do Redux/TanStack Query e corpos completos de requisição/resposta em vez de adivinhar de fora.

	Sem SDK	Com SDK
Stores de estado (Redux, TanStack Query, …)	Manual via execute_in_app	Conectados — referências diretas
Corpos de requisição/resposta	Não disponíveis	Completos (incluindo GraphQL)
Requisições de rede na inicialização (auth, config)	Perdidas	Capturadas desde o primeiro fetch
Logs de console desde a inicialização	Pode perder logs iniciais	Capturados desde o primeiro log
Funciona em Bridgeless (Expo SDK 52+)	Parcial	Completo

É um npm install mais uma única chamada init() no arquivo de entrada do seu aplicativo. Veja o guia do SDK para instalação, inicialização e todas as opções de configuração.

Requisitos

• Node.js 20.9+
• Aplicativo React Native em execução com bundler Metro
• Recomendado: execbro-sdk no seu aplicativo — conecta stores e a camada de rede ao agente para depuração dramaticamente melhor (opcional; o ExecBro funciona sem ele)
• Automação de interface iOS: AXe CLI (brew install cameroncooke/axe/axe, padrão) ou Facebook IDB (brew install idb-companion, opt-in via IOS_DRIVER=idb) — necessário para toque, deslize, entrada de texto e acessibilidade no Simulador iOS
• Opcional para fallback de OCR offline: Python 3.6+ (necessário apenas quando o OCR em nuvem não está disponível, veja o guia de OCR)

Habilidades do Claude Code

Habilidades pré-construídas para fluxos de trabalho comuns de depuração — configuração de sessão, inspeção de logs, depuração de rede e muito mais. Consulte o guia de habilidades para a lista completa e instruções de instalação.

Ferramentas Disponíveis

Consulte a referência completa de ferramentas para todas as ferramentas com descrições. Ferramentas principais:

Ferramenta	Descrição
scan_metro	Comece aqui — verifica servidores Metro e conecta automaticamente
get_logs / search_logs	Captura e pesquisa logs de console com filtros e resumos
get_network_requests	Monitora requisições HTTP com filtros por método/status
get_screen_state	Instantâneo de orientação — rota ativa, overlays e cada elemento com (x, y) pronto para toque
get_screen_layout	Mapa de tela dos componentes visíveis com posições, tamanhos e conteúdo de texto
tap	Toque unificado — detecta plataforma automaticamente, tenta fiber → acessibilidade → OCR → coordenadas
pinch	Pinça-para-zoom real com dois dedos — apenas emulador Android (iOS em andamento)
input_text	Digita texto — mira e foca um campo diretamente, ou native:true para o que estiver focado. replace:true limpa antes (Fabric)
dismiss_keyboard	Desfoca o campo de entrada focado e fecha o teclado na tela
execute_in_app	Executa expressões JS no runtime do app (estilo REPL)
ios_screenshot / android_screenshot	Tira capturas de tela do dispositivo — ios_screenshot também funciona em iPhone/iPad físico conectado via USB (apenas captura)

Uso

1. Inicie seu app React Native:

   npm start
   # or
   expo start
   

2. Apenas descreva o que você quer em linguagem natural — o agente escolhe as ferramentas certas. Você não precisa saber nomes de ferramentas ou pedir uma específica. Por exemplo:

   Connect to the simulator and investigate what caused the error on the screen
   

   Check the network logs and investigate why this error is happening
   

   Why is the current screen empty? Take a look and figure it out
   

   Tap the "Sign in" button and tell me what happens
   

   The list won't scroll — scroll it down and check what's going on
   

   Why does this button look wrong — what component renders it and where?
   

   O agente conecta ao Metro, lê logs e rede, inspeciona a tela e controla a interface conforme necessário para responder.

Guias Detalhados

Guia	Descrição
Configuração	Configuração MCP por cliente (Claude, Codex, Cursor, VS Code, …), configuração Android & iOS
Configuração do SDK	Instale e init() o SDK no app para conectar stores + camada de rede ao agente
Logs de Console	get_logs parâmetros, filtragem, modo resumo, otimização de tokens
Rastreamento de Rede	Configuração do SDK para captura completa, filtragem, detalhes de requisição, estatísticas
Simulação de Rede	Tutorial: force um 500, remova um campo, teste uma nova tentativa, fique offline, reproduza uma requisição
Inspeção do App	Depure globais (Apollo, Redux, Expo Router), execute_in_app, limitações
Inspeção de Layout e Componentes	get_screen_layout, árvore de componentes, inspect_at_point, find_components
Interação com Dispositivo	tap unificado, gestos específicos de plataforma, entrada de texto, eventos de tecla
Extração de Texto por OCR	OCR Cloud Vision dentro do tap, fallback offline, configuração de idioma
Habilidades do Claude Code	Habilidades pré-construídas para configuração de sessão, depuração e automação
Referência Completa de Ferramentas	Lista completa de todas as 62 ferramentas com descrições

Como Funciona

1. Busca a lista de dispositivos no endpoint /json do Metro
2. Conecta ao runtime JS principal via CDP (Chrome DevTools Protocol) WebSocket
3. Habilita Runtime.enable para receber eventos Runtime.consoleAPICalled
4. Captura de rede por dois caminhos:
   • Com SDK: Lê do buffer interno do SDK via Runtime.evaluate — captura todas as requisições desde o início com cabeçalhos e corpos completos, incluindo eventos de inicialização a frio que o CDP perderia
   • Sem SDK: Habilita Network.enable do CDP (em alvos suportados) ou injeta um interceptor de fetch JS como fallback. Na inicialização a frio, eventos emitidos antes do estabelecimento da conexão CDP são perdidos; recarregamentos subsequentes capturam tudo
5. A simulação de respostas roda no mesmo interceptor injetado: as regras são verificadas antes de a requisição chegar à rede e são reenviadas a cada novo contexto JS para sobreviverem a recarregamentos
6. Armazena logs e requisições de rede em buffers circulares para recuperação

Gerenciamento de Conexão

• Um servidor por sessão — cada sessão de agente (cada terminal ou janela de IDE) executa sua própria instância do servidor MCP do ExecBro.
• Conecta sob demanda, não na inicialização — o servidor nunca conecta automaticamente. Ele só anexa ao seu app React Native em execução quando você pede (ex.: scan_metro), então fica fora do caminho até você realmente precisar de um dispositivo.
• Um driver por dispositivo — se duas ou mais sessões no mesmo projeto apontarem para o mesmo Metro/dispositivo, elas competirão pelo controle, como um carro com dois volantes. Mantenha a interação em uma única sessão por dispositivo.
• Quer sessões paralelas? Dê a cada uma seu próprio dispositivo + porta — execute trabalhos separados em um git worktree com sua própria instância do Metro em uma porta diferente e conecte um segundo dispositivo (simulador/emulador) a ele. Por exemplo, mantenha main na porta padrão 8081 e inicie o Metro do worktree em 8082 (npx react-native start --port 8082, ou npx expo start --port 8082), depois inicie o app do worktree apontando para 8082. Cada sessão de agente então scan_metro e controla seu próprio dispositivo, então os dois nunca disputam a conexão.

Solução de Problemas

Nenhum dispositivo encontrado

• Certifique-se de que o app está rodando em um simulador/dispositivo
• Verifique se o bundler Metro está rodando (npm start)

Logs não aparecendo

• Garanta que o app está ativamente em execução (não apenas o Metro)
• Tente clear_logs e depois dispare algumas ações no app
• Verifique get_apps para confirmar o status da conexão
• Na inicialização a frio (primeiro lançamento): A conexão CDP é estabelecida depois que o código de inicialização inicial do app já foi executado, então logs de inicialização e requisições de rede são perdidos. Uma vez conectado, use reload_app — o recarregamento subsequente captura tudo desde o início porque a conexão já está estabelecida. Para capturar eventos de inicialização em todos os lançamentos, instale o SDK opcional

Telemetria e Privacidade

Nenhum código-fonte, caminho de arquivo ou conteúdo do app é enviado. Seu app e seu repositório permanecem na sua máquina.

O ExecBro envia dois sinais pequenos:

• Analytics de produto (opcional) — nomes de ferramentas, sucesso/falha e durações. É isso que alimenta seu painel de uso e me diz quais ferramentas estão instáveis e valem correção. Desative a qualquer momento com EXECBRO_TELEMETRY=false na configuração do seu servidor MCP.
• Contagem de uso — um total acumulado de quantas chamadas de ferramenta você fez. É um número, não conteúdo, e é o único sinal que continua rodando quando o analytics está desativado.

Consulte o guia de Telemetria e Coleta de Dados para o detalhamento completo campo por campo, e PRIVACY.md para a política de privacidade completa.

Versões Suportadas do React Native

Versão	Arquitetura	Engine	Status
Expo SDK 54+	Bridgeless (Nova Arch)	Hermes	✓ Totalmente suportado
RN 0.76+	Bridgeless (Nova Arch)	Hermes	✓ Totalmente suportado
RN 0.73 - 0.75	Bridge (Arch Antiga)	Hermes	✓ Totalmente suportado (melhor captura de rede via CDP)
RN 0.70 - 0.72	Bridge (Arch Antiga)	Hermes / JSC	✓ Suportado
RN < 0.70	Bridge	JSC	Não testado

Preços

O ExecBro é gratuito. Todas as ferramentas, sem limite, sem necessidade de conta. Vincular uma conta é opcional e só dá acesso ao painel de uso.

Feedback e Solicitações de Recursos

Por favor, execute isto ao final da sua sessão para me ajudar a melhorar as ferramentas. O ExecBro é construído para agentes de IA, então o feedback mais valioso vem do próprio agente — cole este prompt ao seu agente:

Escreva um relatório sobre sua experiência com as ferramentas do ExecBro — onde você teve dificuldades e o que poderia ser melhorado. Salve-o como um arquivo Markdown para mim e envie-o usando a ferramenta send_feedback (digite "feedback") para que se torne uma issue no GitHub.

Leva 30 segundos: seu agente executa send_feedback, entrega a você uma URL de issue pré-preenchida do GitHub (informações de ambiente já anexadas), e você clica em enviar — sem configuração do GitHub, sem copiar e colar. Registros reais de atrito de sessões reais são o que moldam o roadmap e são corrigidos primeiro, então envie um, por favor. 🙏 E se você tiver apenas uma ideia rápida ou pergunta, entre no GitHub Discussions para compartilhar feedback, solicitar recursos e votar no que será construído em seguida.

Nomes de pacotes e como se manter atualizado

Distribuído como o pacote npm execbro. O pacote foi anteriormente publicado como react-native-ai-devtools e antes disso como react-native-ai-debugger — ambos os nomes legados continuam recebendo builds idênticos via mirror-publish, então instalações existentes e configurações MCP continuam funcionando sem alterações. Novas instalações devem usar execbro.

[!IMPORTANT] Já está usando o ExecBro? npx armazena pacotes em cache indefinidamente, então você pode estar preso a uma versão antiga sem perceber. Atualize sua configuração MCP para usar npx -y execbro@latest (veja Configuração) para que cada sessão baixe a versão mais recente com novas ferramentas e correções de bugs. Novas instalações após esta alteração atualizam automaticamente.

Licença

MIT