mcp_flutter MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

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

Démo en direct

Aperçu en pratique

flutter.replay ▶ prêt

0/0

Installer

Choisissez votre 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
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

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

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

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

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

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

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

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

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

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : mcp_flutter

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

👤 Flutter devs ⏱ ~15 min intermediate

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

Prérequis

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

Déroulement

Connect

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

→ 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.✓ Copié

→ Screenshot + error log
Suggest fix

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

→ Code diff proposal

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

Pièges

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

Quand l'utiliser : Your app has debug-only seeders / state toggles you want AI to call during dev.

Déroulement

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.✓ Copié

→ Dart snippet registering tools
Drive from Claude

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

→ Multi-step tool call sequence with final screenshot

Résultat : Faster manual QA via chat-driven state manipulation.

Pièges

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

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

Déroulement

Get view details

get_view_details for the current screen and summarize the widget hierarchy.✓ Copié

→ Widget tree summary
Ask why

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

→ Layout reasoning grounded in actual tree

Résultat : Faster onboarding to unfamiliar Flutter code.

Pièges

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

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

flutter + git-2

Debug → fix → commit loop

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

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
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

Coût et limites

Coût d'exécution

Quota d'API: None
Tokens par appel: Screenshots are large (~1-3k vision tokens); widget trees 500-5k
Monétaire: Free, MIT
Astuce: Disable screenshots (remove --images) when debugging non-visual issues — widget tree + errors are much cheaper.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : None — connects to local Dart VM service

Sortie de données : Local only in typical use; screenshots go to your LLM provider

Ne jamais accorder : 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.

Dépannage

Erreurs courantes et correctifs

Cannot connect to Dart VM

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

Vérifier : 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.

Alternatives

mcp_flutter vs autres

Alternative	Quand l'utiliser	Compromis
Flutter DevTools MCP	You want the official Flutter tooling	Doesn't exist yet as an MCP; this is the closest

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills