Skip to content

GeeksEra/flutter-pilot

Repository files navigation

FlutterPilot Logo

FlutterPilot

Let AI see, understand, and control your Flutter apps

npm pub.dev License CI


What is FlutterPilot?

FlutterPilot is an MCP (Model Context Protocol) server paired with a lightweight Dart package that gives AI assistants -- Claude Desktop, Claude Code, or any MCP-compatible client -- the ability to see, understand, and interact with running Flutter debug apps through natural language.

Point Claude at your running app and ask it to take screenshots, inspect the widget tree, tap buttons, type into text fields, scroll, trigger hot reload, or evaluate Dart expressions -- all without writing test code or manually navigating the UI.

Key Features

  • Screenshot capture -- see your app exactly as users do (PNG, returned as an image to the AI)
  • Widget tree inspection -- understand app structure as structured JSON, with configurable depth
  • Semantics/accessibility tree -- compact, AI-friendly representation with labels, actions, and positions
  • Interactive widget discovery -- list all buttons, text fields, and tappable elements with coordinates
  • Tap, scroll, type, long press -- full interaction via coordinates or smart finders (by text, key, type, or semantics label)
  • Hot reload -- apply code changes instantly without restarting app state
  • Dart expression evaluation -- run arbitrary Dart code in the context of the running app
  • Works everywhere -- Claude Desktop, Claude Code, and any MCP client

Quick Start

Step 1: Add flutter_pilot to your Flutter app

# pubspec.yaml
dev_dependencies:
  flutter_pilot: ^0.1.0
// lib/main.dart
import 'package:flutter_pilot/flutter_pilot.dart';

void main() {
  FlutterPilot.ensureInitialized();
  runApp(const MyApp());
}

Step 2: Configure the MCP server

Claude Desktop -- add to your claude_desktop_config.json:

{
  "mcpServers": {
    "flutter-pilot": {
      "command": "npx",
      "args": ["-y", "@flutterpilot/mcp-server"]
    }
  }
}

Claude Code -- add to your project's .mcp.json:

{
  "mcpServers": {
    "flutter-pilot": {
      "command": "npx",
      "args": ["-y", "@flutterpilot/mcp-server"]
    }
  }
}

Step 3: Run your app and start talking to Claude

flutter run --debug
# Copy the VM service URI from the console output, e.g.:
# A Dart VM Service on ... is available at: http://127.0.0.1:56789/ABCDEF=/

Then tell Claude:

"Connect to my Flutter app at ws://127.0.0.1:56789/ABCDEF=/ws and take a screenshot"

How It Works

+-----------------+       +-------------------+       +--------------------+
|                 |       |                   |       |                    |
|  Flutter App    | <---> |  Dart VM Service   | <---> |  @flutterpilot/    |
|  (debug mode)   |  WS   |  (WebSocket)      |  WS   |  core (TypeScript) |
|                 |       |                   |       |                    |
+-----------------+       +-------------------+       +--------+-----------+
                                                               |
                                                               | in-process
                                                               |
                                                      +--------v-----------+
                                                      |                    |
                                                      |  @flutterpilot/    |
                                                      |  mcp-server        |
                                                      |  (MCP over stdio)  |
                                                      |                    |
                                                      +--------+-----------+
                                                               |
                                                               | MCP protocol
                                                               |
                                                      +--------v-----------+
                                                      |                    |
                                                      |  Claude Desktop /  |
                                                      |  Claude Code /     |
                                                      |  Any MCP Client    |
                                                      |                    |
                                                      +--------------------+

FlutterPilot connects to the Dart VM Service exposed by every Flutter debug app. The TypeScript core library (@flutterpilot/core) communicates over WebSocket using the Dart VM Service Protocol to take screenshots, walk the widget tree, dispatch gestures, and evaluate expressions. The MCP server wraps this library and exposes each capability as an MCP tool that Claude can call.

The optional flutter_pilot Dart package registers VM service extensions inside the running app to enable advanced features like semantics tree access, widget finding, and gesture dispatch that are not available through the standard VM protocol alone.

MCP Tools Reference

Tool Description Key Parameters
flutter_connect Connect to a running Flutter debug app vmServiceUri (required)
flutter_disconnect Disconnect from the current app --
flutter_screenshot Take a PNG screenshot of the app --
flutter_widget_tree Get the widget tree as structured JSON maxDepth
flutter_semantics Get the accessibility/semantics tree maxDepth
flutter_interactive List all interactive widgets with positions --
flutter_tap Tap a widget by coordinates or finder x, y or findBy + value
flutter_enter_text Type text into the focused text field text (required)
flutter_scroll Scroll at a position x, y, dy (required); dx
flutter_long_press Long press a widget x, y or findBy + value
flutter_hot_reload Trigger hot reload --
flutter_evaluate Evaluate a Dart expression at runtime expression (required)

Packages

Package Description Version
flutter_pilot (Dart) Lightweight Flutter dev dependency -- registers VM service extensions for interaction 0.1.0
@flutterpilot/core (TypeScript) Client library for the Dart VM Service Protocol 0.1.0
@flutterpilot/mcp-server (TypeScript) MCP server that exposes Flutter tools to Claude 0.1.0

Example Prompts

Once connected, try asking Claude:

  • "Take a screenshot of the app" -- Claude will capture and display the current UI
  • "What interactive widgets are on screen?" -- lists every button, text field, and tappable widget with its position
  • "Tap the Increment button" -- finds the button by its label text and taps it
  • "Type 'hello world' into the text field" -- focuses and types into the input
  • "Hot reload the app" -- applies your latest code changes without losing state
  • "Evaluate DateTime.now().toString() in the running app" -- executes arbitrary Dart expressions and returns the result

Competitive Comparison

Feature FlutterPilot marionette_mcp mcp_flutter flutter-skill
Language TypeScript Dart Dart TypeScript
MCP SDK Official TS SDK Custom Custom N/A
Screenshot capture Yes Yes Yes No
Widget tree inspection Yes Yes Yes No
Semantics tree Yes No No No
Interactive widget listing Yes No No No
Tap / scroll / type Yes Yes Yes No
Widget finders (text, key, type, semantics) Yes Partial Partial No
Long press Yes No No No
Hot reload Yes Yes No No
Dart eval Yes No No No
Install via npm npx @flutterpilot/mcp-server Manual Manual Manual
Web dashboard (planned) Yes No No No
SaaS model (planned) Yes No No No

Development

Prerequisites

  • Node.js >= 18
  • pnpm >= 9

Build from source

git clone https://github.com/geeksera/flutter-pilot.git
cd flutter-pilot
pnpm install
pnpm build

Run the MCP server locally

node packages/mcp-server/dist/index.js

Project structure

flutter-pilot/
  packages/
    core/          # @flutterpilot/core -- TypeScript client library
    mcp-server/    # @flutterpilot/mcp-server -- MCP server
    dart/          # flutter_pilot -- Dart package for Flutter apps
  examples/
    counter_app/   # Example Flutter app with flutter_pilot integration
  docs/            # Documentation

Roadmap

  • Phase 1 (current): Core MCP server with screenshot, inspection, interaction, and dev tools
  • Phase 2: Web dashboard for visual session monitoring and replay
  • Phase 3: SaaS platform with team collaboration, session history, and analytics
  • Phase 4: CI/CD integration -- AI-driven visual regression testing and automated QA

Contributing

Contributions are welcome. See CONTRIBUTING.md for guidelines on how to get started.

If you find a bug or have a feature request, please open an issue.

License

MIT -- see LICENSE for details.

About

No description, website, or topics provided.

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors