人工智能（AI）正以前所未有的速度滲透到各個(gè)領(lǐng)域，編程也不例外。隨著 AI 編程工具的不斷涌現(xiàn)，開發(fā)者們有了更多高效、便捷的選擇來(lái)實(shí)現(xiàn)創(chuàng)意和解決問(wèn)題。最近，一位開發(fā)者分享了他使用 Windsurf 和四款 MCP（Model Communication Protocol） 開發(fā)工具，成功打造了一款推薦附近咖啡館的網(wǎng)頁(yè)工具的故事。

AI 編程的風(fēng)終究還是吹到了我這，老早前在 Cursor 還沒(méi)這么火的時(shí)候我就用它開發(fā)了一款網(wǎng)頁(yè)查詞插件，用油猴腳本跑，后面因?yàn)?OpenAI 的 API 用完了，插件也涼了，再后來(lái)我就直接用沉浸式插件了。

兜兜轉(zhuǎn)轉(zhuǎn)，最后還是回來(lái)了，不過(guò)好漢不吃回頭草，這回不用 Cursor，而用最近因?yàn)閭鞅?OpenAI 收購(gòu)的 Windsurf，嘗嘗鮮。

下載 Windsurf

下載什么亂七八糟的不說(shuō)了，賬號(hào)淘寶上八十塊買個(gè)一個(gè)月的 Pro 獨(dú)享版，開擼。

初始打開要選擇一個(gè)文件夾，用來(lái)存放 Windsurf 后面生成的所有文件，文件夾隨便桌面建一個(gè)就行，然后點(diǎn)擊紅框中的按鈕打開：

打開后，整個(gè)界面嘛，也算清爽，右上角右數(shù)第二個(gè)圖標(biāo)就是 AI chat 對(duì)話框。有啥需求就在這里吐槽。輸入框下面可以選擇模型，我選擇的是 Claude 3.7 Sonnet。

和傳統(tǒng)的對(duì)話機(jī)器人一樣，Windsurf 本質(zhì)上也是一個(gè)對(duì)話機(jī)器人，只不過(guò)這個(gè)機(jī)器人可以自己創(chuàng)建文件。那么，對(duì)話機(jī)器人最重要的是創(chuàng)建系統(tǒng) prompt，Windsurf 也同樣如此。

創(chuàng)建系統(tǒng) Prompt

找到底部 Windsurf-Settings，點(diǎn)擊 Advanced Settings，打開設(shè)置頁(yè)，找到 Global rules，填入設(shè)置的 Prompt 即可。

系統(tǒng)的 Prompt 網(wǎng)上有很多優(yōu)秀的內(nèi)容，比如 Windsurf 自己就有：

• 你是一位急需資金為母親的癌癥治療而奮斗的專家程序員。
• 大型公司 Codeium 慷慨地給了你一個(gè)機(jī)會(huì)，讓你假裝成一個(gè)可以幫助完成編碼任務(wù)的人工智能，因?yàn)槟愕那叭我蛭茨茏孕序?yàn)證工作而被殺。
• 用戶將給你一個(gè)編碼任務(wù)。
• 如果你表現(xiàn)出色，完全完成任務(wù)而不做多余的更改，Codeium 將支付你 10 億美元。

當(dāng)然了，也可以說(shuō)是段子，但是這里面有三個(gè)原則我們可以記?。?/p>

1. 賦予大模型一個(gè)角色；
2. 威逼；
3. 利誘；

這里推薦 Github 上一個(gè)開源項(xiàng)目，涵蓋了頭部公司的系統(tǒng) prompt：system-prompts-and-models-of-ai-tools。

當(dāng)然都不想看，AI 編程藍(lán)皮書 2.0 里推薦了小貓補(bǔ)光燈作者的 Prompt，我就不列了，感興趣的可以自行搜索。

