推荐|不写一行代码! VsCode+Cline+高德地图MCP Server 帮你搞定和女友的出行规划（附原理解析）

前言

笔者的前两篇分享

带大家使用Pyhton MCP SDK从0到1实现了包含天气查询和计算器功能的MCP Server 服务端, 并编写MCP Client 客户端进行访问，详细介绍了MCP开发模式、通信方式等内容。

有读者私信笔者：“这两篇文章适合开发人员阅读，但我不会写代码，有没有什么自动工具可以让我借助MCP快速开发智能体呢?”。答案是肯定的，在AI编程当道人人都是程序员的时代，这很容易实现！目前很多教程都是基于Cursor, Windsurf软件连接MCP，但这些软件高昂的订阅价格让我们望而却步~

今天这篇分享笔者带你使用VsCode+Cline+高德地图MCP快速免费开发一个出行规划小助手！并深入探究了Cline调用MCP Server的原理，当然这篇文章同样适合开发人员进一步阅读巩固MCP开发技巧，大家一起来看看吧~

一、环境搭建

1.1 高德地图api申请

使用高德地图开放的MCP Server服务需要申请一个高德地图的API Key，按如下方式申请:

进入高德开放平台官网，点击右上角控制台，注册成为开发者，注册完成后点击确认即可。

进入控制台后，点击左侧的应用管理，点击下拉栏中我的应用一项，点击创建新应用

创建一个新应用后点击右上角添加Key, 按命名规范要求输入Key名称，并选择“Web服务”选项，勾选“阅读并同意……”，最后点击“提交”按钮, 稍等片刻得到高德地图的API Key。

1.2 VsCode + Cline + DeepSeek API

我们需要在VsCode中安装Cline插件，并在Cline中配置DeepSeek的API Key。之前的文章零门槛！手把手教你用VS Code + Cline玩转AI编程！详细介绍了VsCode+Cline+DeepSeek API的安装步骤和配置，这里不再赘述。完成后效果如下：

同时注意在Cline中还需要勾选Use MCP servers，确保MCP Server服务功能正常:

1.3 node.js 下载安装

MCP Server流行的开发方式除了使用Python SDK外，更多应用采用JavaScript语言结合JS SDK开发，需要安装node.js满足javascript开发的MCP Server的运行需求。

