使用 Windsurf 与四款 MCP 打造的智能推荐咖啡馆网页工具上线啦！

人工智能（AI）正在以惊人的速度进入各个行业，编程领域也不例外。随着越来越多的 AI 编程工具问世，开发者们可以更加高效、便捷地实现他们的想法和解决各种问题。最近，有位开发者分享了他使用 Windsurf 和四款 MCP（Model Communication Protocol）开发工具，成功制作一个推荐附近咖啡馆的网页工具的经历。

说实话，AI 编程的潮流终于来到了我这儿。其实早在 Cursor 还没火的时候，我就已经用它开发了一个网页查词插件，结果因为 OpenAI 的 API 用完了，这个插件也就没戏了。后来，我直接转向了沉浸式插件的使用。

经历了一番折腾，我最终还是选择了回来。不过这次我不打算用 Cursor，而是尝试最近被传收购的 Windsurf，想看看新鲜玩意儿是什么样的。

下载 Windsurf

关于下载的麻烦事就不多说了，账号在淘宝上八十块就能买到一个月的 Pro 独享版，赶紧开始吧。

打开软件时，需要选择一个文件夹来存放 Windsurf 生成的所有文件，随便在桌面建一个就行，然后点击红框中的按钮打开：

一打开，整个界面也算挺简洁的，右上角的第二个图标就是 AI chat 的对话框。有什么需求可以直接在这里留言。输入框下方可以选择模型，我这次选择的是 Claude 3.7 Sonnet。

Windsurf 和传统的对话机器人其实是类似的，只不过这个机器人可以自己创建文件。说到对话机器人，最重要的就是创建系统 prompt，Windsurf 也是这样。

创建系统 Prompt

往下滑到底部找到 Windsurf-Settings，点击 Advanced Settings，打开设置页面，找到 Global rules，然后把你设置的 Prompt 填进去就行了。

轻松创建查找咖啡馆的网页

今天我想跟大家聊聊如何制作一个查找附近咖啡馆和书店的网页，参考的资料是《AI 蓝皮书 2.0》。在这个过程中，我们会用到地图搜索的 MCP 插件。你可能会问，MCP 是啥？简单来说，它就是一个能让大模型更聪明的工具，原本大模型只能处理文本，但加上 MCP 后，它就能做更多事情了。

这次我在项目中添加了五个 MCP 服务器，稍后会一个个给你介绍。说到服务器，你可能会疑惑这个概念。其实很简单，客户端和服务器就像一对好搭档：客户端是请求服务的那一方，而服务器是提供服务的那一方。这里的 windsurf 就是我们的客户端，而我们添加的 MCP 则是服务器。

接下来，我选择了高德的 MCP 来进行地图搜索。关于如何找到这个 MCP，网上资料可多了，比如魔搭、Smithery.ai、MCP.so 等等。我这次用的是 MCP.so，打开网站后，你会在首页轻松找到高德的选项。

在页面的右侧，你会看到 JSON 格式的配置选项，只需复制它，接下来的步骤就能顺利进行啦！

说到这里，你可能会想，创建一个网页其实并没有那么复杂，只要你掌握了基本的插件和工具，操作起来就能得心应手。如果你也想尝试制作网页，利用 wordpress 采集插件可帮助你轻松完成内容的整理和展示哦！

标题：轻松设置Windsurf，找到理想的咖啡馆和书店！

首先，打开Windsurf，然后点击红框中的“configure”选项。

这样一来，左侧会打开一个名为mcp_config.json的文件，你只需把代码粘贴进去。记得查看下方的图片格式，如果你要添加多个MCP服务器，最外层的{}和“mcpServers”:{}只保留一个，其他的可以删掉。

接下来，从高德的服务器配置中，你会注意到需要一个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之后，点击它的名称就能看到它所具备的能力，挺方便的吧？

顺便说一下，Cascade页面底部还有历史对话记录。如果你想回到之前的聊天内容，可以在那儿找到哦。

通过高德的MCP，Windsurf不仅帮我找到五一新村附近的一家书店和咖啡馆，还提供了它们的位置、评分、距离以及商圈和交圈的信息。不过这些都是文字，我又让它帮我制作了一个可交互式的网页，感觉特别棒！

这样一来，我就能轻松分享这些信息了！

轻松在线部署你的网页，别怕，跟我来！

当然啦，刚开始你只能在本地端口上查看这些内容，要想分享给大家，就得把它部署到公有的 DNS 和域名上。其实像 Vercel 这种平台也能搞定，前端开发的这套方法已经很成熟。不过，对于刚入门的小白来说，这个过程可能有点麻烦。不过别担心，腾讯最近推出了一个一键部署的 MCP，支持静态网页的部署，真是救星啊！

