Flutter MCP 2

🚀 Flutter MCP Service v2.0

Model Context Protocol (MCP) を用いた高度なFlutter開発ツールです。インテリジェントキャッシュ、トークン管理、公式ドキュメントの統合機能を備えています。

🚀 クイックスタート

インストール

# リポジトリをクローンする
git clone https://github.com/dvillegastech/flutter_mcp_2.git
cd flutter_mcp_service

# 依存関係をインストールする
npm install

# キャッシュを初期化する
mkdir -p .cache

# ヘルスチェックを実行する
npm run health-check

# サービスを起動する
npm start

Claude Desktop / Cursor との統合

MCP設定ファイルに以下を追加します。

{
  "mcpServers": {
    "flutter-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/flutter_mcp_service/src/index.js"]
    }
  }
}

📋 完全なツールリストとコマンド

🆕 統合ツール (v2.0)

1. flutter_status

サービスの健全性とキャッシュ統計を確認します。

@flutter-mcp use flutter_status to check service health

2. flutter_search

Flutter/Dartのドキュメント、パッケージ、サンプルを対象とした汎用検索を行います。

@flutter-mcp use flutter_search with query "Container" and limit 5
@flutter-mcp use flutter_search to find ListView examples

パラメータ:

• query (必須): 検索語
• limit (オプション): 最大結果数 (デフォルト: 10)
• maxTokens (オプション): レスポンスサイズ制限 (デフォルト: 4000)

3. flutter_analyze

スマートなFlutterドキュメント取得とコード分析を行います。

@flutter-mcp use flutter_analyze with identifier "Container"
@flutter-mcp use flutter_analyze with identifier "Container" and this code:
Container(
  width: 100,
  height: 100,
  color: Colors.blue,
)

パラメータ:

• identifier (必須): ウィジェット/クラス名またはパッケージ
• code (オプション): 分析するコード
• topic (オプション): "all", "docs", "analysis", "examples" (デフォルト: "all")
• maxTokens (オプション): レスポンスサイズ制限
• includeExamples (オプション): コードサンプルを含める (デフォルト: true)
• includeAnalysis (オプション): コード分析を含める (デフォルト: true)

🔧 旧ツール (下位互換性あり)

4. analyze_widget

Flutterウィジェットコードのベストプラクティス、パフォーマンス、アクセシビリティを分析します。

@flutter-mcp use analyze_widget with this widgetCode:
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Hello World'),
    );
  }
}

パラメータ:

• widgetCode (必須): Flutterウィジェットコード
• checkAccessibility (オプション): アクセシビリティをチェックする (デフォルト: true)
• checkPerformance (オプション): パフォーマンスをチェックする (デフォルト: true)

5. validate_flutter_docs

公式Flutterドキュメントに対してコードを検証します。

@flutter-mcp use validate_flutter_docs with this code:
Container(
  color: Colors.red,
  decoration: BoxDecoration(color: Colors.blue), // This will be flagged
)

パラメータ:

• code (必須): Flutter/Dartコード
• widgetType (オプション): 対象とする特定のウィジェット

6. analyze_pub_package

pub.devのパッケージの品質と互換性を分析します。

@flutter-mcp use analyze_pub_package with packageName "provider"
@flutter-mcp use analyze_pub_package with packageName "dio" and checkDependencies true

パラメータ:

• packageName (必須): pub.devのパッケージ名
• checkDependencies (オプション): 依存関係を分析する (デフォルト: true)
• checkScores (オプション): pub.devのスコアを取得する (デフォルト: true)

7. suggest_improvements

Flutterのベストプラクティスに基づいて改善提案を取得します。

@flutter-mcp use suggest_improvements for this code:
ListView(
  children: List.generate(1000, (i) => Text('Item $i')),
)

パラメータ:

• code (必須): Flutterコード
• focusArea (オプション): "performance", "accessibility", "maintainability", "all"

8. analyze_performance

Flutterウィジェットツリーのパフォーマンス問題を分析します。

@flutter-mcp use analyze_performance with this widgetTree:
Column(
  children: [
    for (int i = 0; i < 100; i++)
      Container(child: Text('Item $i')),
  ],
)

パラメータ:

• widgetTree (必須): ウィジェットツリーコード
• checkRebuildOptimization (オプション): 再構築をチェックする (デフォルト: true)
• checkMemoryLeaks (オプション): メモリリークをチェックする (デフォルト: true)

9. analyze_architecture

プロジェクトアーキテクチャの遵守状況を分析します。

@flutter-mcp use analyze_architecture with projectStructure {
  "lib": {
    "features": ["auth", "home", "profile"],
    "core": ["network", "database"],
    "shared": ["widgets", "utils"]
  }
} and pattern "clean"

パラメータ:

• projectStructure (必須): プロジェクトのディレクトリ構造
• pattern (オプション): "clean", "mvvm", "mvc", "auto"
• checkDependencies (オプション): 依存関係の違反をチェックする (デフォルト: true)

10. analyze_bundle_size

最適化提案付きでアプリバンドルサイズを分析します。

@flutter-mcp use analyze_bundle_size with buildPath "/path/to/build" and platform "android"

パラメータ:

• buildPath (必須): ビルド出力のパス
• platform (オプション): "android", "ios", "web", "all"
• includeAssets (オプション): アセット分析を含める (デフォルト: true)

11. generate_tests