我在平常开发过程中喜欢使用nvm管理不同版本的node.js(类比使用anaconda管理python版本），大家可按如下步骤下载nvm:

访问 nvm github找到nvm-setup.zip下载并解压。

选择 nvm 和 node.js 的安装路径，注意安装路径不要有中文和空格，一路点击next, 安装好之后就可以调用nvm version命令查看是否安装成功。（我这里已经安装过nvm版本较老，nvm是1.1.9版本）

为了加快相关包的下载速度，我们可以修改nvm的下载源为国内源，在命令行输入nvm root可以找到nvm安装路径，打开安装目录找到 settings.txt 文件，写入如下源地址修改下载源：


ruby
 代码解读
复制代码
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

高德地图MCP server所需的node.js版本较高，执行nvm install 22.10.0安装 22.10.0版本的node.js, 安装完成后执行nvm list查看已安装的版本，前面带*表示当前使用的node.js版本。如果当前使用版本不是新版的话，执行nvm use 22.10.0切换到新版。

1.4 Cline连接高德地图MCP Server

Cline除了连接DeepSeek大模型还需要连接高德地图MCP Server获得高德地图提供的多种能力。

访问MCP Servers官方网站，打开高德地图Amap Maps，点击Content，其中介绍了高德地图MCP的接入配置：


json
 代码解读
复制代码
{
    "mcpServers": {
        "amap-maps": {
            "command": "npx",
            "args": [
                "-y",
                "@amap/amap-maps-mcp-server"
            ],
            "env": {
                "AMAP_MAPS_API_KEY": "您在高德官网上申请的key"
            }
        }
    }
}

特别注意： 以上配置只适用于MacOS系统，在Windows系统上要进行简单修改，修改后的配置如下：


json
 代码解读
复制代码
{
  "mcpServers": {
    "amap-maps": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@amap/amap-maps-mcp-server"
      ],
      "env": {
        "AMAP_MAPS_API_KEY": "您在高德官网上申请的key"
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

首先点击Vs Code中的Cline，然后点击MCP Servers小图标，再点击 Installed 选项，点击 Configure MCP Servers 打开 MCP Servers 配置文件，将上述配置粘贴到该配置文件中

测试高德地图MCPServer, 连接成功之后会在右下角出现Cline的消息提示amap-maps MCP Server connected, 同时在Cline的MCP Server Tools列表中可以高德地图MCP Server暴露出的12种方法，大家可以看到关于这些方法的具体介绍。

以上就是本项目需要的全部配置。

二、两步搞定高德地图MCP出行规划

完成上述配置后通过一个具体场景带大家两步学会使用高德地图MCP进行出行规划:

2.1 项目背景

又到周末啦！和工作日的牛马不同，周末要化身“爱妻超人”带女朋友去潇洒了。不说了，女朋友电话来了

女朋友：“宝贝春天了，周末我想去公园玩，有没有好玩的公园呀~”
我: “春天要去踏青了，我们就去玉渊潭看花吧”
女朋友：“玉渊潭去过好多次了，我想换个公园，要不找个咱俩中间地点的公园吧~"
我: “中间的公园，这...”
女朋友： “你竟然没有计划我们的周末行程，还吹牛说自己对北京很熟悉，我要生气啦~”
我: “当然不是，哎呀我当然计划了，只是只是，给我5min~”

这时的我迅速打开VsCode+Cline, 连接好高德地图MCP Server, 开始了我的骚操作

2.2 设计提示词

提问大模型的第一步首先要说明我们的需求，设计明确的提示词。打开VsCode, 点击小机器人图标打开Cline, 在Type your task here中输入如下提示词:


 代码解读
复制代码
我住在北京海淀区永丰地铁站附近，女朋友在北京市海淀区魏公村地铁站附近，
帮我推荐几个与两个人距离相近，方便停车的，景色优美的公园。
并给出公园的具体信息。

输入提示词之后，Cline会通过DeepSeek大模型组织串联高德地图MCP Server的多种工具帮我们挑选公园，在调用接口时如果我们没有勾选auto approve选项，需要我们人工确定是否调用这些接口，我们一路点击Approve即可。

DeepSeek会梳理调用MCP Server获得的各种信息，返回给我们最后的推荐。可以看到最后DeepSeek帮我们推荐了三个公园分别是圆明园遗址公园，清河之源滨水公园和厢黄旗公园。

2.3 生成可视化网页

这就完啦？当然没有，对于一个优秀的“爱妻”程序员来说，不能只会规划，还要用一种更惊喜的方式把这些信息展示出来，还记得我有篇文章不写一行代码使用VsCode+Cline生成网站的教程，我们让Cline根据返回结果帮我们制作一个精美的网站展示页，继续输入如下提示词:


css
 代码解读
复制代码
上面的推荐内容，能不能帮我生成一个html文件，
用好看的图像表达出来，方便大家美观的查看

输入如上提示词后，Cline开始自动给我们生成html代码了:

生成完毕后点击run command查看网页的生成效果，还是很漂亮的。

得到html代码后，我们使用HTMLPUT网站把我们的静态代码粘贴进去（拿临时邮箱注册一个账号即可），访问权限选择公开访问，点击立即托管。在历史记录之中点击查看，然后把链接分享给别人，大家就可以在线看到网页了，也可以通过二维码分享，我生成的网页链接是：share.htmlput.com/p/r9ka42qzc…

2.4 项目效果

我： “宝贝，我发了你一个链接，你快点开看看~

女朋友: “啥东西呀~，我看看，哇好漂亮，最爱你啦宝，你太厉害了！"

我: “简简单单哈哈哈哈哈....”

哎，怎么醒了。我从睡梦中清醒，看到手机上女朋友给我发的消息：“宝这两天北京大风，我们先在家苟一下就不去玩啦”。

原来都是我的一场梦呀，仔细想想，我女朋友怎么会说“你竟然没有计划我们周末”这句话，遇到相关情况我女朋友只会说“男朋友先歇着，我来看看我们去哪里玩~”，虚惊一场，接着睡觉吧。

不过我还是把整个过程记录下来，分享给大家，让大家也都快速利用高德地图MCP Server完成出行规划！

三、 Cline接入MCP Server原理解析

3.1 Cline MCP 客户端和服务端通信方式

Cline接入MCP究竟是如何得到这么神奇的效果呢，大家如果看过我的文章：理论+代码一文带你深入浅出MCP 脑海中应该有个整体思路，Cline+大模型相当于MCP的客户端，高德地图是MCP服务端, 不过它们之间是如何通信的呢？

大家还记得上面Cline配置高德地图MCP的配置项, 该配置项相当于执行了npx -y @amap/amap-maps-mcp-server命令


json
 代码解读
复制代码
{
  "mcpServers": {
    "amap-maps": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@amap/amap-maps-mcp-server"
      ],
      "env": {
        "AMAP_MAPS_API_KEY": "你的高德地图API Key"
      },
      "disabled": false,
      "autoApprove": [
        "maps_geo",
        "maps_around_search",
        "maps_search_detail"
      ]
    }
  }
}

我们在本地命令行cmd窗口运行npx -y @amap/amap-maps-mcp-server, 注意在运行前要设置环境变量set AMAP_MAPS_API_KEY="你的高德地图API Key" 为你高德地图的API Key，效果如下：

很明显的看到高德地图MCP服务端是通过stdio标准输入输出方式与Cline 大模型 MCP客户端相互通信的。

3.2 接入自定义Client

既然高德地图MCP Server是通过stdio标准输入输出方式与MCP Client相连的，我们能不能利用理论+代码一文带你深入浅出MCP 中使用python编写的client.py，将高德地图MCP Server作为它的子进程进行通信呢？赶快来试一下~

完整代码为:


python
 代码解读
复制代码

import asyncio
import json
from typing import Optional
from contextlib import AsyncExitStack
from openai import OpenAI

from mcp import ClientSession, StdioServerParameters
from mcp.client.stdio import stdio_client

class MCPClient:
    def __init__(self):
        """初始化MCP客户端"""
        self.exit_stack = AsyncExitStack()
        self.opanai_api_key = "你注册的deepseek api_key" # 调用模型的api_key
        self.base_url = "https://api.deepseek.com" # 调用模型url, 这里以deepseek作演示
        self.model = "deepseek-chat" # 调用deepseek-v3模型
        self.client = OpenAI(api_key=self.opanai_api_key, base_url=self.base_url)
        self.session: Optional[ClientSession] = None # Optional提醒用户该属性是可选的，可能为None
        self.exit_stack = AsyncExitStack() # 用来存储和清楚对话中上下文的，提高异步资源利用率

    async def connect_to_server(self):
        """连接到MCP服务器并列出MCP服务器的可用工具函数"""
        server_params = StdioServerParameters(
            command="npx",
            args=["-y", "@amap/amap-maps-mcp-server"],
            env={
                "AMAP_MAPS_API_KEY": "你注册的高德地图api key"
            }
        ) # 设置启动服务器的参数, 这里是要用python执行server.py文件

        # 启动MCP服务器并建立通信
        stdio_transport = await self.exit_stack.enter_async_context(stdio_client(server_params))
        self.stdio, self.write = stdio_transport
        self.session = await self.exit_stack.enter_async_context(ClientSession(self.stdio, self.write))

        await self.session.initialize() # 与服务器建立stdio连接

        # 列出MCP服务器上的工具
        response = await self.session.list_tools()
        tools = response.tools
        print("\n已连接到服务器，支持以下工具:", [tool.name for tool in tools])#打印服务端可用的工具
  
    async def process_query(self, query:str)->str:
        """使用大模型处理查询并调用MCP Server可用的MCP工具"""
        messages = [{"role":"user", "content":query}]
        response = await self.session.list_tools()

        available_tools = [{
            "type": "function",
            "function": {
                "name": tool.name,
                "description": tool.description,
                "input_schema": tool.inputSchema
            }
        } for tool in response.tools]

        response = self.client.chat.completions.create(
            model=self.model,
            messages=messages,
            tools=available_tools
        )

        # 处理返回内容
        content = response.choices[0]
        if content.finish_reason == "tool_calls":
            # 返回结果是使用工具的建议，就解析并调用工具
            tool_call = content.message.tool_calls[0]
            tool_name = tool_call.function.name
            tool_args = json.loads(tool_call.function.arguments)
            # 执行工具
            result = await self.session.call_tool(tool_name, tool_args)
            print(f"\n\n[Calling tool {tool_name} with args {tool_args}]\n\n")
            # 将模型返回的调用工具的对话记录保存在messages中
            messages.append(content.message.model_dump())
            messages.append({
                "role": "tool",
                "content": result.content[0].text,
                "tool_call_id": tool_call.id,
            })
            # 将上面的结果返回给大模型用于生产最终结果
            response = self.client.chat.completions.create(
                model=self.model,
                messages=messages
            )
            return response.choices[0].message.content
        return content.message.content
  
    async def chat_loop(self):
        """运行交互式聊天"""
        print("\n MCP客户端已启动！输入quit退出")

        while True:
            try:
                query = input("\n用户:").strip()
                if query.lower() == 'quit':
                    break
                response = await self.process_query(query)
                print(f"\nDeepSeek-V3-0324: {response}")
            except Exception as e:
                print(f"发生错误: {str(e)}")

    async def clean(self):
        """清理资源"""
        await self.exit_stack.aclose()

async def main():
    client = MCPClient()
    try:
        await client.connect_to_server()
        await client.chat_loop()
    finally:
        await client.clean()

if __name__ == "__main__":
    import sys
    asyncio.run(main())

和理论+代码一文带你深入浅出MCP文中的client.py原始代码仅仅发生两处变动:

在connect_to_server函数中，stdio标准输入输出方式 MCP Server是作为MCP Client的子进程存在的，我们要把运行参数修改为高德地图MCP server的启动命令，因此命令由原来的:


python
 代码解读
复制代码
server_params = StdioServerParameters(
        command="python",
            args=[server_script_path],
            env=None
        ) # 设置启动服务器的参数, 这里是要用python执行server.py文件

修改为：


python
 代码解读
复制代码
server_params = StdioServerParameters(
            command="npx",
            args=["-y", "@amap/amap-maps-mcp-server"],
            env={
                "AMAP_MAPS_API_KEY": "你注册的高德地图api"
            }
        ) # 设置启动服务器的参数, 这里是要用python执行server.py文件

在main函数中之前需要添加server_path作为参数, 以前的运行命令是uv run client.py server.py, 将server.py作为参数启动。现在高德地图MCP Server直接写死在connect_to_server函数命令行中，删除参数判断:


python
 代码解读
复制代码
async def main():
    if len(sys.argv) < 2:
        print("使用方法是： python client.py server.py")
        sys.exit(1)

同时只需要执行uv run client.py即可启动客户端, 首先看到已连接到服务器且列出高德地图MCP Server支持的全部工具函数:

我们尝试输入北京当前天气 看到客户端调用高德地图maps_weather 服务将当前北京大风天气也反馈出来了。

没有联网的DeepSeek效果如下

这个例子再一次验证了理论正确性和我们编写客户端服务端代码通用性，也更让大家感受到MCP开发的便捷优势！

四、总结

本期分享我们通过使用VsCode+Cline+高德地图MCP Server，不写一行代码免费快速构建了和女友出行规划智能体！同时还通过对Cline调用MCP Server的原理解析进一步巩固理解了MCP客户端服务端的通信方式，期待大家可以根据我们MCP的分享内容，构建出更好玩的AI Agent智能体，可以在评论区留言分享~

以上就是我今天的分享内容，感兴趣大家点个关注吧。大家也可关注我的同名微信公众号：大模型真好玩，免费分享工作生活中大模型开发教程和资料，大家有什么需要都可以私信我~

前言