flutter-skill

Getting Started

Choose your use case. Each path is one or two commands — you'll be running in under 60 seconds.

# Install + run (that's it!)
npm install -g flutter-skill
flutter-skill serve https://your-website.com

flutter-skill snap          # See the page (accessibility tree)
flutter-skill tap "Login"   # Click a button
flutter-skill type "hello"  # Type text
flutter-skill screenshot    # Take a screenshot

# Step 1: Install
npm install -g flutter-skill

// Step 2: Add to your MCP config
{
  "mcpServers": {
    "flutter-skill": {
      "command": "flutter-skill",
      "args": ["server"]
    }
  }
}

# Step 1: Install CLI + add SDK to your app
npm install -g flutter-skill
flutter pub add flutter_skill --dev

// Step 2: Add 2 lines to main.dart
import 'package:flutter_skill/flutter_skill.dart';

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

# Step 3: Run your app + connect
flutter run
flutter-skill server

npm install -g flutter-skill
# Add sdks/ios to your Xcode project
# Run your app on simulator
flutter-skill server

npm install -g flutter-skill
# Add sdks/android to your Gradle project
# Run your app on emulator
flutter-skill server

10 Platforms, One Tool

Most testing tools work on 1-2 platforms. flutter-skill works on 10.

Two Modes

Choose the mode that fits your workflow.

Browser Setup

flutter-skill connects to any Chromium-based browser via CDP. Choose your browser and copy the commands.

🚀 Quick Start (Auto-launch)

flutter-skill can auto-launch a headless Chrome — zero setup required.

# Auto-launches Chrome, opens the URL, starts the MCP server
flutter-skill serve https://your-app.com --port=3000

🌐 System Chrome

Use your regular Chrome with existing login sessions.

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=$HOME/.flutter-skill/chrome-profile

# Linux
google-chrome --remote-debugging-port=9222 \
  --user-data-dir=$HOME/.flutter-skill/chrome-profile

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" ^
  --remote-debugging-port=9222 ^
  --user-data-dir=%USERPROFILE%\.flutter-skill\chrome-profile

Then connect flutter-skill:

flutter-skill serve https://your-app.com --port=3000 --chrome-port=9222 --no-launch

🧪 Chrome for Testing (CfT)

Isolated Chrome build designed for automation. Recommended for CI/CD.

# Install via npx
npx @anthropic-ai/cft install

# Or download directly (macOS ARM64 example)
npx @anthropic-ai/cft install --platform=mac-arm64

🖥️ Microsoft Edge

Edge is Chromium-based and supports CDP.

# macOS
/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge \
  --remote-debugging-port=9222

# Windows
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" ^
  --remote-debugging-port=9222

🦁 Brave Browser

# macOS
/Applications/Brave\ Browser.app/Contents/MacOS/Brave\ Browser \
  --remote-debugging-port=9222

🐳 Docker (Headless)

For CI/CD and server environments.

# Run headless Chrome in Docker
docker run -d --name chrome -p 9222:9222 \
  zenika/alpine-chrome \
  --no-sandbox --remote-debugging-address=0.0.0.0 \
  --remote-debugging-port=9222

# Connect from host
flutter-skill serve https://your-app.com --chrome-port=9222 --no-launch

⚙️ Chrome Launch Options

🔗 flutter-skill serve Options

CLI Client Reference

Command-line access to a running flutter-skill serve instance.

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

# Navigation
flutter-skill nav https://google.com

# Accessibility tree (99% fewer tokens than screenshot)
flutter-skill snap

# Screenshot
flutter-skill screenshot /tmp/ss.jpg

# Interaction
flutter-skill tap "Login"
flutter-skill type "hello@example.com"
flutter-skill key Enter

# JavaScript
flutter-skill eval "document.title"

# All tools
flutter-skill tools

Full CLI client documentation →

IDE Setup

One config line. Works with all MCP-compatible AI tools.

Full IDE setup guide →

Documentation

Detailed guides for every aspect of flutter-skill.