AI を活用した開発のための Flutter Inspector MCP サーバー

GitHubリポジトリ

🔍 Model Context Protocol (MCP) サーバーは、Flutter アプリを、Cursor、Claude、Cline、Windsurf、RooCode などの AI コーディング アシスタントや、MCP サーバーをサポートするその他の AI アシスタントに接続します。

macOS でカーソルを使用して MCP サーバーを設定する方法については、短いビデオチュートリアルをご覧ください - https://www.youtube.com/watch?v=NBY2p7XIass

[!NOTE] Dart ツール開発ツールのアクションをクライアントに公開する新しい実験的なパッケージが開発中であるため、将来的にはこのプロジェクトはあまり必要なくなるかもしれません。

したがって、私の現在の焦点は

1. 開発に役立つツールのみを安定化および洗練させる（プラグアンドプレイ性を高める）詳細については、MCP_RPC_DESCRIPTION.md を参照してください。

2. 転送サーバーを使用しない回避策を見つけます。

あなたにとって役立つことを願っています。

良い１日を！

現在、Flutterは転送サーバーを介してMCPサーバーと連携しています。詳細はアーキテクチャをご覧ください。

⚠️ 警告 ⚠️

ダンプRPCメソッド（ dump_render_treeなど）は、大量のトークンの使用やコンテキストのオーバーロードを引き起こす可能性があります。そのため、現在はデフォルトで無効になっていますが、環境変数DUMPS_SUPPORTED=true設定することで有効にできます。

環境変数の詳細については、 .env.exampleを参照してください。

Related MCP server: flutter-dev-mcp

🚀 はじめに

• クイックスタートはQUICK_START.mdで利用可能です

• 設定オプションはCONFIGURATION.mdで利用可能です。

🎯 AIエージェントで利用可能なツール

エラー分析

• get_app_errors [リソース|ツール] - Flutterアプリから正確で凝縮されたエラー情報を取得します。使用方法:

  • エラーの簡潔な説明のみを使用します。エージェントのコンテキストウィンドウに同じエラーが大量に表示されないように、重複するエラーをフィルタリングする必要があります。

  • エラーモニターを使用してDart VMのエラーをキャプチャします。つまり、まずMCPサーバー、転送サーバーを起動し、アプリを起動し、DevToolsと拡張機能を開き、アプリをリロードしてエラーをキャプチャします。すべてのエラーはDevTools拡張機能（mcp_bridge）でキャプチャされます。

  テスト済み: ✅ macOS、✅ iOSテストされていない環境: 🚧 Android、🤔 Windows、🤔 Linux、❌ Web問題を参照

開発ツール

• hot_reload [ツール] - Flutterアプリケーションのホットリロードを実行します**。テスト済み**: ✅ macOS、✅ iOS、✅ Android。テストされていない環境: 🤔 Windows、🤔 Linux、❌ Web。問題を参照。

• screenshot [リソース|ツール] - 実行中のアプリケーションのスクリーンショットをキャプチャします。設定：

  • --imagesフラグまたはIMAGES_SUPPORTED=true環境変数で有効にする

  • 画像サイズを最適化するために圧縮を使用する場合があります

  テスト済み: ✅ macOS、✅ iOSテストされていない環境: 🚧 Android、🤔 Windows、🤔 Linux、❌ Web問題を参照

ポートが指定されていない場合、すべてのツールはデフォルトでポート8181を使用します。特定のポート番号を指定することで、この設定を上書きできます。

📚 詳細はMCP_RPC_DESCRIPTIONをご覧ください

🔧 トラブルシューティング

get_app_errors - エラーは DevTools 拡張機能でキャプチャされるため、MCP サーバー、転送サーバー、および DevTools mcp_bridge 拡張機能を起動した後、Flutter アプリを再起動または再ロードしたことを確認する必要があります。

また、次の点も確認してください。

1. 転送サーバーが実行中であることを確認します。

2. ブラウザでDevtoolsを開きました。

3. Flutter アプリ開発依存関係に MCP 拡張機能を追加し、Devtools で有効にします。

4. 接続の問題

   • Flutterアプリがデバッグモードで実行されていることを確認する

   • Flutterアプリとインスペクターの両方でポートが一致していることを確認します

   • ポートが他のプロセスによって使用されていないか確認する

5. AIツールが検査官を検出しない

   • 構成変更後にAIツールを再起動します

   • 構成JSON構文を確認する

   • ツールのログで接続エラーを確認します

🚧 Smithery の統合 🚧 (作業中)

Flutter Inspector は Smithery のレジストリに登録されており、標準化されたインターフェースを通じて他の AI ツールで検出および使用できるようになります。

統合アーキテクチャ

┌─────────────────┐     ┌──────────────┐     ┌──────────────┐     ┌─────────────────┐     ┌─────────────┐
│                 │     │              │     │              │     │                 │     │             │
│  Flutter App    │<--->│  DevTools    │<--->│  Forwarding  │<--->│   MCP Server   │<--->│  Smithery   │
│  (Debug Mode)   │     │  Extension   │     │  Server      │     │   (Registered) │     │  Registry   │
│                 │     │              │     │              │     │                 │     │             │
└─────────────────┘     └──────────────┘     └──────────────┘     └─────────────────┘     └─────────────┘

🤝 貢献する

貢献を歓迎します！お気軽にGitHub リポジトリにプルリクエストを送信したり、問題を報告してください。

📖 詳細はこちら

• Flutter DevTools ドキュメント

• Dart VM サービスプロトコル

• Flutter DevTools RPC 定数 (正しいと推測し、願っています :))

📄 ライセンス

MIT - プロジェクトで自由にご利用ください!

Flutter および Dart は Google LLC の商標です。