💬

Claude CodeでFlutterアプリ開発の精度を高める設定

2025/08/04に公開

Claude CodeでFlutterアプリ開発の精度を高める設定について説明いたします。まず、最新の情報を確認してみましょう。Claude CodeでFlutterのモバイルアプリ開発におけるコードの精度を高めるための、主要なMCPサーバーとサブエージェントの設定方法をご説明します。

 主要なMCPサーバー
 1. Dart MCP Server（公式推奨）Flutter公式チームが提供するMCPサーバーで、Dart SDK 3.9/Flutter 3.35 beta以降が必要です。AI アシスタントに深いプロジェクト洞察を提供し、コードの分析・修正、実行中のアプリケーションとの相互作用、pub.devパッケージの検索、依存関係管理、テスト実行などが可能です。
Claude Codeでの設定方法：
claude mcp add dart -e DART_TOKEN=dsa_... -- npx -y dart-mcp-server@latest
機能：
プロジェクトコードのエラー分析・修正
ホットリロード実行、選択ウィジェット取得
pub.devパッケージ検索と依存関係管理
テスト実行と結果分析
ランタイムエラーの取得

 2. Flutter MCP Server（ドキュメンテーション特化）リアルタイムでFlutter/Dartドキュメンテーションとpub.devパッケージ情報を提供するMCPサーバーで、50,000以上のパッケージをオンデマンドでサポートします。ハルシネーションされたウィジェットや非推奨APIの問題を解決します。
Claude Codeでの設定方法：
# グローバルインストール
npm install -g flutter-mcp

# Claude Codeに追加
claude mcp add flutter-docs -- flutter-mcp
主要機能：
ユニバーサル検索（"Search for Flutter animation widgets"）
スマートドキュメンテーション取得（"Show me Container widget documentation"）
パッケージ固有バージョンのドキュメンテーション

 3. mcp_flutter（Flutter Inspector連携）Flutter Inspector やVM Serviceと連携するMCPサーバーで、動的ツール登録機能により、Flutterアプリが実行時にカスタムツールやリソースを登録できます。
設定手順：
リポジトリのクローンとビルド：
cd ~/Developer
git clone https://github.com/Arenukvern/mcp_flutter
cd mcp_flutter
make install
Flutterアプリにmcp_toolkitを追加：
import 'package:mcp_toolkit/mcp_toolkit.dart';
import 'dart:async';

Future<void> main() async {
  runZonedGuarded(
    () async {
      WidgetsFlutterBinding.ensureInitialized();
      
      // MCP Toolkit初期化
      MCPToolkitBinding.instance
        ..initialize()
        ..initializeFlutterToolkit();
      
      runApp(MyApp());
    },
    (error, stack) {
      MCPToolkitBinding.instance.handleZoneError(error, stack);
    },
  );
}
Claude Codeに追加：
# Flutterアプリを実行して表示されるポートを確認
flutter run -d macos --debug --host-vmservice-port=8181 --enable-vm-service --disable-service-auth-codes

# MCPサーバーを追加（ポート番号は実際の値に置き換え）
claude mcp add flutter-inspector ~/Developer/mcp_flutter/mcp_server_dart/build/flutter_inspector_mcp -- --dart-vm-host=localhost --dart-vm-port=8181 --no-resources --images
重要な注意事項：
Claude Codeで--dangerously-skip-permissionsフラグを使用すると、MCPサーバーが読み込まれないため使用しないでください

--resourcesフラグは「type 'Null' is not a subtype」エラーを引き起こすため、--no-resourcesを使用してください

 4. Flutter Tools MCP Server（診断・分析）Flutter SDKと統合してDart/Flutterファイルの分析と修正を行い、自動化されたコード分析と改善提案を可能にします。
Claude Codeでの設定方法：
claude mcp add-json "flutter-tools" '{"command":"node","args":["/path/to/flutter-tools/build/index.js"],"env":[]}'

 使用上の利点これらのMCPサーバーを設定することで以下の精度向上が期待できます：

リアルタイムドキュメンテーション参照 - 最新のAPI仕様に基づいたコード生成

