/ ディレクトリ / プレイグラウンド / mcp_flutter
● コミュニティ Arenukvern ⚡ 即起動

mcp_flutter

作者 Arenukvern · Arenukvern/mcp_flutter

Claude(またはCursor)から実行中のFlutterアプリを検査できます。エラー、スクリーンショット、ウィジェットツリーをDart VMサービス経由で確認し、アプリ内で登録したダイナミックなカスタムツールも利用可能です。

mcp_flutterは、MCPサーバーとmcp_toolkit Dartパッケージを組み合わせたものです。mcp_toolkitはデバッグモードのFlutterアプリ内で動作し、アプリのエラー、スクリーンショット、ビューの詳細、およびアプリが実行時に登録したカスタムツールをAIコーディングアシスタントに直接公開します。

なぜ使うのか

主な機能

ライブデモ

実際の動作

flutter.replay ▶ 準備完了
0/0

インストール

クライアントを選択

~/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
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

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

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

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

Claude Desktop と同じ形式。Windsurf を再起動して反映。

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

Continue はマップではなくサーバーオブジェクトの配列を使用。

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

context_servers に追加。保存時に Zed がホットリロード。

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

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: mcp_flutter

実行中のアプリをAIに見せてFlutterの描画エラーをデバッグする

👤 Flutter開発者 ⏱ ~15 min intermediate

使うタイミング: UIの調整中に何かが壊れたとき。状況を言葉で説明する代わりに、AIにスクリーンショットとエラーを直接見せましょう。

前提条件
  • mcp_toolkitパッケージを含むFlutterアプリ — pubspec.yamlに追加し、main()で初期化する
  • デバッグモードで実行中であること — flutter run — サーバーがDart VMサービスに接続します
フロー
  1. 接続
    Connect to my running Flutter app (VM port 8181) via mcp_flutter.✓ コピーしました
    → ツールリストにget_app_errors、view_screenshotが表示される
  2. 状態をキャプチャ
    Take a screenshot of the current view. Also pull any errors from the last 60 seconds.✓ コピーしました
    → スクリーンショットとエラーログ
  3. 修正を提案
    Based on this error and screenshot, what's wrong and how do I fix it?✓ コピーしました
    → コード差分の提案

結果: AIが次のスクリーンショットで修正結果を確認できる、高速なデバッグループが実現します。

注意点
  • スクリーンショットツールはデフォルトで無効 — サーバーを--imagesフラグ付きで起動してください
  • 複数アプリ実行時にVMポートが競合する — アプリごとに--vm-service-portを指定してください。デフォルトは8181です

アプリのテストハーネスをMCPツールとして公開する

👤 QAワークフローを構築するFlutter開発者 ⏱ ~30 min intermediate

使うタイミング: アプリにデバッグ専用のシーダーや状態トグルがあり、開発中にAIから呼び出したい場合。

フロー
  1. Dartでツールを登録
    Using mcp_toolkit, register tools seed_users(count: int) and set_feature_flag(name: str, value: bool) in my app's debug initializer.✓ コピーしました
    → ツールを登録するDartスニペット
  2. Claudeから操作
    Seed 10 users, flip feature flag 'new_checkout' to true, take screenshot of checkout screen.✓ コピーしました
    → 複数ステップのツール呼び出しシーケンスと最終スクリーンショット

結果: チャットによる状態操作で手動QAが高速化します。

注意点
  • ツールが誤ってリリースビルドに含まれる — 登録処理をkDebugModeでゲートしてください。リリースビルドではツールが見えなくなります

複雑なウィジェットツリーを理解する

👤 他の人のコードを引き継いだFlutter開発者 ⏱ ~20 min intermediate

使うタイミング: 画面がなぜそのように描画されるのか理解しようとしていて、コードに8階層のネストされたBuilderがある場合。

フロー
  1. ビュー詳細を取得
    get_view_details for the current screen and summarize the widget hierarchy.✓ コピーしました
    → ウィジェットツリーのサマリー
  2. 理由を聞く
    Why does this text overflow? Reference specific widgets in the tree.✓ コピーしました
    → 実際のツリーに基づいたレイアウトの分析

結果: 不慣れなFlutterコードへのオンボーディングが速くなります。

注意点
  • 大きなウィジェットツリーがトークン予算を圧迫する — まず深さ制限付きのサマリーを取得し、必要な部分を掘り下げてください

組み合わせ

他のMCPと組み合わせて10倍の力を

flutter + git-2

デバッグ → 修正 → コミットのループ

Screenshot, diagnose, have me apply the fix, then git_commit with message describing the fix.✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
get_app_errors since?: int (seconds) 実行中のアプリでバグを再現した後に使用 free
view_screenshot 視覚的な確認に使用。--imagesフラグが必要 tokens per image
get_view_details レイアウトや画面のジオメトリを把握する際に使用 free
<custom> Varies per app registration mcp_toolkitで登録した任意のツール free

コストと制限

運用コスト

APIクォータ
なし
呼び出しあたりのトークン
スクリーンショットは大きめ(約1〜3kビジョントークン)、ウィジェットツリーは500〜5k
金額
無料、MITライセンス
ヒント
非ビジュアルな問題のデバッグ時はスクリーンショットを無効化(--imagesを外す)してください。ウィジェットツリー+エラーの方がはるかに低コストです。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管: なし — ローカルのDart VMサービスに接続します
データ送信先: 通常の使用ではローカルのみ。スクリーンショットはLLMプロバイダーに送信されます
絶対に付与しない: Expose VM service port to the network in release builds

トラブルシューティング

よくあるエラーと対処法

Cannot connect to Dart VM — Dart VMに接続できない

まずFlutterアプリを起動し、その後MCPサーバーを起動してください。VMポート(通常8181)がコンフィグと一致していることを確認してください。

確認: curl http://127.0.0.1:8181/
Screenshots return 404 — スクリーンショットが404を返す

サーバーが--imagesフラグなしで起動されています。フラグを付けて再起動してください。

Custom tools not showing up — カスタムツールが表示されない

mcp_toolkitはrunApp後に初期化する必要があります。kDebugModeゲートがビルドでfalseになっていないか確認してください。

代替案

mcp_flutter 他との比較

代替案代わりに使う場面トレードオフ
Flutter DevTools MCP公式のFlutterツールを使いたい場合MCPとしてはまだ存在しません。本サーバーが現時点で最も近い代替です

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る