はじめに

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サーバーを利用しつつ開発すると、精度が上がることを期待してます。

参考記事