あなたのエージェントの手と目が動いているFlutterアプリに。

MarionetteはClaude Code、Cursor、Codex、Gemini CLI、Copilot、または任意のMCPクライアントを、デバッグモードで実行するFlutterアプリに接続します。エージェントは画面を見て、タップし、入力し、スクロールし、ログを読み込み、ホットリロードし、何をしたかレポートを書きます。Playwright MCPを知っているなら、これがFlutterのそれです。

ウェブサイト****ドキュメントビデオ ·記事

クイックスタート

1. パッケージをアプリに追加し、デバッグビルドでバインディングを初期化します:

2. エージェントにブリッジを用意します:MCPサーバーかmarionetteのCLI、好きな方(すべてのエージェント)を選びます。

3. flutter runでアプリを実行し、印刷されたws://…/wsのVMサービスURIをプロンプトに貼り付けるか、エージェントにアプリ自体を実行するよう依頼します:

ws://127.0.0.1:9101/…/ws に接続してください。プロフィールでは、誤ったメールはエラーが表示され、「送信」を無効にしなければなりません。有効なメールは送信しなければなりません。

[!重要] Flutter独自のウィジェットはそのまま動作します。カスタムデザインシステムは設定ステップ1ステップが必要、そうでなければエージェントはボタンやフィールドを認識できません:詳細は「Configure」を参照してください。

エージェントができること

Marionette MCP

Your agent’s hands and eyes on a running Flutter app.

Marionette connects Claude Code, Cursor, Codex, Gemini CLI, Copilot or any MCP client to the Flutter app you run in debug mode. The agent sees the screen, taps, types, scrolls, reads the logs, hot reloads, and writes a report of what it did. If you know Playwright MCP: this is that, for Flutter.

Website · Docs · Video · Article

Quick start

1. Add the package to your app and initialize the binding in debug builds:

   flutter pub add marionette_flutter
   

   void main() {
     if (kDebugMode) {
       MarionetteBinding.ensureInitialized();
     } else {
       WidgetsFlutterBinding.ensureInitialized();
     }
     runApp(const MyApp());
   }
   

2. Give your agent a bridge: the MCP server or the marionette CLI, whichever you prefer (every agent):

   # MCP server, registered with Claude Code
   dart pub global activate marionette_mcp
   claude mcp add --transport stdio marionette -- marionette_mcp
   
   # or the CLI
   dart pub global activate marionette_cli
   

3. Run the app with flutter run and paste the ws://…/ws VM service URI it prints into the prompt, or ask the agent to run the app itself:

   Connect to ws://127.0.0.1:9101/…/ws. On Profile, a malformed email must show an error and keep Submit disabled, and a valid one must submit.

[!IMPORTANT] Flutter’s own widgets work as is. A custom design system needs one configuration step, or the agent cannot see your buttons and fields: see Configure.

What the agent can do