mcpField
F
flutter-skill

flutter-skill

ローカル
github.com/ai-dashboad開発ツール3988 週間前に更新

flutter-skill について

flutter-skill は、実行中のアプリを AI エージェントが観察・操作できるようにする E2E テストツールです。テストコードは不要です。複数プラットフォームのアプリを開発するユーザー向けで、単一の MCP サーバーとして多数のツールを提供します。

主な機能

  1. 01アクセシビリティツリーによるページの意味的な要約
  2. 02タップ、テキスト入力、スクロールなどの操作
  3. 03複数の操作を一回の呼び出しでまとめて実行
  4. 04スクリーンショット、アサーション、待機のツール
  5. 05Flutter、React Native、Electron アプリへの対応

活用シーン

  1. 01AI エージェントに自然言語でアプリを探索させ、不具合を報告させる
  2. 02テストコードを書かずにエンドツーエンドの確認を行う
  3. 03CI/CD パイプラインで HTTP モードによるブラウザ自動化を実行

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"ai-dashboad-flutter-skill": {
"command": "npx",
"args": [
"-y",
"flutter-skill"
]
}
}
}
起動コマンドnpx -y flutter-skill

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmflutter-skill0.9.36

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

flutter-skill CLI のデモ — 複数のウェブサイトでの移動、タップ、入力、スクリーンショット撮影

flutter-skill

あらゆる実行中のアプリで、AI エージェントに目と手を与えます。
10 プラットフォーム。テストコード不要。MCP サーバー 1 つ。

スター pub.dev npm CI ライセンス

デモ • クイックスタート • AI プラットフォーム • プラットフォーム • 他のツールとの比較 • ドキュメント

🚀 設定不要。テストコード不要。AI に話しかけるだけ。

時間の節約に役立った場合は、リポジトリにスター ⭐ を付けていただけると幸いです。ほかの人にも見つけてもらいやすくなります!


30 秒デモ

https://github.com/user-attachments/assets/d4617c73-043f-424c-9a9a-1a61d4c2d3c6

1 つのプロンプト。AI による 28 の操作。テストコード不要。 AI が TikTok クローンを自律的に探索し、タブを移動し、フィードをスクロールし、検索をテストし、フォームに入力します。


開発の背景

E2E テストを書くのは大変です。保守するのはもっと大変です。flutter-skill は、これとは異なるアプローチを採用しています。

  • 🔌 MCP を通じて、あらゆる AI エージェント(Claude、Cursor、Windsurf、Copilot、OpenClaw)を実行中のアプリに直接接続します
  • 👀 エージェントは画面を見て、人間のテスターのようにボタンをタップし、テキストを入力し、スクロールし、画面を移動します。しかも、休むことはありません
  • ✅ テストコード不要 — Page Object も XPath も、壊れやすいセレクターも必要ありません。普通の言葉で指示するだけです
  • ⚡ 設定不要 — コードは 2 行だけで、10 のプラットフォームすべてで動作します
You: "Test the checkout flow with an empty cart, then add 3 items and complete purchase"

Your AI agent handles the rest — screenshots, taps, text entry, assertions, navigation.
No Page Objects. No XPath. No brittle selectors. Just plain English.

クイックスタート

1. インストール(30 秒)

npm install -g flutter-skill

2. AI に追加(MCP 設定にコピー&ペースト)

{
  "mcpServers": {
    "flutter-skill": {
      "command": "flutter-skill",
      "args": ["server"]
    }
  }
}

Claude Desktop、Cursor、Windsurf、Copilot、Cline、OpenClaw で動作します。MCP 対応のエージェントならどれでも利用できます。

3. アプリに追加(Flutter の場合は 2 行)

import 'package:flutter_skill/flutter_skill.dart';

void main() {
  if (kDebugMode) FlutterSkillBinding.ensureInitialized();
  runApp(MyApp());
}

4. テスト — AI に話しかけるだけです。

