mcp_flutter MCP — Anwendungsfälle, Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

get_app_errors — condensed error info from the running app
view_screenshot — real screenshots (enable with --images)
get_view_details — screen size, pixel ratio, widget info
Dynamic tool registration — your app registers bespoke tools at runtime
Works with Cursor, Claude (Desktop/Code), Cline, Windsurf via stdio

Live-Demo

In der Praxis

flutter.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "flutter",
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

{
  "context_servers": {
    "flutter": {
      "command": {
        "path": "TODO",
        "args": [
          "See README: https://github.com/Arenukvern/mcp_flutter"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add flutter -- TODO 'See README: https://github.com/Arenukvern/mcp_flutter'

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: mcp_flutter

Debug a Flutter render error with AI eyes on the running app

👤 Flutter devs ⏱ ~15 min intermediate

Wann einsetzen: You're iterating on UI and something broke. Instead of describing it, let the AI see the screenshot + errors.

Voraussetzungen

Flutter app with mcp_toolkit package — Add to pubspec.yaml and initialize in main()
Running in debug mode — flutter run — the server connects to Dart VM service

Ablauf

Connect

Connect to my running Flutter app (VM port 8181) via mcp_flutter.✓ Kopiert

→ Tools list now includes get_app_errors, view_screenshot
Capture state

Take a screenshot of the current view. Also pull any errors from the last 60 seconds.✓ Kopiert

→ Screenshot + error log
Suggest fix

Based on this error and screenshot, what's wrong and how do I fix it?✓ Kopiert

→ Code diff proposal

Ergebnis: Tight debug loop where the AI can verify each fix by looking at the next screenshot.

Fallstricke

Screenshot tool disabled by default — Start the server with --images flag
VM port conflicts when running multiple apps — Specify --vm-service-port per app; default 8181

Expose your app's test harness as MCP tools

👤 Flutter devs building QA workflows ⏱ ~30 min intermediate

Wann einsetzen: Your app has debug-only seeders / state toggles you want AI to call during dev.

Ablauf

Register tools in Dart

Using mcp_toolkit, register tools seed_users(count: int) and set_feature_flag(name: str, value: bool) in my app's debug initializer.✓ Kopiert

→ Dart snippet registering tools
Drive from Claude

Seed 10 users, flip feature flag 'new_checkout' to true, take screenshot of checkout screen.✓ Kopiert

→ Multi-step tool call sequence with final screenshot

Ergebnis: Faster manual QA via chat-driven state manipulation.

Fallstricke

Tools shipped to release mode accidentally — Gate registration with kDebugMode — release builds don't see them

Understand a confusing widget tree

👤 Flutter devs inheriting someone else's code ⏱ ~20 min intermediate

Wann einsetzen: You're trying to understand why a screen renders a certain way and the code has 8 levels of nested Builders.

Ablauf

Get view details

get_view_details for the current screen and summarize the widget hierarchy.✓ Kopiert

→ Widget tree summary
Ask why

Why does this text overflow? Reference specific widgets in the tree.✓ Kopiert

→ Layout reasoning grounded in actual tree

Ergebnis: Faster onboarding to unfamiliar Flutter code.

Fallstricke

Big widget trees blow up token budget — Ask for a depth-limited summary first, then drill in

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

flutter + git-2

Debug → fix → commit loop

Screenshot, diagnose, have me apply the fix, then git_commit with message describing the fix.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen	Kosten
get_app_errors	since?: int (seconds)	After triggering a bug in the running app	free
view_screenshot		Visual verification; requires --images flag	tokens per image
get_view_details		Understand layout / screen geometry	free
<custom>	Varies per app registration	Whatever you register via mcp_toolkit	free

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: None
Tokens pro Aufruf: Screenshots are large (~1-3k vision tokens); widget trees 500-5k
Kosten in €: Free, MIT
Tipp: Disable screenshots (remove --images) when debugging non-visual issues — widget tree + errors are much cheaper.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: None — connects to local Dart VM service

Datenabfluss: Local only in typical use; screenshots go to your LLM provider

Niemals gewähren: Expose VM service port to the network in release builds

Only works in debug/profile mode — release builds lock down the VM service.
Tested on macOS/iOS; Android and desktop support is marked 'not tested' in the README.

Fehlerbehebung

Häufige Fehler und Lösungen

Cannot connect to Dart VM

Start your Flutter app first, then the MCP server. Confirm VM port (usually 8181) matches config.

Prüfen: curl http://127.0.0.1:8181/

Screenshots return 404

Server started without --images flag. Restart with the flag.

Custom tools not showing up

mcp_toolkit must be initialized after runApp; verify kDebugMode gate isn't false in your build.

Alternativen

mcp_flutter vs. andere

Alternative	Wann stattdessen	Kompromiss
Flutter DevTools MCP	You want the official Flutter tooling	Doesn't exist yet as an MCP; this is the closest

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen