Flutter Inspector MCP Server for AI-Powered Development
2025.04.17
33
JavaScriptFlutter开发工具AI辅助开发开发效率
Flutter Inspector MCP Server 是一个强大的模型上下文协议（MCP）服务器，专为Flutter开发者设计，用于连接Flutter应用与AI编码助手（如Cursor、Claude和Cline）。它提供了丰富的调试和检查工具，帮助开发者更高效地分析和优化Flutter应用的UI结构和性能。
View on GitHub
Overview
基本能力
产品定位
Flutter Inspector MCP Server 是一个专为Flutter开发者设计的工具，旨在通过AI辅助提升开发效率，特别是在调试和UI分析方面。
核心功能
- Widget树分析：获取Flutter应用结构的详细信息。
- 导航检查：查看当前路由和导航状态。
- 布局问题调试：理解widget之间的关系和属性。
- 截图功能：获取Flutter应用的当前屏幕截图。
- 根widget获取：获取应用的根widget信息。
适用场景
- Flutter应用的开发和调试。
- 需要AI辅助进行代码分析和优化的场景。
- 需要快速获取应用UI结构和状态的场景。
工具列表
- Utility Methods：如
get_active_ports、get_supported_protocols等，用于辅助功能。 - Debug Methods：如
debug_dump_render_tree、debug_dump_layer_tree等，用于调试。 - Inspector Methods：如
inspector_screenshot，用于检查UI。 - DartIO Methods：如
dart_io_get_version，用于获取Dart相关信息。
常见问题解答
- 连接问题：确保Flutter应用在调试模式下运行，并检查端口匹配。
- AI工具未检测到Inspector：重启AI工具，检查配置JSON语法。
使用教程
使用依赖
- Node.js (v14或更高版本)
- 运行在调试模式的Flutter应用
- 支持AI助手（如Cursor、Claude或Cline）
安装教程
通过Smithery安装
npx -y @smithery/cli install @Arenukvern/mcp_flutter --client claude
从GitHub安装
- 克隆仓库
git clone https://github.com/Arenukvern/mcp_flutter
cd flutter-inspector
- 安装并构建依赖
make install
- 启动转发服务器
make forward
- 添加DevTools Flutter扩展
flutter pub add --dev devtools_mcp_extension
- 启动Flutter应用
flutter run --debug --observatory-port=8181 --enable-vm-service --disable-service-auth-codes
调试方式
- 确保Flutter应用在调试模式下运行。
- 检查端口配置是否正确。
- 使用提供的工具方法进行调试和分析。