这款 MCP 叫做 edgeone-pages-mcp-server，你可以在 MCP.so 上找到它，部署起来也很简单，完全不需要密钥。

接下来，只需点击按钮将它部署到线上，稍等片刻，就大功告成啦！成功后，你会发现文件已经被传到指定的域名下，真是太棒了！

添加 Duckduckgo 搜索 MCP

虽然网站已经生成了，但我还是觉得有些地方需要改进，尤其是缺少实景图片这一块。虽然 Windsurf 自带搜索功能，但我还是想找找看有没有更好的 MCP 服务。

本来大家都推荐 Brave，但我使用的浏览器正好也是 Brave。不过，我真的不太推荐这个选择。一方面，它要求和高德一样先申请账号、创建 api_key，注册的时候还得输入信用卡信息，实在是太麻烦了；另一方面，Brave 目前似乎完全不能用（我没尝试 Docker 版本，而是用的 NPX），按照指示操作后根本无法连接上服务器。

最后我终于找到了一种方式，通过 smithery-ai 转过来的方案（
https://smithery.ai/server/@smithery-ai/brave-search）：

标题：轻松搞定 Duckduckgo 搜索，步骤简单明了！

不过呢，实际使用中经常会遇到连接不上服务器的情况，真是让人无奈。更离谱的是，即使无法连接，Windsurf 的状态指示依然是一片祥和，绿灯亮得不行。

所以我想，还是算了，直接换成 Duckduckgo 吧！虽然它的搜索功能比较基础，只能对一些有保护的网站有效，但免费嘛，总能接受的。关于搜索工具，推荐你看看这两篇文章：

• Deep Research 的 AI 搜索工具摸底：https://mp.weixin.qq.com/s/5KYl1rD4Vri8D3RhtaZbGQ
• MCP 服务器大比拼：https://mp.weixin.qq.com/s/yWx7iC4cOZe8QSet93lKGA（最后推荐用 Bing）

其实 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 以上，这能解决很多兼容性问题。你可以在 Mac 上输入命令：brew install python@3.10，或者直接去 Python 官网下载最新版本。

如果 uvx 也安装成功了，接下来就可以安装 duckduckgo-mcp-server，指令是 uv pip install duckduckgo-mcp-server，搞定了就可以开始使用了。

添加 Fetch MCP

最后一步是添加 Fetch MCP，Fetch 的功能是解析特定网页，把内容提取成 Markdown 格式。接下来，让我们看看它的实际作用：

轻松搞定网页保存的秘密

其实呢，Fetch 这个工具真的是个很不错的网页保存助手。想知道怎么把 Fetch MCP 加入吗？其实方法和之前一样，只需要在 MCP.so 上直接搜索就能找到。

又是 UVX 命令，这里好在之前已经安装过了，所以这部分影响不大。接下来，我们来回顾一下整个安装的情况。

接下来，我们要让 windsurf 加入实景图片。

接着我们来聊聊 nearby-places，我希望你能在现在的基础上，搜索一下当前所在地的实景图片，用 Fetch 保存下来，然后展示在我们自己做的网页上。

在这个过程中，可能会遇到不少问题，比如某些网站不允许爬虫访问，或者下载失败等等。但我始终坚持一个原则：如果图片没有成功下载，就让它重新尝试。

最后最后，由于失败次数实在太多了，我直接选择了用免费网站上的示例图（哈哈）。

效果如下：

可以体验一下这个网址：
https://mcp.edgeone.site/share/tw5SPul6W8Jx2K19diKuU

其实还有很多地方需要优化，比如高德地图的具体显示、更多位置信息的推荐等。不过这次项目的主要目的是练习如何添加 MCP，所以下次再深入聊聊吧。

小贴士：注意事项

如果你发现程序运行了很久却没有任何反应，可能是它根本没有在运行哦。

标题：轻松解决 Not auto-run 的问题，快来看看吧！

如图所示，右边有个 Not auto-run 的选项，这种情况下你可能需要自己手动打开终端来运行程序。当然，你也可以调整它的默认设置，点击底部的 user allow list，根据自己的需求来选择执行逻辑。我个人比较懒，直接选择了 Auto，省心又方便。

本文由人人都是产品经理的作者【善宝橘】提供，微信公众号是：【善宝橘】。原创内容，未经授权请勿转载。

封面图来自 Unsplash，遵循 CC0 协议。