당신의 에이전트가 Flutter 앱을 켜고 있는 손과 눈.

Marionette는 Claude Code, 커서, 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 자체 위젯은 현재 상태로 작동합니다. 커스텀 디자인 시스템은 한 단계의 설정 단계가 필요하며, 그렇지 않으면 에이전트가 버튼과 필드를 볼 수 없습니다: 구성 항목을 참조하세요.

에이전트가 할 수 있는 일들

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