はじめに
Flutter 3.35がリリースされ、Dart/FlutterのMCPサーバーがstable channelとなったので、使ってみました。
DTD接続を行い、デバッグ実行中の情報を取得する際にエラーが発生し、解決方法もまとめたので、困っている方の助けにもなれば幸いです。
DTDとは、Dart Tooling Daemonの略称で、IDE（VS Code / IntelliJ など）や MCP サーバーと 実行中のアプリをつなぐ中間役のようです。
色々なツールで利用することができますが、私はClaudeCodeを使用しているのでClaudeCodeで利用しました。
導入方法
ターミナルで、以下を実行して、mcpサーバーを追加します。
claude mcp add-json dart '{"command":"dart","args":["mcp-server","--force-roots-fallback"]}' --scope user
上記が終わったら、以下を実行して、追加できているか確認します。
claude mcp get dart
以下のような表示がされるはずです。
dart:
Scope: User (available in all your projects)
次に、ClaudeCodeを起動します
claude
/mcpと入力後、Enterを押下し、以下のように表示されていれば使えるようになっています。
Manage MCP servers
│ ❯ 1. dart ✔ connected · Enter to view details
使用例
使用できるツールの一覧は下記から確認できます。
どういったユースケースで使えるか例を出してみます。
- デバッグ実行中に起きたエラーを取得し解析する
- デバッグ実行中にWidgetTreeを取得し解析する
- 自動テストや操作を行ってもらう
- Flutterプロジェクトの作成
- dart fix --apply を実行し、自動修正を適用する
- dart formatを実行し、コードをフォーマットする
- 指定したファイルやプロジェクト全体を解析し、エラーや警告を検出する
- テストを実行する
- pub.devで、使用用途に応じた最適なパッケージを検索したり、そのパッケージを使って実装する
実際に使用
以下のように使用してみたところ、エラーが出て実行できませんでした。
- iOSのSimulatorを起動
- flutter runで起動
- ClaudeCodeで、「WidgetTreeを参照し、解析してください」と指示
- 以下のエラーが発生
Error: Connection failed: WebSocketChannelException: WebSocketException:
Connection to 'http://127.0.0.1:9100/ws#' was not upgraded to websocket
DTDへの接続に失敗しました。FlutterアプリケーションのDart Tooling Daemon URIが必要です。
解決方法
※VSCodeを利用していますが、AndroidStudioでもDTD URLコピー以外の部分は参考にできると思います。AndroidStudioでのDTD URLのコピー方法は未調査です。
前提条件確認
- Flutterのバージョンが 3.35.1であること
- pubspec.yamlのenvironmentのsdkが^3.9.0であること
デバッグ実行
上記が確認できたら、VS Codeからデバッグ実行してください。(ターミナルでflutter runではなく)
IDEからデバッグ実行しないと、DTD接続後に、Error: No active debug session to take a screenshotというエラーが出ます。
DTD URLをコピー
次に、コマンドパレットを開き、Dartと入力してください
Copy DTD URL to ClipboardというのがあるのでそれをクリックしてDTD URIをコピーします。
Claude CodeにDTD URLを伝えつつ、指示を出す
コピーできたら、Claude CodeにURIを伝えつつ、指示をすると成功するはずです。
ws://127.0.0.1:53499/_8rTmXlLzWI=
WidgetTreeを参照し、解析してください
おわりに
FlutterとClaudeCodeで開発していると精度がイマイチに感じることがあったので、mcpサーバーを利用しつつ開発すると、精度が上がることを期待してます。
参考記事