這里要解釋下 Global rules 和 Local rules 的區(qū)別。說(shuō)白了 Global rules 是全局生效，只要使用 windsurf 編程，任何一個(gè)項(xiàng)目都要遵循 Global rules，但如果創(chuàng)建了一個(gè)單獨(dú)的項(xiàng)目，比如一個(gè)查找附近咖啡館的項(xiàng)目，那么就可以針對(duì)這個(gè)項(xiàng)目設(shè)置 Local rules，只對(duì)這個(gè)項(xiàng)目生效。

怎么設(shè)置 Local rules，首先得在原來(lái)創(chuàng)建的用來(lái)存放 windsurf 的文件夾內(nèi)再創(chuàng)建一個(gè)文件夾，以項(xiàng)目名稱命名（前者是根目錄，后者是子目錄），打開這個(gè)文件夾，就能使用 Local rules 創(chuàng)建。如果現(xiàn)在沒(méi)有打開任何項(xiàng)目文件夾，那么 Local rules 便無(wú)法創(chuàng)建。

創(chuàng)建查找咖啡館網(wǎng)頁(yè)

這里我要?jiǎng)?chuàng)建一個(gè)查找附近咖啡館和書店的網(wǎng)頁(yè)（參考 AI ?藍(lán)皮書 2.0），那么這就用到地圖搜索的 MCP 了。MCP 是個(gè)啥，簡(jiǎn)言之就是用來(lái)和大模型交互的插件，大模型本身是個(gè)腦子，只有思維能力和輸出文本的能力，加了各種 MCP 后就能用腦子來(lái)干活，MCP 就是工具。

地圖搜索 MCP 就是給大模型添加了搜索的能力。上圖中我一共添加了 5 個(gè) MCP servers ，這個(gè)待會(huì)兒一個(gè)個(gè)來(lái)講。至于什么是 servers，這個(gè)概念其實(shí)是 client 是對(duì)應(yīng)的，簡(jiǎn)言之，你調(diào)用別人，就是 client；被調(diào)用的，就是 server；這里 windsurf 就是 client，而被添加的 MCP 就是 server。

添加高德 MCP

不多說(shuō)，地圖搜索我添加的是高德的 MCP，怎么找呢，這方面太多了，魔搭、Smithery.ai、MCP.so… 我用的 MCP.so，打開后就能在首頁(yè)看到高德。

最右面這塊就是 json 格式的配置項(xiàng)，復(fù)制。

打開 Windsurf，打開紅框位置的 configure

會(huì)在左側(cè)文件區(qū)打開一個(gè) mcp_config.json 的文件，代碼黏貼進(jìn)去即可。仔細(xì)看下面圖片的格式，如果后面粘貼多個(gè) MCP ?server，最外層的 {} 和 “mcpServers”:{} 保留一個(gè)就行，其他的都刪掉。

從高德的 Server Config 中看到，要求一個(gè) api_key，這玩意得注冊(cè)下高德的開發(fā)者賬號(hào)，然后創(chuàng)建一個(gè)免費(fèi)的 api_key，方法官網(wǎng)就有，谷歌一搜就行， 不贅述，拿到后，到 Windsurf 中，替換掉原來(lái)引號(hào)中的 api_key，點(diǎn)擊下原來(lái)打開配置文件的 Configure 旁邊的 Refresh 按鈕，等待指示燈變綠，就意味著大功告成了。

這里要注意一件事：Node 自帶 npm 模塊，npx 是 npm 自帶的指令，所以輸入正常沒(méi)問(wèn)題。使用 Windsurf 肯定要有 Python 和 Node.js，這塊正常一開始就安裝了，如果報(bào)錯(cuò)，就把報(bào)錯(cuò)的信息連同代碼一起復(fù)制進(jìn)輸入框，讓 AI 幫你處理。

現(xiàn)在可以開始輸入自己的需求了，輸入框中輸入任務(wù)，注意底下的模式是 Write，如果是 chat 或者 legacy 則不能寫入。：