動的エラー検出・修正 - 実行中のアプリケーションからのリアルタイムエラー情報取得

パッケージ依存関係の自動管理 - 適切なパッケージ選択と自動追加

ホットリロード連携 - コード変更の即座の反映と検証

ウィジェット階層の可視化 - UIの構造理解と最適化提案
これにより、従来は複数ステップ必要だった「調査→ドキュメンテーション読み込み→pubspec.yaml編集→アプリケーションコード記述」プロセスが、単一のリクエストで完結するようになります。
追加でFlutterアプリでのKotlinやSwiftUIコードの生成精度を高める優れたMCPサーバーが多数利用可能です。
以下に主要なものをご紹介します。

 Kotlin開発の精度向上
 1. Android Build MCP ServerAndroidプロジェクトのビルドをVisual Studio Code内でサポートするMCPサーバーで、ClineやRoo Code等の拡張機能と連携してシームレスなAndroid開発ワークフローを提供します。
Claude Codeでの設定方法：
claude mcp add-json "mcpandroidbuild" '{"command":"uvx","args":["mcpandroidbuild"]}'
主要機能：
プロジェクト構造の自動解析
Gradleビルドの実行
単体テストの実行
エラーレポートとデバッグ支援

 2. Android Filesystem MCP ServerAndroidプロジェクトファイルへの安全なアクセスを提供するClaude MCPサーバーで、gradleファイルをチェックして正規のAndroidプロジェクトを検証し、Kotlin、KTS、TOMLファイル、AndroidManifest.xmlの安全な閲覧・読み取りを可能にします。
Claude Codeでの設定方法：
# uvインストール
curl -LsSf https://astral.sh/uv/install.sh | sh

# MCPサーバー追加
claude mcp add-json "Android source code" '{"command":"/path/to/uv","args":["run","--with","mcp[cli]","mcp","run","./filesystem_android/main.py"]}'
セキュリティ機能：

.gradle, .git, buildフォルダへのアクセス阻止
必須gradleファイルの存在確認によるプロジェクト検証
Kotlinソースコードの安全な分析

 3. Kotlin MCP SDK（公式）JetBrainsと共同開発された公式のKotlin MCPサーバーSDKで、JVM、WebAssembly、iOSでKotlin Multiplatformアプリケーションの構築が可能です。標準的なstdio、SSE、WebSocketトランスポートを使用してMCPクライアント・サーバー機能を提供します。
設定例：
import io.modelcontextprotocol.kotlin.sdk.server.Server
import io.modelcontextprotocol.kotlin.sdk.server.StdioServerTransport

val server = Server(
    serverInfo = Implementation(
        name = "kotlin-android-server",
        version = "1.0.0"
    )
)

// Kotlinプロジェクト用ツールの追加
server.addTool("analyze_kotlin_code") { params ->
    // Kotlinコード分析ロジック
}

 4. Android ADB MCP ServerADB（Android Debug Bridge）を介してAndroidデバイスのプログラム制御を提供するMCPサーバーで、デバイス管理機能をMCPクライアント（Claude desktop、Cursor等）からアクセス可能にします。
機能：
インストール済みパッケージの取得
ADBコマンドの実行
UIレイアウト情報の取得（クリック可能要素の詳細情報）

 SwiftUI/iOS開発の精度向上
 1. XcodeBuild MCP Server（推奨）AIエージェントとXcodeプロジェクト間の相互作用を合理化・標準化するMCPサーバーで、一般的なXcode操作専用ツールを提供し、手動または不正確なコマンドライン呼び出しへの依存を排除します。
Claude Codeでの設定方法：
claude mcp add-json "XcodeBuildMCP" '{"command":"npx","args":["-y","xcodebuildmcp@latest"]}'
主要機能：

プロジェクト発見： XcodeプロジェクトとワークスペースのDiscovery

ビルド管理： プロジェクトのビルドとエラー検査

シミュレータ制御： iOS SimulatorリソースによるUUIDと状態の直接アクセス