「アプリを起動して、すべての画面を探索し、バグがあれば報告してください」

これだけです。設定不要。テストコード不要。60 秒以内に動作します。

📦 そのほかのインストール方法(Homebrew、Scoop、Docker、IDE、エージェントスキル)
方法コマンド
npmnpm install -g flutter-skill
Homebrewbrew install ai-dashboad/flutter-skill/flutter-skill
Scoopscoop install flutter-skill
Dockerdocker pull ghcr.io/ai-dashboad/flutter-skill
pub.devdart pub global activate flutter_skill
VSCode拡張機能 → "Flutter Skill"
JetBrainsプラグイン → "Flutter Skill"
エージェントスキルnpx skills add ai-dashboad/flutter-skill
設定不要flutter-skill init(アプリを自動検出してパッチを適用)

AI プラットフォームでの利用

MCP サーバーモード(IDE 統合)

MCP 互換の AI ツールであれば、どれでも動作します。設定は 1 行です。

{
  "mcpServers": {
    "flutter-skill": {
      "command": "flutter-skill",
      "args": ["server"]
    }
  }
}
プラットフォーム設定ファイルステータス
Cursor.cursor/mcp.json✅
Claude Desktopclaude_desktop_config.json✅
Windsurf~/.codeium/windsurf/mcp_config.json✅
VSCode Copilot.vscode/mcp.json✅
ClineVSCode Settings → Cline → MCP✅
OpenClawスキルまたは MCP 設定✅
Continue.dev.continue/config.json✅
HTTP サーブモード(CLI と自動化)

単独でのブラウザー自動化、CI/CD パイプライン、またはリモートアクセスに利用できます。

# Start server
flutter-skill serve https://your-app.com

# Use CLI client commands
flutter-skill nav https://google.com
flutter-skill snap                    # Accessibility tree (99% fewer tokens)
flutter-skill screenshot /tmp/ss.jpg
flutter-skill tap "Login"
flutter-skill type "[email protected]"
flutter-skill eval "document.title"
flutter-skill tools                   # List all available tools
コマンド説明
nav <url>URL に移動
snapアクセシビリティツリーのスナップショット
screenshot [path]スクリーンショットを撮影
tap <text|ref|x y>要素をタップ
type <text>キーボードで入力
key <key> [mod]キーを押す
eval <js>JavaScript を実行
titleページタイトルを取得
text表示中のテキストを取得
hover <text>要素にカーソルを合わせる
upload <sel> <file>ファイルをアップロード
toolsツール一覧を表示
call <tool> [json]任意のツールを呼び出す

--port=N、--host=H フラグと FS_PORT/FS_HOST 環境変数に対応しています。

2 つのモードの比較
server(MCP stdio)serve(HTTP)
用途IDE/AI エージェントとの統合CLI/自動化/CI/CD
プロトコルMCP(stdio 経由の JSON-RPC)HTTP REST
ツール253(ページごとに動的)246(汎用)
ブラウザーChrome を自動起動既存の Chrome に接続
最適な用途Cursor、Claude、VSCodeOpenClaw、スクリプト、パイプライン

CLI クライアントの完全なリファレンス: docs/CLI_CLIENT.md


10 プラットフォーム、1 つのツール

ほとんどのテストツールは 1~2 のプラットフォームでしか動作しません。flutter-skill は 10 のプラットフォームで動作します。

プラットフォームSDKテストスコア
Flutter(iOS/Android/Web)flutter_skill✅ 188/195
React Nativesdks/react-native✅ 75/75
Electronsdks/electron✅ 75/75
Tauri(Rust)sdks/tauri✅ 75/75
Android(Kotlin)sdks/android✅ 74/75
KMP Desktopsdks/kmp✅ 75/75
.NET MAUIsdks/dotnet-maui✅ 75/75
iOS(Swift/UIKit)sdks/ios✅ 19/19
Web(任意のウェブサイト)sdks/web✅
Web CDP(設定不要)SDK 不要✅ 141/156

