Dart/Flutter MCPサーバーを実際に使ってみた

はじめに

2025/08/14にリリースされたFlutter3.35.0から、Dart/FlutterのMCPサーバーを使えるようになりました🎉
Dart and Flutter MCP server

Toolsにできることが記載されていますが、実際に使用してみないと具体的な利用シーンがイメージ出来なかったため、本記事にセットアップ方法と触ってみての所感をまとめました。

セットアップ

必要な環境

• Flutter3.35.0（Dart3.9.0）以上
  　※グローバルなFlutterSDKのバージョン
• MCPクライアント
  　本記事ではCursorとClaudeCodeを使用

MCPクライアントの設定

Cursorの場合

1. MCPサーバーの設定

MCP server | Dart #cursorを参考に.cursor/mcp.jsonに以下を記述。

{
  "mcpServers": {
    "dart": {
      "command": "dart",
      "args": [
        "mcp-server",
        "--force-roots-fallback"
      ]
    }
  }
}

2. 接続確認

「Cursor > Settings > Cursor Settings > Tools & Integrations > MCP Tools」で「dart」がenabledになっていることを確認。

ClaudeCodeの場合

1. MCPサーバーの設定

以下のコマンドを実行。
※全てのプロジェクトで有効化されるようにscopeを指定しています

claude mcp add-json dart '{"command":"dart","args":["mcp-server","--force-roots-fallback"]}' --scope user

参考

• MCPを介してClaude Codeをツールに接続する - Anthropic
• Connect Claude Code to tools via MCP - Anthropic

2. 接続確認

claude mcp listを実行し「Connected」と表示されることを確認。

% claude mcp list            
Checking MCP server health...

dart: dart mcp-server --force-roots-fallback - ✓ Connected

実際の開発体験

MCPサーバーを利用する場合と、利用しない場合で、同じ指示を出し比較をしてみました。

MCPサーバー利用時

1. パッケージ選定

pub.devで使用するパッケージを選定し、bodyに適当なアニメーションを作成してください。

使用していたTools

• add_roots: プロジェクトルートの追加
• pub_dev_search: 適切なパッケージの検索
• pub: パッケージの依存関係追加

2. エラー解消

エラーを解消してください。

使用していたTools

• analyze_files: 静的解析エラーを自動検出・修正

結果

flutter_animateパッケージを使用したアニメーションが実装されました。

MCPサーバーなし

1. パッケージ選定

pub.devで使用するパッケージを選定し、bodyに適当なアニメーションを作成してください。

この時点でビルドが通らない実装が生成されました。

比較結果

• 実行時間
  　MCPサーバー利用時の方が短かったです。
• 精度
  　MCPサーバー利用時はflutter_animateパッケージのみを使用した実装をしてくれましたが、
  　利用しない場合は以下の4つのパッケージを追加し、ビルドが通りませんでした。
  　- animated_text_kit
  　- flutter_staggered_animations
  　- im_animations
  　- lottie

まとめ

今回の検証では（いつものように）雑な依頼を投げましたが、MCPサーバー利用時はきちんと動くコードを書いてくれました。
一方でMCPサーバーなしだと、複数のパッケージの追加とビルドが通らないという結果でした。（雑な指示が元凶です）

導入も簡単なので、Dart/Flutterをやってる人は一度試してみる価値ありだと思います！
特にプロトタイピングや、既存コードの不具合改善で威力を発揮しそうです。