MCP Flutter项目LLM安装与配置完全指南

前言

MCP Flutter Inspector是一款强大的Flutter应用调试工具，它通过LLM（大型语言模型）为开发者提供智能化的应用检查和交互能力。本文将详细介绍如何为MCP Flutter项目配置LLM环境，使AI助手能够与Flutter应用进行深度交互。

环境准备

在开始安装前，请确保您的开发环境满足以下要求：

1. Flutter SDK：已安装并配置完成（包含Dart SDK）
2. Flutter应用：准备一个用于调试的Flutter项目
3. AI助手：支持Cursor、Claude、Cline AI等MCP兼容工具
4. Git工具：用于代码仓库的克隆和管理

安装步骤详解

第一步：获取用户信息（AI助手执行）

在开始安装前，AI助手需要获取以下关键信息：

1. 询问用户希望将mcp_flutter仓库克隆到哪个目录（记为[MCP_SERVER_BASE_PATH]）
2. 确认要配置的Flutter应用项目路径（记为[FLUTTER_APP_PATH]）

重要提示：在获取这些路径信息前，不要继续后续步骤。

第二步：克隆仓库

使用获取到的[MCP_SERVER_BASE_PATH]执行以下命令：

cd [MCP_SERVER_BASE_PATH]
git clone [仓库地址]
cd mcp_flutter

克隆完成后，记[CLONED_MCP_FLUTTER_PATH]为[MCP_SERVER_BASE_PATH]/mcp_flutter。

第三步：安装依赖并构建

在[CLONED_MCP_FLUTTER_PATH]目录下执行：

make install

此命令将：

• 安装所有必要的Dart依赖
• 自动构建MCP服务器
• 在mcp_server_dart/build/目录下生成可执行文件flutter_inspector_mcp

第四步：为Flutter应用添加MCP工具包

进入用户的Flutter应用目录[FLUTTER_APP_PATH]，执行：

flutter pub add mcp_toolkit

或者手动在pubspec.yaml中添加依赖：

dependencies:
  mcp_toolkit: ^0.2.0

然后运行：

flutter pub get

第五步：初始化MCP工具包

修改Flutter应用的main.dart文件：

import 'package:flutter/material.dart';
import 'package:mcp_toolkit/mcp_toolkit.dart';
import 'dart:async';

Future<void> main() async {
  runZonedGuarded(
    () async {
      WidgetsFlutterBinding.ensureInitialized();
      MCPToolkitBinding.instance
        ..initialize()
        ..initializeFlutterToolkit();
      runApp(const MyApp());
    },
    (error, stack) {
      MCPToolkitBinding.instance.handleZoneError(error, stack);
    },
  );
}

注意：请将const MyApp()替换为您应用的实际根组件。

第六步：以调试模式启动Flutter应用

使用以下命令启动Flutter应用：

flutter run --debug --host-vmservice-port=8182 --dds-port=8181 --enable-vm-service --disable-service-auth-codes

安全提示：--disable-service-auth-codes标志目前是必要的安全绕过措施。

AI助手配置指南

根据您使用的AI助手类型，选择相应的配置方式：

Cline AI配置

1. 编辑配置文件（通常位于~/Library/Application Support/[IDE]/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json）

{
  "mcpServers": {
    "flutter-inspector": {
      "command": "[CLONED_MCP_FLUTTER_PATH]/mcp_server_dart/build/flutter_inspector_mcp",
      "args": [
        "--dart-vm-host=localhost",
        "--dart-vm-port=8181",
        "--resources",
        "--images",
        "--dynamics"
      ],
      "env": {},
      "disabled": false,
      "autoApprove": []
    }
  }
}

2. 重启Cline AI

Cursor配置

1. 编辑~/.cursor/mcp.json文件：

{
  "mcpServers": {
    "flutter-inspector": {
      "command": "[CLONED_MCP_FLUTTER_PATH]/mcp_server_dart/build/flutter_inspector_mcp",
      "args": [
        "--dart-vm-host=localhost",
        "--dart-vm-port=8181",
        "--no-resources",
        "--images",
        "--dynamics"
      ],
      "env": {},
      "disabled": false
    }
  }
}

2. 重启Cursor
3. 使用Cmd+L（macOS）打开Agent面板测试功能

Claude Desktop配置

1. 编辑配置文件（通常位于~/Library/Application Support/Claude/claude_desktop_config.json）

{
  "mcpServers": {
    "flutter-inspector": {
      "command": "[CLONED_MCP_FLUTTER_PATH]/mcp_server_dart/build/flutter_inspector_mcp",
      "args": [
        "--dart-vm-host=localhost",
        "--dart-vm-port=8181",
        "--resources",
        "--images",
        "--dynamics"
      ],
      "env": {},
      "disabled": false
    }
  }
}

2. 重启Claude Desktop

动态工具注册功能

MCP Flutter Inspector v2.2.0引入了动态工具注册功能，允许：

• 运行时添加自定义工具
• 支持热重载
• 暴露应用特定的调试工具

示例代码

final customTool = MCPCallEntry.tool(
  handler: (request) {
    final name = request['name'] ?? 'World';
    return MCPCallResult(
      message: 'Hello, $name!',
      parameters: {'greeting': 'Hello, $name!'},
    );
  },
  definition: MCPToolDefinition(
    name: 'say_hello',
    description: 'Say hello to someone',
    inputSchema: {
      'type': 'object',
      'properties': {
        'name': {
          'type': 'string',
          'description': 'Name to greet',
        },
      },
    },
  ),
);

await MCPToolkitBinding.instance.addEntries(entries: {customTool});

验证安装

完成安装后，可以通过以下方式验证：

1. 确认Flutter应用以指定参数运行
2. 确认AI助手已重启
3. 尝试以下命令：
   • "列出我的Flutter应用中的所有可用工具"
   • "获取应用截图"
   • "获取运行时错误"

常见问题解决

1. 连接问题：

   • 检查Flutter应用是否以正确的端口运行
   • 验证AI工具的MCP服务器配置

2. MCP服务器未找到：

   • 确认可执行文件路径正确
   • 确保make install成功执行

3. 权限问题：

   • 检查文件权限
   • 确保可执行文件有执行权限

4. 工具不可用：

   • 确认AI助手已重启
   • 检查配置中的disabled标志

5. 动态工具不显示：

   • 确认mcp_toolkit正确初始化
   • 使用listClientToolsAndResources验证注册
   • 热重载Flutter应用

命令行参数参考

MCP服务器支持以下参数：

• --dart-vm-host：Dart VM连接主机（默认：localhost）
• --dart-vm-port：Dart VM连接端口（默认：8181）
• --resources：启用资源支持
• --no-resources：禁用资源支持
• --images：启用图片支持
• --dumps：启用转储支持
• --dynamics：启用动态工具注册
• --log-level：日志级别（默认：info）
• --environment：环境（默认：production）

通过本文的详细指导，您应该能够成功为MCP Flutter项目配置LLM环境，充分利用AI助手增强您的Flutter开发体验。