Flutter Inspector MCP Server

MCP-Server + Flutter MCP-Toolkit

Für KI-gestützte Entwicklung

🔍 Model Context Protocol (MCP)-Server, der Ihre Flutter-Apps mit KI-Codierungsassistenten wie Cursor, Claude, Cline, Windsurf, RooCode oder jedem anderen KI-Assistenten verbindet, der MCP-Server unterstützt

📖 Dokumentation

• Schnellstart
• Konfiguration

[!NOTE] Das Flutter-Team entwickelt derzeit ein neues experimentelles Paket, das die Entwicklung von Dart-Tools ermöglicht.

Daher liegt mein aktueller Schwerpunkt auf

1. um Tools zu stabilisieren und zu verfeinern, die in der Entwicklung nützlich sind (so dass es mehr Plug & Play wäre, zum Beispiel: es gibt nicht nur die Fehler zurück, sondern fordert die KI auch auf, mit diesem Fehler umzugehen) . Weitere Informationen finden Sie in MCP_RPC_DESCRIPTION.md
2. Optimieren Sie den Prozess der Erstellung von MCP-Servertools, indem Sie ihn anpassbar machen.

Ich hoffe, es wird Ihnen nützlich sein.

Einen schönen Tag noch!

🎉 v2 veröffentlicht! 🎉

Jetzt funktioniert der Flutter MCP-Server ohne Weiterleitungsserver und Devtools-Erweiterung. Weitere Informationen finden Sie in CHANGELOG.md .

⚠️ WARNUNG

Dump-RPC-Methoden (wie dump_render_tree ) können zu einer enormen Token-Nutzung oder einer Kontextüberlastung führen. Daher sind sie standardmäßig deaktiviert, können aber über die Umgebungsvariable DUMPS_SUPPORTED=true aktiviert werden.

Weitere Einzelheiten zu Umgebungsvariablen finden Sie in .env.example .

🚀 Erste Schritte

• (Experimentell) Sie können versuchen, den MCP-Server zu installieren und ihn mit Ihrem AI-Agenten zu konfigurieren. Verwenden Sie die folgende Eingabeaufforderung: Please install MCP server using this link: https://github.com/Arenukvern/mcp_flutter/blob/main/llm_install.md
• mit Cursor: https://www.youtube.com/watch?v=pyDHaI81uts
• mit VSCode + Cline: Eingabeaufforderung verwenden Please install MCP server using this link: https://github.com/Arenukvern/mcp_flutter/blob/main/llm_install.md
• Der Schnellstart ist in QUICK_START.md verfügbar
• Konfigurationsoptionen sind in CONFIGURATION.md verfügbar

🎯 KI-Agenten-Tools

Fehleranalyse

• get_app_errors [Ressource|Tool] – Ruft präzise und komprimierte Fehlerinformationen aus Ihrer Flutter-App ab. Verwendung :
  • Verwendet nur eine kurze Beschreibung des Fehlers. Sollte doppelte Fehler filtern, um zu vermeiden, dass das Agenten-Kontextfenster mit denselben Fehlern überflutet wird.
  • Verwendet den Fehlermonitor, um Dart-VM-Fehler zu erfassen. Alle Fehler werden in der Flutter-App erfasst und sind dann auf Anfrage vom MCP-Server verfügbar.

  Getestet auf : ✅ macOS, ✅ iOS Nicht getestet auf : 🚧 Android, 🤔 Windows, 🤔 Linux, ❌ Web Siehe Problem

Entwicklungstools

• view_screenshot [Ressource|Tool] – Erstellt einen Screenshot der laufenden Anwendung. Konfiguration :
  • Aktivieren mit dem Flag --images oder IMAGES_SUPPORTED=true
  • Verwendet PNG-Komprimierung, um die Bildgröße zu optimieren.
• get_view_details [Ressource|Tool] – Bildschirmgröße, Pixelverhältnis. Kann einem Agenten die Möglichkeit zur Widget-Auswahl freischalten.

Alle Tools verwenden standardmäßig Port 8181, wenn kein Port angegeben ist. Sie können dies durch die Angabe einer bestimmten Portnummer überschreiben.

📚 Weitere Informationen finden Sie in MCP_RPC_DESCRIPTION

🔒 Sicherheit

Da Sie den MCP-Server verwenden, um im Debug-Modus eine Verbindung zur Flutter-App herzustellen, sollte die Verwendung grundsätzlich sicher sein. Ich empfehle jedoch, die Funktionsweise in ARCHITECTURE.md zu überprüfen und zu erfahren, wie dies bei Bedarf zur Verbesserung der Sicherheit geändert werden kann.

Dieser MCP-Server wird von MseeP.ai verifiziert.

🔧 Fehlerbehebung

1. Verbindungsprobleme
   • Stellen Sie sicher, dass Ihre Flutter-App im Debug-Modus ausgeführt wird
   • Überprüfen Sie, ob die Ports sowohl in der Flutter-App als auch auf dem MCP-Server übereinstimmen.
   • Überprüfen Sie, ob der Port nicht von einem anderen Prozess verwendet wird
2. KI-Tool erkennt Inspector nicht
   • Starten Sie das KI-Tool nach Konfigurationsänderungen neu
   • Überprüfen der JSON-Konfigurationssyntax
   • Überprüfen Sie die Protokolle des Tools auf Verbindungsfehler

Der Flutter MCP-Server ist im Register von Smithery registriert, sodass er über eine standardisierte Schnittstelle von anderen KI-Tools gefunden und verwendet werden kann.

Integrationsarchitektur

🤝 Beitragen

Beiträge sind willkommen! Senden Sie gerne Pull Requests oder melden Sie Probleme im GitHub-Repository .

📖 Mehr erfahren

• Flutter DevTools-Dokumentation
• Dart VM-Dienstprotokoll
• Flutter DevTools RPC-Konstanten (ich vermute und hoffe, dass sie korrekt sind:))

Sternengeschichte

📄 Lizenz

MIT – Nutzen Sie es gerne in Ihren Projekten!

Flutter und Dart sind Marken von Google LLC.