🌀
Dart・FlutterのMCPサーバーについて
Flutter3.35がリリースされ、その中にDartとFlutterのMCPサーバーというのも含まれていました。
どんな感じで使えるのかまとめていきます。
主な機能
DartとFlutterのMCPサーバーを使って以下のようなことができるようになっているようです。
-
静的解析とエラー修正
- プロジェクトのコードのエラーを分析・修正
- シンボルを要素に解決し、存在を確認
- ドキュメントとシグネチャ情報の取得
-
ランタイム分析
- ランタイムエラーの検出と修正
- Flutterウィジェットツリーの調査
-
パッケージ管理
- pub.devサイトでの最適なパッケージ検索
-
pubspec.yamlファイルでのパッケージ依存関係の管理
-
テスト・フォーマット
- テストの実行と結果分析
-
dart formatと同じフォーマッタでのコード整形
セットアップ方法
必要要件
- Dart 3.9以降（またはFlutter 3.35以降）
- 標準I/O（stdio）をサポートするMCPクライアント
DartとFlutterのMCPサーバーのすべての機能にアクセスするには、MCPクライアントがToolsとResources、Rootsをサポートしている必要があるようです。
（Tools、Resources、Rootsについては以下を参照）
クライアント設定
Gemini CLI
~/.gemini/settings.jsonまたは.gemini/settings.jsonに以下を追加
{
"mcpServers": {
"dart": {
"command": "dart",
"args": ["mcp-server"]
}
}
}
Cursor
.cursor/mcp.jsonまたは~/.cursor/mcp.jsonに以下を追加：
{
"mcpServers": {
"dart": {
"command": "dart",
"args": ["mcp-server", "--force-roots-fallback"]
}
}
}
使用例
レイアウトエラーの修正
FlutterでRenderFlexオーバーフローエラーが発生した場合に、以下のようなプロンプトを入れると、
静的解析とランタイム解析の問題をチェックして修正してください。レイアウトの問題もチェックして修正してください。
AIアシスタントが以下を自動実行
- 実行中のアプリケーションからランタイムエラーを取得
- Flutterウィジェットツリーにアクセスしてレイアウトを理解
- コンテキストを理解した上で修正を適用
パッケージの追加
新しい機能追加する際に以下のプロンプトを入力すると、
ボタンの押下回数を時間軸で表示する折れ線グラフに適したパッケージを見つけてください。
AIアシスタントが以下を実行：
-
pub_dev_searchツールで人気の高評価チャートライブラリを検索 - 選択したパッケージを依存関係に追加
- 適切なボイラープレートコードを含む新しいウィジェットコードを生成
まとめ
Flutter・DartでもMCPが登場し、モバイルアプリ開発でもどんどんAIを使って開発しやすくなってきました。
今後がますます楽しみです🙌
参考
Discussion