Flutter Inspector Server 使用说明

项目简介

Flutter Inspector Server 是一个基于 Model Context Protocol (MCP) 构建的服务器，旨在桥接 Flutter 应用程序和 AI 编码助手。通过此服务器，AI 助手可以理解您的 Flutter 应用结构、组件状态和运行信息，从而提供更智能的代码建议、调试辅助和分析能力，提升 Flutter 开发效率。

主要功能点

实时应用信息访问: 允许 AI 助手获取运行中 Flutter 应用的各种信息，例如 Widget 树、渲染树、Layer 树、语义树等。
强大的调试工具: 提供一系列调试工具，例如动态切换 Debug Paint 模式，帮助分析布局问题。
版本信息查询: 快速获取当前 Flutter 应用使用的 Flutter 版本信息。
事件流监听: 支持订阅 Flutter 应用的事件流，例如 Debug 事件、Isolate 事件、VM 事件等，进行深度的性能分析和监控。
端口发现: 自动检测正在运行的 Flutter/Dart 进程及其端口，方便连接。

安装步骤

方法一：从 GitHub 安装 (推荐给开发者)

克隆仓库:

git clone https://github.com/Arenukvern/mcp_flutter
cd mcp_flutter

安装依赖:
```
npm install
```
构建项目:
```
npm run build
```

运行服务器:

node build/index.js --stdio

方法二：全局安装 (快速开始)

全局安装 'flutter-inspector':

npm install -g flutter-inspector

运行服务器:

flutter-inspector --stdio

运行 Flutter 应用

在运行 Flutter Inspector Server 之前，请确保您的 Flutter 应用在 debug 模式下运行，并开启 Observatory 端口和 VM Service，同时为了兼容性建议禁用 service auth codes。

flutter run --debug --observatory-port=8181 --enable-vm-service --disable-service-auth-codes

服务器配置 (MCP 客户端配置)

您需要在您的 AI 编码助手中配置 Flutter Inspector Server 的启动命令。以下是针对 Cursor, Claude 和 Cline 的配置示例。请根据您的安装方式选择对应的路径。

通用配置说明:

以下配置中的 'command' 和 'args' 字段是 MCP 客户端连接 MCP 服务器的关键信息。'command' 指定了启动服务器的命令，'args' 指定了命令的参数。

{
  "mcpServers": {
    "flutter-inspector": {  // 服务器名称，可以自定义
      "command": "...",      // 启动服务器的命令，例如 "node" 或 "flutter-inspector"
      "args": ["..."],       // 命令参数，例如 ["/path/to/build/index.js", "--stdio"] 或 ["--stdio"]
      "env": {},            // 环境变量 (可选)
      "disabled": false,     // 是否禁用 (false 表示启用)
      "autoApprove": []     // 自动批准的工具列表 (可选)
    }
  }
}

Cursor 配置示例:

打开 Cursor 设置 (Settings) -> Features -> Model Context Protocol，添加以下配置：

{
  "mcpServers": {
    "flutter-inspector": {
      "command": "node",
      "args": ["/path/to/your/mcp_flutter/build/index.js"],  //  请替换为您的 flutter-inspector 项目 build/index.js 文件的实际路径 (GitHub 安装)
      "env": {},
      "disabled": false,
      "autoApprove": []
    }
  }
}

Claude 配置示例:

添加到 Claude 配置文件中：

{
  "mcpServers": {
    "flutter-inspector": {
      "command": "node",
      "args": ["/path/to/your/mcp_flutter/build/index.js"],  //  请替换为您的 flutter-inspector 项目 build/index.js 文件的实际路径 (GitHub 安装)
      "env": {
        "PORT": "3334",
        "LOG_LEVEL": "info"
      },
      "disabled": false
    }
  }
}

Cline 配置示例:

添加到 '.cline/config.json' 文件中：

{
  "mcpServers": {
    "flutter-inspector": {
      "command": "node",
      "args": ["/path/to/your/mcp_flutter/build/index.js"],  //  请替换为您的 flutter-inspector 项目 build/index.js 文件的实际路径 (GitHub 安装)
      "env": {
        "PORT": "3334",
        "LOG_LEVEL": "info"
      },
      "disabled": false
    }
  }
}

注意:

如果您使用全局安装方式，并且 'flutter-inspector' 命令已添加到您的 PATH 环境变量中，您可以尝试简化配置，例如 Cursor 配置可以尝试将 'command' 设置为 '"flutter-inspector"'，'args' 设置为 '["--stdio"]'。
请根据您的实际安装路径和 AI 助手的具体配置要求进行调整。

基本使用方法

配置完成后，在您的 AI 编码助手中，您应该可以使用 Flutter Inspector Server 提供的工具了。例如，您可以尝试向 AI 助手发送指令：

"分析我的 Flutter 应用的 Widget 树"
"获取当前 Flutter 版本的版本信息"
"切换 Debug Paint 模式"

具体的指令取决于您的 AI 助手的自然语言理解能力和对 MCP 协议工具的调用方式。请参考您使用的 AI 助手的文档，了解如何利用 MCP 服务器提供的功能。

关键词