mcp_flutter

概述

这是一个基于 Dart 的 MCP 服务器和 Flutter 工具包，使 AI 助手能够与正在运行的 Flutter 应用交互。它提供了 27 个以 'fmt_*' 为前缀的 MCP 工具，用于应用检查、交互、调试和生命周期管理。关键功能是在运行时动态注册自定义工具和资源，在 AI 代理和 Flutter 应用之间创建闭环反馈。

试试问 AI

装完之后，这里有 6 个你可以让 AI 做的事：

• fmt_list_client_tools_and_resources

  List all client tools and resources available in the Flutter app

  试试:Show me all available tools试试:List all Flutter resources
• fmt_hot_reload

  Trigger a hot reload of the Flutter app

  试试:Hot reload the app试试:Apply changes without restart
• fmt_hot_restart

  Trigger a hot restart of the Flutter app

  试试:Restart the app试试:Fully reload the application
• fmt_semantic_snapshot

  Take a semantic snapshot of the Flutter app's UI

  试试:Show me the current UI structure试试:Describe what's on screen
• fmt_tap_widget

  Tap on a specific widget in the Flutter app

  试试:Tap the login button试试:Press the submit button
• fmt_type_into_text_field

  Type text into a specific text field in the Flutter app

  试试:Enter my name in the first field试试:Type 'test@example.com' in the email field
• fmt_scroll

  Scroll the Flutter app view in a specific direction

  试试:Scroll down试试:Scroll to the top of the list
• fmt_screenshot

  Take a screenshot of the current Flutter app view

  试试:Capture the current screen试试:Take a picture of what's displayed
• fmt_get_recent_logs

  Retrieve recent logs from the Flutter app

  试试:Show me the latest logs试试:What errors have occurred recently?
• fmt_evaluate_dart_expression

  Evaluate a Dart expression in the Flutter app context

  试试:Evaluate 1+1 in the app context试试:Check the value of counterVariable
• fmt_navigate_to_route

  Navigate to a specific route in the Flutter app

  试试:Go to the home screen试试:Navigate to the profile page
• fmt_wait_for_condition

  Wait for a specific condition to be met in the Flutter app

  试试:Wait for the loading spinner to disappear试试:Wait until the button is enabled

可对比工具

安装

curl -fsSL https://raw.githubusercontent.com/Arenukvern/mcp_flutter/main/install.sh | bash

cd my-flutter-app
flutter-mcp-toolkit codegen-init   # 添加 flutter_mcp_toolkit 并生成 main.dart 代码片段

flutter-mcp-toolkit init claude-code   # 或者：cursor | codex | cline | all

flutter run --debug

{
  "mcpServers": {
    "flutter-mcp-toolkit": {
      "command": "flutter-mcp-toolkit",
      "args": ["server"]
    }
  }
}

FAQ

如何将 MCP 服务器连接到我的 Flutter 应用？

确保你的 Flutter 应用以调试模式运行。该工具包提供了一个 WebSocket 连接，MCP 服务器可以连接到它。你可以在 Flutter 应用的调试输出中找到连接 URI。

我可以为我的 Flutter 应用创建自定义 MCP 工具吗？

是的，该工具包支持在运行时动态工具注册。你可以使用 Flutter 应用中的 `MCPToolkitBinding.instance.addEntries()` 添加自定义工具。

支持哪些 AI 助手？

该工具包支持 Claude Code、Cursor、Codex、Zed、Intent、Cline 和其他可以连接到 MCP 服务器的兼容 AI 助手。

mcp_flutter 对比