Flutter Surf MCP は、クライアント LLM を介して、Flutter アプリケーションとの相互作用を可能にする MCP サーバーです。 これは、Flutterアプリケーションをプログラム的に検査、制御、自動化するためのツールを提供します。

##特徴

• VMサービスを介してFlutterアプリケーションを実行するための接続
• ウィジェットツリーの状態の取得と検査
• ウィジェットをクリック
• 入力フィールドにテキストを入力する
• テキスト、キー、またはタイプでウィジェットを見つける
• ウィジェットをビューにスクロールする
• カスタマイズ可能なパラメータでスクロールアクションを実行
• デバッグペイント機能の切り替え

要件

• Python 3.7 +
• VMサービスが有効になっているFlutterアプリケーション
• UVパッケージマネージャ(またはピップ)
• MCPサポートによるClaude AI

インストール

1. リポジトリのクローン化:

2. 依存関係を取付けて下さい:

設定

ClaudeでFlutter Surf MCPを使用するには、Claude AIの設定に次の設定を追加します。

注記:フラッタドライバの拡張子を有効にしてください:

Flutter Surf MCP

Flutter Surf MCP is a MCP server that allows interactions with Flutter applications through client LLMs. It provides tools to inspect, control, and automate Flutter applications programmatically.

Features

• Connect to running Flutter applications via VM Service
• Retrieve and inspect widget tree state
• Click on widgets
• Enter text into input fields
• Find widgets by text, key, or type
• Scroll widgets into view
• Perform scrolling actions with customizable parameters
• Toggle debug paint features

Requirements

• Python 3.7+
• A running Flutter application with VM service enabled
• UV package manager (or pip)
• Claude AI with MCP support

Installation

1. Clone the repository:

git clone https://github.com/yourusername/flutter_surf_mcp.git
cd flutter_surf_mcp

2. Install dependencies:

uv pip install -r requirements.txt

Configuration

To use Flutter Surf MCP with Claude, add the following configuration to your Claude AI settings:

{
  "mcpServers": {
      "flutter_mcp": {
          "command": "[uv_directory]",
          "args": [
              "--directory",
              "[path]/flutter_surf_mcp",
              "run",
              "flutter_surf_mcp.py"
          ]
      }
  }
}

Note: Make sure to enable the flutter driver extension:

import 'package:flutter_driver/driver_extension.dart';

void main() {
  enableFlutterDriverExtension();
  runApp(const HomeScreen());
}