老板问我：AI真能一键画广州旅游路线图？我用 MCP 现场开图

想象一下，你只需要对 AI 说一句"帮我生成一个可交互的广州旅游路线地图"，它就能给你一个可以缩放、点击、交互的精美地图。这不是科幻，而是 MCP 协议带来的现实！

本文将从零开始，教你实现这个"魔法"

什么是 MCP？

MCP简要介绍

MCP（Model Context Protocol）就是能够让 AI 大模型更好地使用各类工具的一个协议。

AI 模型只是一个大脑，而 MCP 协议就是让模型加上手脚，可以帮你干更多的事情，比如：

读取、修改你的本地文件
使用浏览器上网查询信息
查询实时交通路况
生成各种图表、地图路线

总之，MCP 能干的事情可太多了！要知道，大模型本身其实只会问答，它自己并不会使用外部工具，而 MCP 的出现就等于是让大模型拥有了使用各种外部工具的能力。

不过要想使用 MCP，你还得用到一个东西叫做 MCP Host 。

MCP Host

MCP Host 就是一个支持 MCP 协议的软件环境，能"跑"AI 模型，并且让 AI 模型能用各种外部工具。

常见 MCP Host：

Claude Desktop
Cursor
Trae
Cline （我们今天要使用的例子）

我们今天使用 Cline 为例来讲讲 MCP 的使用方法。

安装Mcp host (Client)

cline是vscode的一个插件，首先我们要下载vscode编辑器，然后在插件商店搜索cline并安装，安装好了之后侧边栏就会出现一个cline图标，点一下就进入使用cline的地方。

配置Cline用的API key

紧接着，我们需要配置ai模型，cline支持接入不同模型的api，如cluade、gpt、deepseek等模型，我们这里演示使用deepseek模型进行演示。

deepseek的官方网站就有提供api，我们可以到deepseek官方网站注册登录，并充值获取api。

创建好key之后，将key给cline，填好之后，cline会引导我们来到聊天页面，我们随便问它一个问题，给他打个招呼，看他能不能够正常回复，能正常回复就说明接入deepseek模型成功了

概念解释：MCP Server 和 Tool

MCP Server

MCP Server 即 MCP 服务器，跟我们传统意义上的 Server 并没有什么太大的关系，它就是一个程序而已，只不过这个程序的执行是符合 MCP 协议的。

大部分的 MCP 服务器都是本地通过 Node 或者是 Python 启动的，只不过在使用的过程中可能会联网，当然它也可能不联网，纯本地使用也是可以的。不管是联不联网，它都可以叫做 MCP Server，本质就是给 MCP 客户端即 AI 模型提供服务的。

Tool

所以 MCP Server 本质就是一个程序，就像手机上的应用，这些应用都内置了一些功能模块，而 Tool 就是 MCP Server 程序中的一些工具函数。

可以把 MCP Server 理解为一个计算器应用，这个计算器有计算和换算两个功能，作为用户可以根据自己需求选择计算还是换算功能，而这两个功能就是 Tool。

比如我们要让 DeepSeek 生成一个可交互的广州旅游路线地图，DeepSeek 是没办法完成的，但是我们可以安装一个处理生成图表的 MCP Server，它内部包含一个函数 generate_path_map 即 Tool，这个功能是传入地点、图的大小就可以返回路线地图。

所以我们要一个广州旅游路线地图的话，就得让cline安装处理生成图表的MCP Server，然后deepseek把地点、图的大小这些参数传给MCP Server的generate_path_map就可以拿到一个可交互的广州旅游路线地图了。

配置MCP Server

前面解释了MCP Server和Tool的概念，我们再回到cline这里继续实操。

首先我们打开进入cline，进入MCP Server 设置页面，点击"已安装"，再点击"配置MCP服务器"，之后cline就会跟我们打开一个cline_mcp_settings.json文件。如果我们想新增一个MCPServer的话，我们只需要在里面填入对应的启动命令就行了。

如下操作：

使用他人制作的MCP Server

接下来我们来安装一个别人写好的MCP Server,我们打开mcpmarket.cn/ ，这是一个MCP Server的市场，就跟我们手机的应用市场有点像，这里面有很多别人写好的MCP Server，我们去找生成图表的MCP ，复制配置就可以生效了

生成图表的MCP Serve工具链接: mcpmarket.cn/server/680e...

跟着以下的操作图进行操作：

按照网站上的说明，将配置添加到 cline_mcp_settings.json 文件中

window用户：

json 复制代码

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
    }
  }
}

mac用户：

json 复制代码

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"]
    }
  }
}

注意：电脑要装Node.js环境

没有的话要自行安装哦： nodejs.org/en/download...

实战演示

配置完成后，你就可以在 Cline 中输入：

"生成一个广州的旅游路线地图"

DeepSeek 会自动调用 MCP Server 的相关工具，为你生成一个精美的交互式地图！

生成可交互地图的效果图:

MCP交互流程详解

sequenceDiagram participant 用户 participant Cline participant deepseek participant MCP as MCP Server 用户->>Cline: 生成广州旅游路线地图 Cline->>deepseek: 用户请求 + 可用工具列表 deepseek->>Cline: 调用generate_interactive_map工具 Cline->>MCP: generate_interactive_map(广州, 景点列表) MCP->>MCP: 生成交互式地图 MCP->>Cline: 返回地图 Cline->>deepseek: 工具执行结果 deepseek->>Cline: 整理回复和说明 Cline->>用户: 显示地图和旅游建议

用户 -> Cline: "帮我生成一个广州的旅游路线地图，要可交互的哦！"
Cline -> deepseek模型:：cline把用户的请求和可用的mcp-server-chart工具信息一起交给模型deepseek来想办法
deepseek模型 -> Cline：deepseek模型看到请求和工具后，就想：这个任务可以用mcp-server-chart工具的generate_interactive_map功能，需要指定地点、景点和样式。于是它告诉Cline："你去调用generate_interactive_map工具，参数是广州、这些景点和旅游路线样式。"
Cline -> MCP Server : Cline就拿着这些参数去调用地图工具（mcp-server-chart）的generate_interactive_map函数。
MCP Server -> Cline: 地图工具mcp-server-chart接到命令后，就忙活起来，生成一个可交互的广州旅游路线地图，然后把生成的结果返回给Cline。
Cline -> deepseek模型: Cline拿到地图后，就把这个结果交给deepseek模型
deepseek模型 -> Cline：模型再组织一下语言，比如解释一下地图怎么用，再传给cline
Cline -> 用户: 然后Cline就把最终的回答和地图一起展示给用户。

总结

上述内容我们主要讲了4点，分别是：

MCP 协议的核心概念：让 AI 模型拥有使用外部工具的能力
完整的环境搭建：从 VSCode 插件安装到 API 配置
实战操作流程：配置 MCP Server 并生成交互式地图
技术原理理解：MCP Host、MCP Server 和 Tool 的关系