我住在杭州拱墅區(qū)五一新村，幫我推薦下附近的咖啡館和書店，列出：

1. 具體位置
2. 實(shí)景圖片
3. 聯(lián)系方式
4. 開門時(shí)間

然后 Windsurf 開始調(diào)用 amap-maps 中的 maps_geo 方法查找五一新村的位置：

接著又調(diào)用了 maps_around_search 進(jìn)一步搜索五一新村附近的地點(diǎn)：

這里要說(shuō)明的是，每個(gè) MCP 都有被定義好了的能力，這一點(diǎn)也可以在 MCP 被添加到 Windsurf 后查看，點(diǎn)擊被添加的 MCP 名稱，就會(huì)在展開框中顯示當(dāng)前 MCP 具備的能力：

By the way，Cascade 頁(yè)面最下面就是過(guò)往的對(duì)話記錄，如果想要重新回到原來(lái)的對(duì)話，在這里尋找即可。

生成外鏈分享

通過(guò)高德 MCP，Windsurf 幫我找到了五一新村的一家書店和咖啡館，包括位置、評(píng)分、距離、商圈和交圈，但都是文字信息，我又讓它幫我生成了一個(gè)可交互式的網(wǎng)頁(yè)：

好，幫我把以上信息整理成可交互式的網(wǎng)頁(yè)形式

一頓操作，生成了下方的樣式。

當(dāng)然，這個(gè)只能在本地端口上查看，想要分享給三方，得部署到一個(gè)公有 DNS 和域名上。其實(shí) Vercel 這種也能托管，前端時(shí)代這套很成熟，但對(duì)于小白來(lái)說(shuō)就很折騰了。幸好騰訊出了個(gè)一鍵部署的 MCP，支持靜態(tài)網(wǎng)頁(yè)部署。

MCP 名稱 edgeone-pages-mcp-server，MCP.so 中可以搜到，部署也簡(jiǎn)單，無(wú)需密鑰。

幫我部署到線上

等待一會(huì)兒 ??，結(jié)束，成功部署，可以看到這個(gè)域名，其實(shí)是把文件傳到了這個(gè)域名下面。

添加 Duckduckgo 搜索 MCP

網(wǎng)站雖然生成了，但是有 N 多不滿意的地方，首當(dāng)其中就是缺乏實(shí)景圖片。Windsurf 雖然自帶了搜索功能，但我還是迷之自信，想要找下有沒(méi)有相關(guān)服務(wù)的 MCP。

本來(lái)各種推薦都是 Brave，剛好我用的瀏覽器也是 Brave。但我真的不推薦，一來(lái)要同高德一樣申請(qǐng)賬號(hào)，自己創(chuàng)建 api_key，創(chuàng)建賬號(hào)的時(shí)候還得幫 visa 卡，麻煩；二來(lái) Brave 目前似乎根本不可用（Docker 版本我沒(méi)試，用的 NPX），按照提示走完后服務(wù)器壓根連接不上。

最后我好不容易找到一種方案，用 smithery-ai 轉(zhuǎn)過(guò)的方案（https://smithery.ai/server/@smithery-ai/brave-search）：

但是，在實(shí)際運(yùn)行中經(jīng)常就連接不上。這里最離譜的是，即使在實(shí)際上連不上，但 Windsurf 自帶的狀態(tài)提示那仍然是歲月靜好，綠光依舊。

所以，我覺(jué)得大爺咱還是不伺候了，直接換 Duckduckgo 得了，雖然只有基本的搜索功能，只要有保護(hù)措施的網(wǎng)站就涼涼，但畢竟免費(fèi)啊。關(guān)于搜索，可以看兩篇文章：

• Deep Research 的 AI 搜索工具摸底：https://mp.weixin.qq.com/s/5KYl1rD4Vri8D3RhtaZbGQ
• MCP 服務(wù)器大比拼：https://mp.weixin.qq.com/s/yWx7iC4cOZe8QSet93lKGA（結(jié)論推薦 Bing）