自律的検証： AIエージェントがプロジェクトをビルドし、エラーを検査し、自律的に反復処理

 2. Apple Developer Documentation MCP ServerApple公式開発者ドキュメント、フレームワーク、API、SwiftUI、UIKit、WWDCビデオへのアクセスを提供するMCPサーバーで、AI支援による自然言語クエリでiOS、macOS、watchOS、tvOS、visionOSドキュメントを検索可能です。
Claude Codeでの設定方法：
npm install -g @kimsungwhee/apple-docs-mcp
claude mcp add apple-docs -- npx @kimsungwhee/apple-docs-mcp
機能例：
"SwiftUIアニメーションウィジェットを検索"
"Container widgetドキュメントを表示"
"SwiftUI WWDC 2024ビデオを検索"
"async/await WWDC講演を検索"

 3. Xcode MCP ServerClaudeとローカルXcode開発環境の橋渡しを提供し、AI支援によるコード作成、プロジェクト管理、自動化開発タスクを可能にします。すべての通信はマシン上で完全に行われ、コードの安全性とプライバシーを確保します。
設定要件：
Node.js 16+
Xcode 12+
macOS 10.15+
Claude Codeでの設定方法：
claude mcp add-json "xcode-server" '{"command":"node","args":["/path/to/xcode-server/build/index.js"],"env":{"PROJECTS_BASE_DIR":"/path/to/your/xcode/projects"}}'

 統合的な使用戦略
 1. Flutter Platform Channels連携これらのMCPサーバーをFlutter開発と組み合わせることで：
// Flutter側
class NativeBridge {
  static const platform = MethodChannel('native_bridge');
  
  Future<String> callNativeMethod() async {
    return await platform.invokeMethod('getNativeData');
  }
}
Kotlin側（Android Build MCPで生成・最適化）：
class MainActivity : FlutterActivity() {
    private val CHANNEL = "native_bridge"
    
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL)
            .setMethodCallHandler { call, result ->
                when (call.method) {
                    "getNativeData" -> result.success(getNativeData())
                    else -> result.notImplemented()
                }
            }
    }
}
Swift側（XcodeBuild MCPで生成・最適化）：
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        let controller = window?.rootViewController as! FlutterViewController
        let nativeChannel = FlutterMethodChannel(name: "native_bridge",
                                                binaryMessenger: controller.binaryMessenger)
        
        nativeChannel.setMethodCallHandler { call, result in
            switch call.method {
            case "getNativeData":
                result(self.getNativeData())
            default:
                result(FlutterMethodNotImplemented)
            }
        }
        
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

 2. 精度向上のメリットこれらのMCPサーバーの組み合わせにより：

リアルタイムドキュメンテーション参照 - 最新のKotlin/SwiftUI APIに基づいた正確なコード生成

プラットフォーム固有のベストプラクティス適用 - Android/iOSの推奨パターンに従ったコード生成

自動ビルド・テスト検証 - コード変更の即座の検証とエラー修正

ネイティブ機能の最適化 - Platform Channelsを通じた効率的なFlutter-Native連携
実際に、Context（macOS SwiftUIアプリ）の開発では、20,000行のコードのうち1,000行未満が手動で書かれ、残りはClaude Codeによって生成されたという成功例があるらしいです。
これらのツールを組み合わせることで、Flutterアプリのネイティブプラットフォーム連携部分の品質を大幅に向上させることができると思われます。

主要なMCPサーバー

1. Dart MCP Server（公式推奨）

2. Flutter MCP Server（ドキュメンテーション特化）

3. mcp_flutter（Flutter Inspector連携）

4. Flutter Tools MCP Server（診断・分析）

使用上の利点

Kotlin開発の精度向上

1. Android Build MCP Server

2. Android Filesystem MCP Server

3. Kotlin MCP SDK（公式）

4. Android ADB MCP Server

SwiftUI/iOS開発の精度向上

1. XcodeBuild MCP Server（推奨）

2. Apple Developer Documentation MCP Server

3. Xcode MCP Server

統合的な使用戦略

1. Flutter Platform Channels連携

2. 精度向上のメリット

Discussion