diff --git a/sites/docs/src/content/ai/mcp-server.md b/sites/docs/src/content/ai/mcp-server.md index 7495483c8ef..d489e64f4c3 100644 --- a/sites/docs/src/content/ai/mcp-server.md +++ b/sites/docs/src/content/ai/mcp-server.md @@ -392,6 +392,54 @@ is now a single request. [`package:fl_chart`]: {{site.pub-pkg}}/fl_chart +### Interact with a running app + +You can use the Dart and Flutter MCP server to drive a running +Flutter app from your AI assistant—take screenshots, tap buttons, +enter text, scroll, and hot reload. + +On mobile and desktop, gate `enableFlutterDriverExtension()` behind a +`--dart-define` flag in your app's `main()` so it stays out of +production builds: + +```dart +import 'package:flutter_driver/driver_extension.dart'; + +void main() { + if (const bool.fromEnvironment('ENABLE_FLUTTER_DRIVER')) { + enableFlutterDriverExtension(); + } + runApp(const MyApp()); +} +``` + +Launch your app with the flag turned on: + +```bash +flutter run -d --dart-define=ENABLE_FLUTTER_DRIVER=true +``` + +Then ask your assistant to connect: + +> Connect to my running Flutter app, take a screenshot, then tap "Sign In". + +The agent uses the `dtd` tool to discover the app and `flutter_driver_command` +to drive its UI—no integration test setup required. + +:::note +**Web**: the `flutter_driver` package doesn't compile under dart2js. Pair +the Dart MCP server with a browser-driving MCP for clicks and screenshots; +the Dart MCP server still handles widget tree, runtime errors, and hot +reload through DTD. Prefer `flutter run -d web-server` so the browser the +agent drives is the one DTD is connected to—with -d chrome, only the +window Flutter spawned receives hot reload patches. + +See the [setup guide][flutter-driver-guide] for the snippet, web modes, +and common pitfalls. +::: + +[flutter-driver-guide]: https://github.com/dart-lang/ai/blob/main/pkgs/dart_mcp_server/README.md#connect-to-a-running-flutter-app + ## Provide feedback If you encounter any issues or have feedback about the