人工智能（AI）正以前所未有的速度渗透到各个领域，编程也不例外。随着 AI 编程工具的不断涌现，开发者们有了更多高效、便捷的选择来实现创意和解决问题。最近，一位开发者分享了他使用 Windsurf 和四款 MCP（Model Communication Protocol） 开发工具，成功打造了一款推荐附近咖啡馆的网页工具的故事。
AI 编程的风终究还是吹到了我这，老早前在 Cursor 还没这么火的时候我就用它开发了一款网页查词插件，用油猴脚本跑，后面因为 OpenAI 的 API 用完了，插件也凉了，再后来我就直接用沉浸式插件了。
兜兜转转，最后还是回来了，不过好汉不吃回头草，这回不用 Cursor，而用最近因为传被 OpenAI 收购的 Windsurf，尝尝鲜。
下载什么乱七八糟的不说了，账号淘宝上八十块买个一个月的 Pro 独享版，开撸。
初始打开要选择一个文件夹，用来存放 Windsurf 后面生成的所有文件，文件夹随便桌面建一个就行，然后点击红框中的按钮打开：
打开后，整个界面嘛，也算清爽，右上角右数第二个图标就是 AI chat 对话框。有啥需求就在这里吐槽。输入框下面可以选择模型，我选择的是 Claude 3.7 Sonnet。
和传统的对话机器人一样，Windsurf 本质上也是一个对话机器人，只不过这个机器人可以自己创建文件。那么，对话机器人最重要的是创建系统 prompt，Windsurf 也同样如此。
找到底部 Windsurf-Settings，点击 Advanced Settings，打开设置页，找到 Global rules，填入设置的 Prompt 即可。
系统的 Prompt 网上有很多优秀的内容，比如 Windsurf 自己就有：
当然了，也可以说是段子，但是这里面有三个原则我们可以记住：
这里推荐 Github 上一个开源项目，涵盖了头部公司的系统 prompt：system-prompts-and-models-of-ai-tools。
当然都不想看，AI 编程蓝皮书 2.0 里推荐了小猫补光灯作者的 Prompt，我就不列了，感兴趣的可以自行搜索。
这里要解释下 Global rules 和 Local rules 的区别。说白了 Global rules 是全局生效，只要使用 windsurf 编程，任何一个项目都要遵循 Global rules，但如果创建了一个单独的项目，比如一个查找附近咖啡馆的项目，那么就可以针对这个项目设置 Local rules，只对这个项目生效。
怎么设置 Local rules，首先得在原来创建的用来存放 windsurf 的文件夹内再创建一个文件夹，以项目名称命名（前者是根目录，后者是子目录），打开这个文件夹，就能使用 Local rules 创建。如果现在没有打开任何项目文件夹，那么 Local rules 便无法创建。
这里我要创建一个查找附近咖啡馆和书店的网页（参考 AI 蓝皮书 2.0），那么这就用到地图搜索的 MCP 了。MCP 是个啥，简言之就是用来和大模型交互的插件，大模型本身是个脑子，只有思维能力和输出文本的能力，加了各种 MCP 后就能用脑子来干活，MCP 就是工具。
地图搜索 MCP 就是给大模型添加了搜索的能力。上图中我一共添加了 5 个 MCP servers ，这个待会儿一个个来讲。至于什么是 servers，这个概念其实是 client 是对应的，简言之，你调用别人，就是 client；被调用的，就是 server；这里 windsurf 就是 client，而被添加的 MCP 就是 server。
不多说，地图搜索我添加的是高德的 MCP，怎么找呢，这方面太多了，魔搭、Smithery.ai、MCP.so… 我用的 MCP.so，打开后就能在首页看到高德。
最右面这块就是 json 格式的配置项，复制。
打开 Windsurf，打开红框位置的 configure
会在左侧文件区打开一个 mcp_config.json 的文件，代码黏贴进去即可。仔细看下面图片的格式，如果后面粘贴多个 MCP server，最外层的 {} 和 “mcpServers”:{} 保留一个就行，其他的都删掉。
从高德的 Server Config 中看到，要求一个 api_key，这玩意得注册下高德的开发者账号，然后创建一个免费的 api_key，方法官网就有，谷歌一搜就行， 不赘述，拿到后，到 Windsurf 中，替换掉原来引号中的 api_key，点击下原来打开配置文件的 Configure 旁边的 Refresh 按钮，等待指示灯变绿，就意味着大功告成了。
这里要注意一件事：Node 自带 npm 模块，npx 是 npm 自带的指令，所以输入正常没问题。使用 Windsurf 肯定要有 Python 和 Node.js，这块正常一开始就安装了，如果报错，就把报错的信息连同代码一起复制进输入框，让 AI 帮你处理。
现在可以开始输入自己的需求了，输入框中输入任务，注意底下的模式是 Write，如果是 chat 或者 legacy 则不能写入。：
我住在杭州拱墅区五一新村，帮我推荐下附近的咖啡馆和书店，列出：
然后 Windsurf 开始调用 amap-maps 中的 maps_geo 方法查找五一新村的位置：
接着又调用了 maps_around_search 进一步搜索五一新村附近的地点：
这里要说明的是，每个 MCP 都有被定义好了的能力，这一点也可以在 MCP 被添加到 Windsurf 后查看，点击被添加的 MCP 名称，就会在展开框中显示当前 MCP 具备的能力：
By the way，Cascade 页面最下面就是过往的对话记录，如果想要重新回到原来的对话，在这里寻找即可。
通过高德 MCP，Windsurf 帮我找到了五一新村的一家书店和咖啡馆，包括位置、评分、距离、商圈和交圈，但都是文字信息，我又让它帮我生成了一个可交互式的网页：
好，帮我把以上信息整理成可交互式的网页形式
一顿操作，生成了下方的样式。
当然，这个只能在本地端口上查看，想要分享给三方，得部署到一个公有 DNS 和域名上。其实 Vercel 这种也能托管，前端时代这套很成熟，但对于小白来说就很折腾了。幸好腾讯出了个一键部署的 MCP，支持静态网页部署。
MCP 名称 edgeone-pages-mcp-server，MCP.so 中可以搜到，部署也简单，无需密钥。
帮我部署到线上
等待一会儿 ⌛️，结束，成功部署，可以看到这个域名，其实是把文件传到了这个域名下面。
网站虽然生成了，但是有 N 多不满意的地方，首当其中就是缺乏实景图片。Windsurf 虽然自带了搜索功能，但我还是迷之自信，想要找下有没有相关服务的 MCP。
本来各种推荐都是 Brave，刚好我用的浏览器也是 Brave。但我真的不推荐，一来要同高德一样申请账号，自己创建 api_key，创建账号的时候还得帮 visa 卡，麻烦；二来 Brave 目前似乎根本不可用（Docker 版本我没试，用的 NPX），按照提示走完后服务器压根连接不上。
最后我好不容易找到一种方案，用 smithery-ai 转过的方案（https://smithery.ai/server/@smithery-ai/brave-search）：
但是，在实际运行中经常就连接不上。这里最离谱的是，即使在实际上连不上，但 Windsurf 自带的状态提示那仍然是岁月静好，绿光依旧。
所以，我觉得大爷咱还是不伺候了，直接换 Duckduckgo 得了，虽然只有基本的搜索功能，只要有保护措施的网站就凉凉，但毕竟免费啊。关于搜索，可以看两篇文章：
Duckduckgo 的部署就非常简单了，Google 搜【duckduckgo mcp】第一条的 github 项目就是：
布置也非常简单，连 api_key 都不用。但有一点要注意，这里的 command 是 uvx，而 uvx 是 uv 包的一个指令。uv 就类似于 pip 一样，是个命令行工具，只不过专门针对 Python。
所以，先安装 uv，终端中输入指令 pip install uv，回车，安装完可以用 uv help 查看是否成功。
安装完了 uv 以后，可以进一步安装 uvx ，这件事也可以直接让 Windsurf 干：
可以看到，它会自己检查当前包版本的兼容性，自己找到正确方向。但我建议，很多时候自己还是要稍微懂一点，如果一上来就让 AI 分析配置的 json 文件，它会直接把最初的 uvx 指令改成 npx。
还有坑爹的一点，无论啥操作，最好把自己的 Python 版本升到 3.10 以上，这样很多兼容性问题都能解决，命令行指令：brew install python@3.10 (Mac），或者自己从 Python 官网下载也行。
如果 uvx 也安装完了，接下来就可以安装 duckduckgo-mcp-server ，指令是 uv pip install duckduckgo-mcp-server，那么就大功告成了。
最后一步是添加 Fetch MCP，Fetch 的作用就是解析特定网页，内容提取成 Markdown。来看它的实际作用：
其实 Fecth 很适合做网页保存工具。怎么添加 Fecth MCP？方法和前面一样，MCP.so 中也能直接搜到：
又是 UVX命令，幸好前面已经安装过了，所以这块影响不大。 到这里，回顾下整个的安装情况：
接下来，我们让 windsurf 添加实景图片：
让我们继续 nearby-places ，我需要你在当前的基础上，搜索当前地点的可用实景图片，fecth 保存下来，然后展示在我们自己制作的网页中
这中间会经历很多错误，比如网站禁止爬虫，或者下载失败之类。总之我只秉持一个原则：告诉它图片没有下载成功，重新尝试。
最后的最后，我直接让它用免费网站的示例图了（因为失败次数太多了…）
效果如下：
网址体验：https://mcp.edgeone.site/share/tw5SPul6W8Jx2K19diKuU
其实还有非常多、非常多要优化的地方，比如高德的具体地图显示、更多位置信息的推荐。但本次项目的核心目的是为了练习如何添加 MCP，就不继续深入了，下次再聊。
如果你发现程序运行了很多都没有动静，可能是它压根就没运行。
如图所示，右侧有个 Not auto-run，这种时候一般要自己打开终端运行，你也可以更改它的默认逻辑，点击底部的 user allow list，自己选择执行逻辑，我比较懒，直接选了 Auto 。
本文由人人都是产品经理作者【善宝橘】，微信公众号：【善宝橘】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。