合計:664 件中 656 件のテストに合格(98.8%) — 各プラットフォームは、50 以上の要素を持つ複雑なソーシャルメディアアプリでテストされています。


⚡ パフォーマンス

複雑なソーシャルメディアアプリを対象に自動テストを実行して得られた実測ベンチマークです。

操作Web(CDP)ElectronAndroid
connect93 ms55 ms103 ms
tap1 ms1 ms2 ms
enter_text1 ms1 ms2 ms
inspect3 ms12 ms10 ms
snapshot2 ms8 ms29 ms
screenshot31 ms80 ms88 ms
eval1 ms——

トークン効率: snapshot() は画像ではなく、構造化された要素ツリーを返すため、スクリーンショットを AI エージェントに送る場合と比べて 87~99% 少ないトークンで済みます。

どれほど高速でしょうか? tap は最初から最後まで 1~2 ms で完了します。Playwright や Selenium などのブラウザー自動化ツールでは、同じ操作に通常 50~100 ms かかります。これは 50~100 倍の速さです。flutter-skill は WebDriver や CDP を介さず、アプリのランタイムと直接やり取りするためです。

高負荷 DOM サイト(実環境)

本番ウェブサイトで 15 個の MCP ツールをテストしました — 75/75 が成功、タイムアウトはゼロです:

サイトツール合計時間snapshotscreenshotcount_elements
YouTube15/15 ✅6.9s43 ms30 ms4 ms
Amazon15/15 ✅14.2s1 ms5 ms2 ms
Reddit15/15 ✅17.9s6 ms32 ms51 ms
Hacker News15/15 ✅4.8s53 ms188 ms1 ms
Wikipedia15/15 ✅7.8s15 ms336 ms1 ms

合計時間にはページの読み込み時間が含まれます。DOM が大きなサイトでも、ツールの実行時間は一貫して 100 ms 未満です。


Playwright / Appium / Detox を使わない理由

flutter-skillPlaywright MCPAppiumDetox
MCP ツール253~33❌❌
プラットフォーム101(ウェブ)モバイルReact Native
セットアップ時間30 sec数分数時間数時間
テストコードの必要性❌ なし✅ はい✅ はい✅ はい
AI ネイティブ(MCP)✅✅❌❌
自己修復テスト✅❌❌❌
モンキー/ファズテスト✅❌❌❌
ビジュアルリグレッション✅❌❌❌
ネットワークのモック/再生✅❌❌❌
API + UI テスト✅❌❌❌
複数デバイスの同期✅❌一部対応❌
アクセシビリティ監査✅❌❌❌
i18n テスト✅❌❌❌
パフォーマンス監視✅❌❌❌
自然言語✅❌❌❌
Flutter 対応✅ ネイティブ一部対応一部対応❌
デスクトップアプリ✅✅❌❌

| AI によるページ理解 | ✅ AX Tree | ❌ スクリーンショット | ❌ | ❌ | | 境界値/セキュリティテスト | ✅ 13 個のペイロード | ❌ | ❌ | ❌ | | 一括操作 | ✅ 5 件以上/呼び出し | 1 件/呼び出し | 1 件/呼び出し | 1 件/呼び出し |

flutter-skill は、モバイル、ウェブ、デスクトップで動作する唯一の AI ネイティブ E2E テストツールです。最も近い競合製品の 7 倍のツールを備えています。


CLI コマンド

# 🤖 AI autonomous exploration — finds bugs automatically
flutter-skill explore https://my-app.com --depth=3

# 🐒 Monkey/fuzz testing — random actions, crash detection
flutter-skill monkey https://my-app.com --actions=100 --seed=42

# 🚀 Parallel multi-platform testing
flutter-skill test --url https://my-app.com --platforms web,electron,android

