🔧 阿川の電商水電行
老闆問我：AI真能一鍵畫廣州旅遊路線圖？我用 MCP 現場開圖
老闆那天湊過來：“聽說AI能一鍵畫旅遊地圖？真的假的？”
我笑了：“來，給您現場演示一下。”
打開電腦，三下五除二配置好環境。在對話框裡輸入：“生成廣州旅遊路線地圖，要能互動的。”
3秒後，一個精美地圖躍然屏上——廣州塔、沙面、陳家祠等清晰標註。
老闆瞪大眼睛：“這就完了？太神奇了吧！”
“這就是MCP的魔力，讓AI從聊天工具變成生產力神器。”
他摸著下巴：“看來我們得抓緊用起來了。”
想知道怎麼實現？本文將從零開始，教你實現這個"魔法"
效果預覽：
MCP簡要介紹
MCP（模型上下文協議）就是能夠讓 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 (客戶端)
cline 是 VSCode 的一個插件，首先我們要下載 VSCode 編輯器，然後在插件商店搜索 cline 並安裝，安裝好之後側邊欄就會出現一個 cline 圖標，點一下就進入使用 cline 的地方。
配置 Cline 用的 API 金鑰
接著，我們需要配置 AI 模型，cline 支持接入不同模型的 API，如 Claude、GPT、DeepSeek 等模型，我們這裡演示使用 DeepSeek 模型進行演示。
DeepSeek 的官方網站就有提供 API，我們可以到 DeepSeek 官方網站註冊登錄，並充值獲取 API。
創建好金鑰後，將金鑰給 cline，填好後，cline 會引導我們來到聊天頁面，我們隨便問它一個問題，給它打個招呼，看它能不能夠正常回覆，能正常回覆就說明接入 DeepSeek 模型成功了。
概念解釋：MCP 伺服器 和工具
MCP 伺服器
MCP 伺服器即 MCP Server，跟我們傳統意義上的伺服器並沒有什麼太大的關係，它就是一個程序而已，只不過這個程序的執行是符合 MCP 協議的。
大部分的 MCP 伺服器都是本地通過 Node 或者是 Python 啟動的，只不過在使用的過程中可能會連網，當然它也可能不連網，純本地使用也是可以的。不管是連不連網，它都可以叫做 MCP Server，本質就是給 MCP 客戶端即 AI 模型提供服務的。
工具
所以 MCP Server 本質就是一個程序，就像手機上的應用，這些應用都內置了一些功能模塊，而工具就是 MCP Server 程序中的一些工具函數。
可以把 MCP Server 理解為一個計算器應用，這個計算器有計算和換算兩個功能，作為用戶可以根據自己需求選擇計算還是換算功能，而這兩個功能就是兩個工具。
比如我們要讓 DeepSeek 生成一個可互動的廣州旅遊路線地圖，DeepSeek 是沒辦法完成的，但是我們可以安裝一個處理生成圖表的 MCP Server，它內部包含一個函數 generate_path_map 即 工具，這個功能是傳入地點、圖的大小就可以返回路線地圖。
所以我們要一個廣州旅遊路線地圖的話，就得讓 cline 安裝 處理生成圖表的 MCP Server，然後 DeepSeek 把地點、圖的大小這些參數傳給 MCP Server 的 generate_path_map 就可以拿到一個可互動的廣州旅遊路線地圖了。
配置 MCP Server
前面解釋了 MCP Server 和工具的概念，我們再回到 cline 這裡繼續實操。
首先我們打開進入 cline，進入 MCP Server 設置頁面，點擊“已安裝”，再點擊“配置 MCP 伺服器”，之後 cline 就會跟我們打開一個 cline_mcp_settings.json 文件。如果我們想新增一個 MCP Server 的話，我們只需要在裡面填入對應的啟動命令就行了。
如下操作：
使用他人製作的 MCP Server
接下來我們來安裝一個別人寫好的 MCP Server，我們打開 mcpmarket.cn/，這是一個 MCP Server 的市場，就跟我們手機的應用市場有點像，這裡面有很多別人寫好的 MCP Server，我們去找生成圖表的 MCP，複製配置就可以生效了。
生成圖表的 MCP Server 工具鏈接: mcpmarket.cn/server/680e…
跟著以下的操作圖進行操作：
按照網站上的說明，將配置添加到 cline_mcp_settings.json 文件中。
Windows 用戶：
{
"mcpServers": {
"mcp-server-chart": {
"command": "cmd",
"args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
}
}
}Mac 用戶：
{
"mcpServers": {
"mcp-server-chart": {
"command": "npx",
"args": ["-y", "@antv/mcp-server-chart"]
}
}
}注意：電腦要裝 Node.js 環境
沒有的話要自行安裝哦：nodejs.org/en/download…
實戰演示
配置完成後，你就可以在 Cline 中輸入：
“生成一個廣州的旅遊路線地圖”
DeepSeek 會自動調用 MCP Server 的相關工具，為你生成一個精美的互動式地圖！
MCP 互動流程詳解
用戶 -> 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 模型擁有使用外部工具的能力
- 完整的環境搭建：從 cline 安裝到 MCP Server 的配置
- 實戰操作流程：配置 MCP Server 並生成互動式地圖
- 技術原理理解：MCP Host、MCP Server 和工具的關係
如果覺得對您有幫助，歡迎點讚 👍 收藏 ⭐ 關注 🔔 支持一下！
往期實戰推薦：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
