flutter-skill-mcp 0.2.13 → 0.2.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +290 -38
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,70 +1,322 @@
1
- # flutter-skill-mcp
1
+ # Flutter Skill
2
2
 
3
- > MCP Server for Flutter app automation - Give your AI Agent eyes and hands inside your Flutter app
3
+ > **Give your AI Agent eyes and hands inside your Flutter app.**
4
4
 
5
- [![npm version](https://badge.fury.io/js/flutter-skill-mcp.svg)](https://www.npmjs.com/package/flutter-skill-mcp)
6
- [![pub version](https://img.shields.io/pub/v/flutter_skill.svg)](https://pub.dev/packages/flutter_skill)
5
+ ![Version](https://img.shields.io/pub/v/flutter_skill.svg)
6
+ ![npm](https://img.shields.io/npm/v/flutter-skill-mcp.svg)
7
+ ![License](https://img.shields.io/badge/license-MIT-blue.svg)
8
+ ![Platform](https://img.shields.io/badge/Platform-Flutter-02569B)
7
9
 
8
- ## Installation
10
+ **Flutter Skill** is a bridge that connects AI Agents (like Claude Code, Cursor, Windsurf) directly to running Flutter applications via the MCP (Model Context Protocol). It provides 30+ tools for UI automation, inspection, and testing.
11
+
12
+ ## Quick Start
13
+
14
+ ### 1. Install (choose one)
9
15
 
10
16
  ```bash
17
+ # npm (recommended - includes native binary for instant startup)
11
18
  npm install -g flutter-skill-mcp
12
- # or use directly with npx
13
- npx flutter-skill-mcp
14
- ```
15
19
 
16
- **Prerequisites**: [Flutter SDK](https://docs.flutter.dev/get-started/install) or [Dart SDK](https://dart.dev/get-dart)
20
+ # Homebrew (macOS/Linux)
21
+ brew tap ai-dashboad/flutter-skill
22
+ brew install flutter-skill
17
23
 
18
- ## MCP Configuration
24
+ # Dart
25
+ dart pub global activate flutter_skill
26
+
27
+ # IDE Extensions
28
+ # - VSCode: Search "Flutter Skill" in Extensions
29
+ # - IntelliJ/Android Studio: Search "Flutter Skill" in Plugins
30
+ ```
19
31
 
20
- Add to your MCP config (Cursor, Windsurf, Claude Desktop):
32
+ ### 2. Configure AI Agent
21
33
 
34
+ Add to your AI agent's MCP config:
35
+
36
+ **Claude Code** (`~/.claude/settings.json`):
22
37
  ```json
23
38
  {
24
- "flutter-skill": {
25
- "command": "npx",
26
- "args": ["flutter-skill-mcp"]
39
+ "mcpServers": {
40
+ "flutter-skill": {
41
+ "command": "flutter-skill",
42
+ "args": ["server"]
43
+ }
27
44
  }
28
45
  }
29
46
  ```
30
47
 
31
- Or if installed globally:
32
-
48
+ **Cursor** (`~/.cursor/mcp.json`):
33
49
  ```json
34
50
  {
35
- "flutter-skill": {
36
- "command": "flutter-skill-mcp"
51
+ "mcpServers": {
52
+ "flutter-skill": {
53
+ "command": "flutter-skill",
54
+ "args": ["server"]
55
+ }
37
56
  }
38
57
  }
39
58
  ```
40
59
 
60
+ ### 3. Use
61
+
62
+ ```javascript
63
+ // Option 1: Launch app with environment variables
64
+ flutter-skill.launch_app({
65
+ project_path: "/path/to/flutter/project",
66
+ dart_defines: ["ENV=staging", "DEBUG=true"],
67
+ flavor: "staging"
68
+ })
69
+
70
+ // Option 2: Connect to already running app (auto-detect)
71
+ flutter-skill.scan_and_connect()
72
+
73
+ // Now use any tool
74
+ flutter-skill.screenshot()
75
+ flutter-skill.tap({ text: "Login" })
76
+ flutter-skill.inspect()
77
+ ```
78
+
79
+ ---
80
+
41
81
  ## Features
42
82
 
43
- - **UI Inspection**: Widget tree, text content, element properties
44
- - **Interactions**: Tap, double tap, long press, swipe, drag, scroll
45
- - **State Validation**: Text values, checkbox state, wait for elements
46
- - **Screenshots**: Full app or specific elements
47
- - **Navigation**: Routes, go back, navigation stack
48
- - **Debug**: Logs, errors, performance metrics
49
-
50
- ## 25+ MCP Tools
51
-
52
- | Category | Tools |
53
- |----------|-------|
54
- | Connection | `connect_app`, `launch_app` |
55
- | UI Inspection | `inspect`, `get_widget_tree`, `get_widget_properties`, `get_text_content`, `find_by_type` |
56
- | Interactions | `tap`, `double_tap`, `long_press`, `swipe`, `drag`, `scroll_to`, `enter_text` |
57
- | State | `get_text_value`, `get_checkbox_state`, `get_slider_value`, `wait_for_element`, `wait_for_gone` |
58
- | Screenshot | `screenshot`, `screenshot_element` |
59
- | Navigation | `get_current_route`, `go_back`, `get_navigation_stack` |
60
- | Debug | `get_logs`, `get_errors`, `get_performance`, `clear_logs` |
61
- | Dev | `hot_reload`, `pub_search` |
83
+ ### App Lifecycle Management
84
+ | Tool | Description |
85
+ |------|-------------|
86
+ | `launch_app` | Launch Flutter app with dart_defines, flavor, target, extra_args |
87
+ | `scan_and_connect` | Auto-scan ports and connect to first running Flutter app |
88
+ | `list_running_apps` | List all running Flutter apps (VM Services) |
89
+ | `connect_app` | Connect to specific VM Service URI |
90
+ | `stop_app` | Stop the currently running app |
91
+ | `disconnect` | Disconnect without stopping the app |
92
+ | `get_connection_status` | Get connection info and suggestions |
93
+ | `hot_reload` | Fast reload (keeps state) |
94
+ | `hot_restart` | Full restart (resets state) |
95
+
96
+ ### UI Inspection
97
+ | Tool | Description |
98
+ |------|-------------|
99
+ | `inspect` | Get interactive elements with coordinates, size, and center point |
100
+ | `get_widget_tree` | Get widget tree structure with depth control |
101
+ | `get_widget_properties` | Get properties of a widget (size, position, visibility) |
102
+ | `get_text_content` | Extract all visible text from the screen |
103
+ | `find_by_type` | Find widgets by type (e.g., ElevatedButton) |
104
+
105
+ ### Interactions
106
+ | Tool | Description |
107
+ |------|-------------|
108
+ | `tap` | Tap a widget by Key or Text (returns success/failure) |
109
+ | `double_tap` | Double tap a widget |
110
+ | `long_press` | Long press with configurable duration |
111
+ | `swipe` | Swipe gesture (up/down/left/right) |
112
+ | `edge_swipe` | Swipe from screen edge (for drawer menus, back gestures) |
113
+ | `drag` | Drag from one element to another |
114
+ | `scroll_to` | Scroll to make an element visible |
115
+ | `enter_text` | Enter text into a text field (returns success/failure) |
116
+
117
+ ### State & Validation
118
+ | Tool | Description |
119
+ |------|-------------|
120
+ | `get_text_value` | Get current value of a text field |
121
+ | `get_checkbox_state` | Get checked state of a checkbox/switch |
122
+ | `get_slider_value` | Get current value of a slider |
123
+ | `wait_for_element` | Wait for an element to appear (with timeout) |
124
+ | `wait_for_gone` | Wait for an element to disappear |
125
+
126
+ ### Screenshots
127
+ | Tool | Description |
128
+ |------|-------------|
129
+ | `screenshot` | Take full app screenshot (quality, max_width options) |
130
+ | `screenshot_region` | Take screenshot of specific region (x, y, width, height) |
131
+ | `screenshot_element` | Take screenshot of specific element |
132
+
133
+ ### Navigation
134
+ | Tool | Description |
135
+ |------|-------------|
136
+ | `get_current_route` | Get the current route name |
137
+ | `go_back` | Navigate back |
138
+ | `get_navigation_stack` | Get the navigation stack |
139
+
140
+ ### Debug & Logs
141
+ | Tool | Description |
142
+ |------|-------------|
143
+ | `get_logs` | Get application logs |
144
+ | `get_errors` | Get application errors |
145
+ | `clear_logs` | Clear logs and errors |
146
+ | `get_performance` | Get performance metrics |
147
+
148
+ ### Utilities
149
+ | Tool | Description |
150
+ |------|-------------|
151
+ | `pub_search` | Search Flutter packages on pub.dev |
152
+
153
+ ---
154
+
155
+ ## Installation Methods
156
+
157
+ | Method | Command | Auto-Update | Native Binary |
158
+ |--------|---------|-------------|---------------|
159
+ | npm | `npm install -g flutter-skill-mcp` | Manual | Auto-download |
160
+ | Homebrew | `brew install ai-dashboad/flutter-skill/flutter-skill` | `brew upgrade` | Pre-compiled |
161
+ | VSCode | Extensions → "Flutter Skill" | Auto | Auto-download |
162
+ | IntelliJ | Plugins → "Flutter Skill" | Auto | Auto-download |
163
+ | pub.dev | `dart pub global activate flutter_skill` | Manual | Dart runtime |
164
+
165
+ ### Native Binary Performance
166
+ | Version | Startup Time |
167
+ |---------|--------------|
168
+ | Dart JIT | ~1 second |
169
+ | Native Binary | ~0.01 second |
170
+
171
+ Native binaries are automatically downloaded on first use for supported platforms:
172
+ - macOS (Apple Silicon & Intel)
173
+ - Linux (x64)
174
+ - Windows (x64)
175
+
176
+ ---
177
+
178
+ ## Flutter App Setup
179
+
180
+ For the MCP tools to work, your Flutter app needs the `flutter_skill` package:
181
+
182
+ ### Automatic Setup (Recommended)
183
+ ```bash
184
+ flutter-skill launch /path/to/project
185
+ # Automatically adds dependency and initializes
186
+ ```
187
+
188
+ ### Manual Setup
189
+ 1. Add dependency:
190
+ ```yaml
191
+ dependencies:
192
+ flutter_skill: ^0.2.15
193
+ ```
194
+
195
+ 2. Initialize in main.dart:
196
+ ```dart
197
+ import 'package:flutter_skill/flutter_skill.dart';
198
+
199
+ void main() {
200
+ FlutterSkillBinding.ensureInitialized();
201
+ runApp(MyApp());
202
+ }
203
+ ```
204
+
205
+ ---
206
+
207
+ ## Example Workflows
208
+
209
+ ### E2E Testing with Environment Variables
210
+ ```javascript
211
+ // Launch staging environment
212
+ flutter-skill.launch_app({
213
+ project_path: "./",
214
+ dart_defines: ["ENV=staging", "API_URL=https://staging.api.com"],
215
+ flavor: "staging",
216
+ target: "lib/main_staging.dart"
217
+ })
218
+
219
+ // Wait for app to load
220
+ flutter-skill.wait_for_element({ text: "Welcome" })
221
+
222
+ // Take screenshot
223
+ flutter-skill.screenshot()
224
+
225
+ // Perform login
226
+ flutter-skill.tap({ text: "Login" })
227
+ flutter-skill.enter_text({ key: "email_field", text: "test@example.com" })
228
+ flutter-skill.enter_text({ key: "password_field", text: "password123" })
229
+ flutter-skill.tap({ text: "Submit" })
230
+
231
+ // Verify success
232
+ flutter-skill.wait_for_element({ text: "Dashboard" })
233
+ ```
234
+
235
+ ### Connect to Running App
236
+ ```javascript
237
+ // List all running Flutter apps
238
+ flutter-skill.list_running_apps()
239
+ // Returns: { apps: ["ws://127.0.0.1:50123/ws", ...], count: 2 }
240
+
241
+ // Auto-connect to first one
242
+ flutter-skill.scan_and_connect()
243
+
244
+ // Or connect to specific one
245
+ flutter-skill.connect_app({ uri: "ws://127.0.0.1:50123/ws" })
246
+ ```
247
+
248
+ ### Debug a UI Issue
249
+ ```javascript
250
+ // Get widget tree
251
+ flutter-skill.get_widget_tree({ max_depth: 5 })
252
+
253
+ // Find specific widgets
254
+ flutter-skill.find_by_type({ type: "ElevatedButton" })
255
+
256
+ // Inspect interactive elements
257
+ flutter-skill.inspect()
258
+
259
+ // Check if element is visible
260
+ flutter-skill.wait_for_element({ key: "submit_button", timeout: 3000 })
261
+ ```
262
+
263
+ ---
264
+
265
+ ## IDE Extensions
266
+
267
+ ### VSCode Extension
268
+ - Auto-detects Flutter projects
269
+ - Prompts to add `flutter_skill` dependency
270
+ - Auto-downloads native binary
271
+ - Status bar shows connection state
272
+ - Commands: Launch, Inspect, Screenshot
273
+
274
+ ### IntelliJ/Android Studio Plugin
275
+ - Same features as VSCode
276
+ - Integrates with IDE notifications
277
+ - Tool window for status
278
+
279
+ ---
280
+
281
+ ## Troubleshooting
282
+
283
+ ### "Not connected to Flutter app"
284
+ ```javascript
285
+ // Check status and get suggestions
286
+ flutter-skill.get_connection_status()
287
+
288
+ // This returns:
289
+ // - Current connection state
290
+ // - List of available apps
291
+ // - Actionable suggestions
292
+ ```
293
+
294
+ ### "Unknown method ext.flutter.flutter_skill.xxx"
295
+ Your Flutter app doesn't have the `flutter_skill` package. Add it:
296
+ ```bash
297
+ flutter pub add flutter_skill
298
+ ```
299
+ Then restart the app (hot reload is not enough).
300
+
301
+ ### MCP server slow to start
302
+ The native binary should auto-download. If not:
303
+ ```bash
304
+ # For npm
305
+ npm update -g flutter-skill-mcp
306
+
307
+ # For Homebrew
308
+ brew upgrade flutter-skill
309
+ ```
310
+
311
+ ---
62
312
 
63
313
  ## Links
64
314
 
65
315
  - [GitHub](https://github.com/ai-dashboad/flutter-skill)
66
316
  - [pub.dev](https://pub.dev/packages/flutter_skill)
67
- - [Documentation](https://github.com/ai-dashboad/flutter-skill#readme)
317
+ - [npm](https://www.npmjs.com/package/flutter-skill-mcp)
318
+ - [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=ai-dashboad.flutter-skill)
319
+ - [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/PLUGIN_ID)
68
320
 
69
321
  ## License
70
322
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flutter-skill-mcp",
3
- "version": "0.2.13",
3
+ "version": "0.2.15",
4
4
  "description": "MCP Server for Flutter app automation - Give your AI Agent eyes and hands inside your Flutter app",
5
5
  "main": "index.js",
6
6
  "bin": {