# 🌐 Zero-config WebMCP server — any website becomes testable
flutter-skill serve https://my-app.com

🧠 AI ネイティブ:トークンを 95% 削減

ほとんどの AI テストツールは スクリーンショット を LLM に送信するため、1 枚あたり約 4,000 トークンかかります。

flutter-skill は Chrome の アクセシビリティツリー を使い、あらゆるページの簡潔で意味的な要約を AI に提供します。

// page_summary → ~200 tokens (vs ~4,000 for a screenshot)
{
  "title": "Shopping Cart",
  "nav": ["Home", "Products", "Cart", "Account"],
  "forms": [{"input:Coupon Code": "text"}],
  "buttons": ["Apply", "Checkout", "Continue Shopping"],
  "features": {"search": true, "pagination": true},
  "links": 47, "inputs": 3
}

続いて、1 回の呼び出しで複数の操作をまとめて実行できます。

// explore_actions → 5 actions per call (vs 5 separate tool calls)
{"actions": [
  {"type": "fill", "target": "input:Coupon Code", "value": "SAVE20"},
  {"type": "tap", "target": "button:Apply"},
  {"type": "tap", "target": "button:Checkout"},
  {"type": "fill", "target": "input:Email", "value": "[email protected]"},
  {"type": "tap", "target": "button:Continue"}
]}

結果: AI エージェントは、スクリーンショットベースのツールよりも速く、低コストでテストを行い、ページをより適切に理解できます。

flutter-skillスクリーンショットベースのツール
ページあたりのトークン数~200~4,000
呼び出しあたりの操作数5 件以上1
意味を理解✅ ロール、名前、状態❌ ピクセルのみ
Shadow DOM に対応✅❌

できること

👀 見る
  • screenshot — 画面をキャプチャ
  • inspect_interactive — 意味的な参照を持つ、タップ/入力可能なすべての要素
  • find_element / wait_for_element
  • get_elements — 要素ツリー全体
👆 操作する
  • tap / long_press / swipe / drag
  • enter_text / set_text / clear_text
  • scroll — あらゆる方向
  • go_back / press_key
🔍 調べる(v0.8.0)
  • 意味的な参照:button:Login、input:Email
  • UI の変更後も安定
  • tap(ref: "button:Submit")
  • 7 つのロール:ボタン、入力、切り替え、スライダー、選択、リンク、項目
### 🚀 制御 - `launch_app` — フレーバーを指定して起動 - `hot_reload` / `hot_restart` - `get_logs` / `get_errors` - `scan_and_connect` — アプリを自動検出
253 個のツール — 完全なリファレンス

AI による探索: page_summary、explore_actions、boundary_test、explore_report

起動と接続: launch_app、scan_and_connect、connect_cdp、hot_reload、hot_restart、list_sessions、switch_session、close_session、disconnect、stop_app

画面: screenshot、screenshot_region、screenshot_element、native_screenshot、inspect、inspect_interactive、snapshot、get_widget_tree、find_by_type、get_text_content、get_visible_text

操作: tap、double_tap、long_press、enter_text、set_text、clear_text、swipe、scroll_to、drag、go_back、press_key、type_text、hover、fill、select_option、set_checkbox、focus、blur、native_tap、native_input_text、native_swipe

スマートテスト: smart_tap、smart_enter_text、smart_assert(あいまい一致による自己修復)

アサーション: assert_text、assert_visible、assert_not_visible、assert_element_count、assert_batch、wait_for_element、wait_for_gone、wait_for_idle、wait_for_stable、wait_for_url、wait_for_text、wait_for_element_count

ビジュアルリグレッション: visual_baseline_save、visual_baseline_compare、visual_baseline_update、visual_regression_report、visual_verify、visual_diff、compare_screenshot

ネットワークモック: mock_api、mock_clear、record_network、replay_network、intercept_requests、clear_interceptions、block_urls、http_request

API テスト: api_request、api_assert