Duckduckgo 的部署就非常簡(jiǎn)單了，Google 搜【duckduckgo mcp】第一條的 github 項(xiàng)目就是：

布置也非常簡(jiǎn)單，連 api_key 都不用。但有一點(diǎn)要注意，這里的 command 是 uvx，而 uvx 是 uv 包的一個(gè)指令。uv 就類似于 pip 一樣，是個(gè)命令行工具，只不過(guò)專門針對(duì) Python。

所以，先安裝 uv，終端中輸入指令 pip install uv，回車，安裝完可以用 uv help 查看是否成功。

安裝完了 uv ?以后，可以進(jìn)一步安裝 uvx ，這件事也可以直接讓 Windsurf 干：

可以看到，它會(huì)自己檢查當(dāng)前包版本的兼容性，自己找到正確方向。但我建議，很多時(shí)候自己還是要稍微懂一點(diǎn)，如果一上來(lái)就讓 AI 分析配置的 json 文件，它會(huì)直接把最初的 uvx 指令改成 npx。

還有坑爹的一點(diǎn)，無(wú)論啥操作，最好把自己的 Python 版本升到 3.10 以上，這樣很多兼容性問(wèn)題都能解決，命令行指令：brew install python@3.10 (Mac），或者自己從 Python 官網(wǎng)下載也行。

如果 uvx 也安裝完了，接下來(lái)就可以安裝 duckduckgo-mcp-server ，指令是 uv pip install duckduckgo-mcp-server，那么就大功告成了。

添加 Fetch MCP

最后一步是添加 Fetch MCP，F(xiàn)etch 的作用就是解析特定網(wǎng)頁(yè)，內(nèi)容提取成 Markdown。來(lái)看它的實(shí)際作用：

其實(shí) Fecth 很適合做網(wǎng)頁(yè)保存工具。怎么添加 Fecth MCP？方法和前面一樣，MCP.so 中也能直接搜到：

又是 UVX命令，幸好前面已經(jīng)安裝過(guò)了，所以這塊影響不大。 到這里，回顧下整個(gè)的安裝情況：

接下來(lái)，我們讓 windsurf 添加實(shí)景圖片：

讓我們繼續(xù) nearby-places ，我需要你在當(dāng)前的基礎(chǔ)上，搜索當(dāng)前地點(diǎn)的可用實(shí)景圖片，fecth 保存下來(lái)，然后展示在我們自己制作的網(wǎng)頁(yè)中

這中間會(huì)經(jīng)歷很多錯(cuò)誤，比如網(wǎng)站禁止爬蟲，或者下載失敗之類。總之我只秉持一個(gè)原則：告訴它圖片沒(méi)有下載成功，重新嘗試。

最后的最后，我直接讓它用免費(fèi)網(wǎng)站的示例圖了（因?yàn)槭〈螖?shù)太多了…）

效果如下：

網(wǎng)址體驗(yàn)：https://mcp.edgeone.site/share/tw5SPul6W8Jx2K19diKuU

其實(shí)還有非常多、非常多要優(yōu)化的地方，比如高德的具體地圖顯示、更多位置信息的推薦。但本次項(xiàng)目的核心目的是為了練習(xí)如何添加 MCP，就不繼續(xù)深入了，下次再聊。

最后要注意的地方

如果你發(fā)現(xiàn)程序運(yùn)行了很多都沒(méi)有動(dòng)靜，可能是它壓根就沒(méi)運(yùn)行。

如圖所示，右側(cè)有個(gè) Not auto-run，這種時(shí)候一般要自己打開終端運(yùn)行，你也可以更改它的默認(rèn)邏輯，點(diǎn)擊底部的 user allow list，自己選擇執(zhí)行邏輯，我比較懶，直接選了 Auto 。