Rumanian-alveolarbed219/metro-mcp

Was macht metro-mcp?

Debuggen Sie React Native-Apps mit einem plugin-basierten MCP-Server für Metro, Hermes und Chrome DevTools, ohne dass für die meisten Aufgaben Code-Änderungen in der App erforderlich sind.

Überblick

metro-mcp ist ein MCP-Server (Model Context Protocol), der speziell für das Debugging von React Native-Anwendungen entwickelt wurde. Er fungiert als Brücke zwischen KI-gestützten Entwicklungstools (wie Claude Code, Cursor, Codex) und den Debugging-Schnittstellen von React Native (Metro Bundler, Hermes Runtime, Chrome DevTools-Protokoll).

Hauptfunktionen

• Plugin-basiert: Erweiterbar durch benutzerdefinierte Plugins für spezifische Debugging-Szenarien.
• Keine Code-Änderungen: Für die meisten Debugging-Aufgaben muss der App-Code nicht geändert werden – einfach den MCP-Server starten und verbinden.
• Unterstützte Plattformen:
  • Metro: Bundling-Informationen, Bundle-Inspektion
  • Hermes: Laufzeit-Debugging über Chrome DevTools-Protokoll
  • Chrome DevTools: WebSocket-basierte Kommunikation für DOM-Inspektion, Logging und Breakpoints
• Integrierbar: Nahtlose Integration in MCP-kompatible KI-Assistenten (z. B. Claude Code, Cursor, Codex).

Installation

# Mit npm global installieren
npm install -g @rumanian-alveolarbed219/metro-mcp

# Oder als Projektabhängigkeit (im React Native-Projekt)
npm install --save-dev @rumanian-alveolarbed219/metro-mcp

Schnellstart

1. Starten Sie den MCP-Server:

   npx @rumanian-alveolarbed219/metro-mcp
   

2. Konfigurieren Sie Ihren MCP-kompatiblen KI-Assistenten (z. B. in claude_desktop_config.json für Claude Code):

   {
     "mcpServers": {
       "metro-mcp": {
         "command": "npx",
         "args": ["@rumanian-alveolarbed219/metro-mcp"]
       }
     }
   }
   

3. Verbinden Sie das Tool mit Ihrer laufenden React Native-App (Port 8081 für Metro, Port 9229 für Hermes).
4. Nutzen Sie die verfügbaren MCP-Tools, um Debugging-Aktionen auszuführen.

Verfügbare Tools (Beispiele)

• get_bundle_info: Ruft Informationen über das aktuelle JavaScript-Bundle ab (Größe, Module, Abhängigkeiten).
• get_hermes_heap_snapshot: Nimmt einen Heap-Snapshot der Hermes-Laufzeit auf.
• list_network_requests: Zeigt aktuelle Netzwerkanfragen der App an (über Chrome DevTools-Protokoll).
• toggle_element_inspector: Aktiviert/deaktiviert den Element-Inspektor in Chrome DevTools.
• run_custom_plugin: Führt ein benutzerdefiniertes Plugin aus (erfordert Plugin-Definition).

Weitere Tools und Dokumentation finden Sie im offiziellen Repository.

Plugin-Entwicklung

Sie können eigene Plugins erstellen, um den Funktionsumfang zu erweitern. Ein Plugin ist eine einfache JavaScript-Datei, die eine execute(context)-Funktion exportiert. Beispiel:

// my-plugin.js
module.exports = {
  name: 'my-plugin',
  description: 'Ein benutzerdefiniertes Plugin',
  async execute(context) {
    // context.metroClient, context.hermesClient, context.debuggerClient sind verfügbar
    const bundleInfo = await context.metroClient.getBundleInfo();
    return { status: 'ok', data: bundleInfo };
  }
};

Lizenz

MIT