カバレッジと信頼性: coverage_start、coverage_stop、coverage_report、coverage_gaps、retry_on_fail、stability_check

データ駆動: test_with_data、generate_test_data

マルチデバイス: multi_connect、multi_action、multi_compare、multi_disconnect、parallel_snapshot、parallel_tap

アクセシビリティ: accessibility_audit、a11y_full_audit、a11y_tab_order、a11y_color_contrast、a11y_screen_reader

i18n: set_locale、verify_translations、i18n_snapshot

パフォーマンス: perf_start、perf_stop、perf_report、get_performance、get_frame_stats、get_memory_stats

セッション: save_session、restore_session、session_diff

記録とエクスポート: record_start、record_stop、record_export(Playwright、Cypress、XCUITest、Espresso、Detox、Maestro、ほか 5 種類)、video_start、video_stop

認証: auth_inject_session、auth_biometric、auth_otp、auth_deeplink

CDP ブラウザー: navigate、reload、go_forward、get_title、get_page_source、eval、get_tabs、new_tab、switch_tab、close_tab、get_cookies、set_cookie、clear_cookies、get_local_storage、set_local_storage、clear_local_storage、generate_pdf、set_viewport、emulate_device、throttle_network、go_offline、set_geolocation、set_timezone、set_color_scheme

デバッグ: get_logs、get_errors、get_console_messages、get_network_requests、diagnose、diagnose_project、reset_app


プラットフォームのセットアップ

Flutter(iOS / Android / Web)
dependencies:
  flutter_skill: ^0.9.37
import 'package:flutter_skill/flutter_skill.dart';

void main() {
  if (kDebugMode) FlutterSkillBinding.ensureInitialized();
  runApp(MyApp());
}
React Native
npm install flutter-skill-react-native
import FlutterSkill from 'flutter-skill-react-native';
FlutterSkill.start();
Electron
npm install flutter-skill-electron
const { FlutterSkillBridge } = require('flutter-skill-electron');
FlutterSkillBridge.start(mainWindow);
iOS(Swift)
// Swift Package Manager: FlutterSkillSDK
import FlutterSkill
FlutterSkillBridge.shared.start()

Text("Hello").flutterSkillId("greeting")
Android(Kotlin)
implementation("com.flutterskill:flutter-skill:0.8.0")

FlutterSkillBridge.start(this)
Tauri(Rust)
[dependencies]
flutter-skill-tauri = "0.8.0"
KMP Desktop

Gradle の依存関係を追加します。詳細は sdks/kmp をご覧ください。

.NET MAUI

NuGet パッケージを追加します。詳細は sdks/dotnet-maui をご覧ください。


プロンプトの例

テストしたい内容を AI に伝えるだけです。

プロンプト実行内容
「間違ったパスワードでログインをテストする」スクリーンショットを撮る → 認証情報を入力 → ログインをタップ → エラーを確認
「すべての画面を確認して、バグを報告する」すべての画面を順番に移動し、すべての要素をテスト
「エッジケースを使って登録フォームに入力する」絵文字 🌍、長い文字列、空欄、特殊文字をテスト
「iOS と Android のチェックアウトフローを比較する」両方のプラットフォームで同じテストを実行し、スクリーンショットを比較
「5 つのタブすべてのスクリーンショットを撮る」各タブをタップし、状態をキャプチャ

コントリビューション

ガイドラインについては CONTRIBUTING.md をご覧ください。

git clone https://github.com/ai-dashboad/flutter-skill
cd flutter-skill
dart pub get
dart run bin/flutter_skill.dart server  # Start MCP server

リンク

📦 pub.dev🧩 VSCode
📦 npm🧩 JetBrains
🍺 Homebrew📖 ドキュメント
🤖 エージェントスキル📋 変更履歴

⭐ flutter-skill が時間の節約に役立ったら、ほかの人にも見つけてもらえるようスターを付けてください!

MIT License © 2025

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。