使用 VSCode 和 Cline 配置 MCP 及交互流程解析

引言

在现代开发环境中，模型上下文协议（Model Context Protocol，简称 MCP）为开发者提供了强大的工具调用能力。本文将详细介绍如何在 VSCode 中结合 Cline 配置 MCP 服务器，以 Time Server 为例展示其工作流程，并深入解析 Cline 与 AI 的交互过程。通过本文，您将学会配置 MCP、捕获交互数据以及理解 Cline 调用 MCP 的实现细节。本教程适合对 AI 工具调用和开发环境配置感兴趣的开发者。

配置 MCP 环境

配置步骤

MCP 的配置过程可以通过 VSCode 和 Cline 实现，网上已有大量教程，这里仅简要概述关键步骤：

1. 安装依赖：确保安装了 VSCode、Cline 以及 Python 环境。
2. 配置 Time Server：通过 MCP 配置文件启用 Time Server。
3. 验证配置：配置成功后，Time Server 右侧的绿色指示点将亮起，表示服务已正常运行。

MCP 配置文件

以下是 Time Server 的配置文件示例，用于在本地运行并指定亚洲/上海时区：

{
  "mcpServers": {
    "github.com/modelcontextprotocol/servers/tree/main/src/time": {
      "command": "python",
      "args": ["-m", "mcp_server_time", "--local-timezone=Asia/Shanghai"],
      "disabled": false,
      "autoApprove": []
    }
  }
}

验证效果：配置完成后，VSCode 界面中 Time Server 右侧的绿色指示点亮起，表示配置成功。

捕获交互数据

要深入分析 Cline 与 AI 的交互过程，需要捕获 Prompt 和响应数据。以下是通过 AI 网关和 CloudFlare 实现数据捕获的步骤：

1. 设置 AI 网关：配置网关以拦截 Cline 和 AI 之间的通信数据。
2. 使用 CloudFlare：通过 CloudFlare 的日志功能记录交互细节。
3. 参考资源：推荐观看 B 站视频教程 BV1P3XTYPEJm，了解详细配置方法。

捕获结果：成功捕获后，可在 CloudFlare 日志中查看完整的 Prompt 和响应数据，包含两次交互的详细记录。

Cline 中的 MCP 交互流程

Cline 通过调用 MCP 服务器实现与 AI 的高效交互。以下以查询“北京时间现在是几点”为例，解析完整的交互流程。

第一次交互：发起查询

用户在 Cline 中输入任务，Cline 构造 Prompt 并调用 Time MCP Server。以下是第一次交互的 Prompt 结构：

{
  "generationConfig": {
    "temperature": 0
  },
  "safetySettings": [],
  "systemInstruction": {
    "role": "system",
    "parts": [
      {
        "text": "You are Cline, a highly skilled software engineer with extensive knowledge in many programming languages, frameworks, design patterns, and best practices."
      }
    ]
  },
  "contents": [
    {
      "role": "user",
      "parts": [
        {
          "text": "<task>\n北京时间现在是几点\n</task>"
        },
        {
          "text": "<environment_details>\n# VSCode Visible Files\n."
        }
      ]
    }
  ]
}

Prompt 解析：

• generationConfig：设置 temperature: 0，确保 AI 回答稳定。
• systemInstruction：定义 Cline 作为一个经验丰富的软件工程师，支持多种工具调用（如 use_mcp_tool）。
• contents：包含用户任务（查询北京时间）和环境信息（如 VSCode 文件状态）。

响应：AI 分析任务，决定调用 Time Server 的 get_current_time 工具，并生成以下 XML 请求：

<use_mcp_tool>
  <server_name>github.com/modelcontextprotocol/servers/tree/main/src/time</server_name>
  <tool_name>get_current_time</tool_name>
  <arguments>
    {
      "timezone": "Asia/Shanghai"
    }
  </arguments>
</use_mcp_tool>

第二次交互：处理工具响应

用户确认工具调用后，MCP Server 返回时间数据，Cline 继续处理。以下是第二次交互的 Prompt 部分：

{
  "contents": [
    {
      "role": "user",
      "parts": [
        {
          "text": "<task>\n北京时间现在是几点\n</task>"
        },
        {
          "text": "<environment_details>\n# VSCode Visible Files\n</environment_details>"
        }
      ]
    },
    {
      "role": "model",
      "parts": [
        {
          "text": "<thinking>\nThe user wants to know the current time in Beijing. I have access to an MCP server that can provide the current time in a specific timezone. I should use the `get_current_time` tool from the `time` server. The timezone should be set to \"Asia/Shanghai\".\n</thinking>\n```xml\n<use_mcp_tool>\n<server_name>github.com/modelcontextprotocol/servers/tree/main/src/time</server_name>\n<tool_name>get_current_time</tool_name>\n<arguments>\n{\n  \"timezone\": \"Asia/Shanghai\"\n}\n</arguments>\n</use_mcp_tool>\n```"
        }
      ]
    },
    {
      "role": "user",
      "parts": [
        {
          "text": "[use_mcp_tool for 'github.com/modelcontextprotocol/servers/tree/main/src/time'] Result:"
        },
        {
          "text": "{\n  \"timezone\": \"Asia/Shanghai\",\n  \"datetime\": \"2025-04-25T17:13:52+08:00\",\n  \"is_dst\": false\n}"
        },
        {
          "text": "<environment_details>\n</environment_details>"
        }
      ]
    }
  ]
}

响应：AI 接收到时间数据，生成最终答案：

<attempt_completion>
  <result>
    The current time in Beijing is 2025-04-25T17:13:52+08:00.
  </result>
</attempt_completion>

交互总结：

1. 用户提出问题，Cline 构造 Prompt 并调用 MCP Server。
2. AI 分析任务，生成工具调用请求。
3. 用户确认后，MCP Server 返回数据，AI 完成任务。

常见问题与思考

• 为何使用本地 MCP Server？MCP 在本地运行可以减少对云端大模型的依赖，提高响应速度和隐私性。
• attempt_completion 如何工作？它是 Cline 的内置工具，用于格式化最终输出，具体实现涉及本地解析和渲染逻辑。
• 如何实现本地调用？Cline 通过配置的 MCP 服务器地址直接调用本地服务，具体机制将在后续文章中探讨。

结论

通过 VSCode 和 Cline 配置 MCP，开发者可以轻松实现与 AI 的高效交互。本文以 Time Server 为例，详细展示了配置流程、数据捕获方法以及 Cline 的交互细节。希望本文能帮助您快速上手 MCP，并在开发中探索更多 AI 工具调用的可能性。后续文章将深入解析 Cline 的本地调用机制，敬请期待！