包括的なFlutterテストを生成します。

@flutter-mcp use generate_tests for this widgetCode:
class CounterButton extends StatelessWidget {
  final VoidCallback onPressed;
  final int count;
  
  const CounterButton({required this.onPressed, required this.count});
  
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text('Count: $count'),
    );
  }
}

パラメータ:

• widgetCode (必須): ウィジェットコード
• testType (オプション): "unit", "widget", "integration", "golden", "all"
• includeAccessibility (オプション): アクセシビリティテストを含める (デフォルト: true)

12. trace_state

Flutterウィジェットの状態フローと再構築をトレースします。

@flutter-mcp use trace_state with this widgetCode:
class MyStatefulWidget extends StatefulWidget {
  // ... widget code
}

パラメータ:

• widgetCode (必須): ウィジェットコード
• traceRebuildPaths (オプション): 再構築をトレースする (デフォルト: true)
• generateVisualization (オプション): ビジュアライゼーションを生成する (デフォルト: true)

13. generate_clean_architecture

クリーンアーキテクチャ構造を生成します。

@flutter-mcp use generate_clean_architecture with projectName "todo_app" and features ["auth", "todos", "settings"]

パラメータ:

• projectName (必須): プロジェクト/機能名
• features (必須): 機能のリスト
• stateManagement (オプション): "riverpod", "bloc", "provider", "getx"
• includeDI (オプション): 依存性注入を含める (デフォルト: true)

14. generate_l10n

ARBファイルを用いたローカライズ設定を生成します。

@flutter-mcp use generate_l10n with languages ["en", "es", "fr"]

パラメータ:

• languages (必須): サポートする言語コード
• translations (オプション): 初期翻訳
• includeRTL (オプション): RTLサポートを含める (デフォルト: true)
• includePluralization (オプション): 複数形サポートを含める (デフォルト: true)

15. monitor_performance

パフォーマンス監視設定を生成します。

@flutter-mcp use monitor_performance with monitoringType "balanced"

パラメータ:

• monitoringType (必須): "comprehensive", "balanced", "lightweight"
• includeNetwork (オプション): ネットワークを監視する (デフォルト: true)
• includeMemory (オプション): メモリを監視する (デフォルト: true)
• includeAnalytics (オプション): 分析を含める (デフォルト: true)

16. diagnose_render_issues

レンダリング問題を診断して修正します。

@flutter-mcp use diagnose_render_issues with this widgetCode:
Row(
  children: [
    Expanded(child: Text('Long text')),
    Container(width: double.infinity), // This will cause issues
  ],
)

パラメータ:

• widgetCode (必須): 問題のあるウィジェットコード
• errorType (オプション): "overflow", "constraint", "layout", "all"
• includeVisualization (オプション): デバッグビジュアライゼーションを含める (デフォルト: true)

17. analyze_test_coverage

提案付きでテストカバレッジを分析します。

@flutter-mcp use analyze_test_coverage with coverageData {...} and targetCoverage 80

パラメータ:

• coverageData (必須): lcovからのカバレッジデータ
• projectStructure (必須): プロジェクトのファイル構造
• targetCoverage (オプション): 目標パーセンテージ (デフォルト: 80)
• generateReport (オプション): ビジュアルレポートを生成する (デフォルト: true)

💻 使用例

基本的なウィジェット分析

@flutter-mcp analyze this Flutter widget for issues:
Container(
  child: Column(
    children: List.generate(100, (i) => Text('Item $i')),
  ),
)

パッケージ調査

@flutter-mcp search for "state management" packages and analyze the top result

パフォーマンス最適化ワークフロー

1. @flutter-mcp analyze_performance for my widget tree
2. @flutter-mcp suggest_improvements based on performance issues
3. @flutter-mcp generate_tests for the optimized code

フルプロジェクト分析

@flutter-mcp analyze_architecture for my project and suggest clean architecture improvements

🔧 開発コマンド

# 自動リロードで開発する
npm run dev

# テストを実行する
npm test
npm run test:integration
npm run test:coverage

# ヘルスチェックを実行する
npm run health-check

# リントとフォーマットを行う
npm run lint
npm run format

# Docker
npm run build:docker
npm run docker:run

# キャッシュをクリーンする
npm run clean

✨ 主な機能

• インテリジェントキャッシュ: TTL付きのSQLite + メモリ内キャッシュ
• トークン管理: GPT - 3エンコーダによるスマートなトランケーション
• エラーハンドリング: リトライロジック付きのサーキットブレーカーパターン
• レート制限: 礼儀正しいAPI使用 (2 req/sec)
• 公式ドキュメント統合: リアルタイムのFlutter/Dartドキュメント
• マルチプラットフォーム: npm、Docker、直接インストール
• ヘルスモニタリング: 組み込みのヘルスチェックと統計

🏗️ アーキテクチャ

詳細なアーキテクチャドキュメントについては docs/ARCHITECTURE.md を参照してください。

🤝 コントリビュートについて

開発ガイドラインについては docs/DEVELOPMENT.md を参照してください。

📄 ライセンス

MITライセンス - 詳細はLICENSEファイルを参照してください。

🙏 謝辞

• 優れたドキュメントを提供しているFlutterチーム
• MCP SDKの貢献者の皆さん
• adamsmaka/flutter - mcpからのインスピレーション

Made with ❤️ for the Flutter community