AI Agents + MCP 自动化网站内容:工作流自动化实战
分享如何结合 AI Agents 和 MCP 协议全自动化网站内容维护,是降低重复劳动的实战案例。
完整中文译文
最近我一直在尝试许多工具来帮助自动化一些简单任务,这样就能让我的网站保持最新状态。因为我创作大量内容——从视频到博客文章,还经常参加播客作为嘉宾——我希望这些都能反映在我的网站上。把所有信息集中在一个地方很有好处,方便与他人分享,也便于回顾。但是手动做这些事既繁琐又费时,而我的时间本来就很紧张。这正是 AI 接手这项任务的完美用例。那么,我该从何开始呢?
首先,让我说说在我的网站上添加新播客节目是什么样的。我使用 Nuxt content,基本上每个播客就是一个包含 YAML 的 markdown 文件。这个 YAML 包含日期、播客名称、图像 URL 和主持人等信息。去年,我的做法是找一个旧播客节目,在 VSCode 中点击复制,然后用新播客的信息重新命名一切。基本上就是手动点击新节目的链接,从托管网站复制粘贴信息到我的 markdown 文件。然后我必须下载图像,上传到 Cloudinary,从那里获取图像名称并粘贴到文件中。Cloudinary 很适合管理图像和保持网站性能,但上传下载图像的额外工作很繁琐,这意味着有时我根本不想费事,所以添加新节目到网站上会花很长时间。
使用 Prompts 和 Playwright MCP 自动化
我开始通过在 VSCode 中使用可重用的 prompts 来自动化部分流程。我为 Copilot 创建了说明,告诉它需要做什么,然后我只需要按下按钮在新聊天中运行 prompt,然后给它播客的 URL。我安装了 Playwright MCP,所以 Copilot 会用它导航到播客托管的 URL 并找到完成元数据所需的相关信息。效果相当不错,节省了很多时间,我甚至可以通过给它多个 URL 来批量更新新节目。
不过图像仍然是个问题,我曾经很想干脆停用 Cloudinary,因为使用网站公共文件夹中存储的图像更快更容易。但这样的话,我就会失去 Cloudinary 的好处和它的图像优化功能。
使用 Goose、Playwright MCP、Cloudinary MCP 和 GitHub MCP 自动化
后来,我开始尝试来自 Block 的编码 Agent Goose。Goose 是一个桌面应用程序,不过也有 CLI 版本可用。我决定试一试,看是否能改进我的自动化流程。我可能会继续在 VSCode 中折腾并实现类似的效果,但最近我一直在尝试在不使用编辑器的情况下编码,或者说,在不使用编辑器的情况下完成任务。我的意思是,之后在 CI 上review pull request,让 Agent 去做它的事情,因为我真的相信这是我们的发展方向,所以我想继续试验用这种方式编码感觉如何。
所以我把我的 prompt 复制到 Goose 中并将其保存为 recipe。Recipes 看起来很像 prompts,但你可以使用参数,所以我可以把播客 URL 作为参数添加,它会自动识别。还有很多其他选项我还没有充分了解,但这对我的用例来说已经足够了。现在我有了 Playwright MCP 导航到网站并获取播客页面所需的所有信息。然后我只需要让 Goose 为我下载图像并在本地添加它,它就这么做了。这很好,但我真的想仅仅因为懒惰就停止使用 Cloudinary 吗?
所以我想,如果 Cloudinary 有一个 MCP 呢?那么 Goose 就可以使用那个 MCP 服务器来上传图像,然后用正确的图像 ID 更新图像元数据。如果它能做到这一点,那么我的所有问题都会解决。所以我查看了 Goose 的扩展,搜索了 Cloudinary,你猜怎么着?竟然有一个 Cloudinary 的 MCP 服务器。不仅如此,它实际上能用。Goose 使用 Playwright MCP 导航到网站并获取所需的所有内容(包括图像),然后 Cloudinary MCP 被用来将图像添加到我的 Cloudinary 账户,使用存储在扩展设置中的我的 API 密钥。它甚至在我没有要求的情况下就知道应该保存到哪个文件夹。
就这样。一切都运行得很顺利。我检查了我的 Cloudinary 账户,图像都在那里。然后我让 Goose 运行开发服务器,并使用 Playwright MCP 通过导航到播客页面来验证它的工作,确保一切看起来都应该是这样。我不仅可以看到浏览器被打开以及新的播客节目和图像,我还可以要求一张页面的屏幕截图。
然后当然还有最后一件事。我们已经进行到这一步了,干脆把整件事都完成吧。然后我让 Goose 创建一个 pull request,它使用了我之前配置的 GitHub MCP。然后我审查了代码,以防万一有什么看起来不对的地方,特别是关于 Cloudinary URL 的部分,尽管我已经进行了视觉审查,如你可以想象的那样,一切都没问题。我合并了它,新播客节目被添加到了我的网站上。
所以就是这样。我花了时间来弄清楚所有这些、设置这个流程并确保一切都运行良好。是的,如果我自己复制粘贴会更快。但现在一切都设置好了,下次我想添加播客节目时,我只需要在 Goose 中运行我的 recipe 并传入播客 URL。我今晚参加一个播客,当它发布时,我将能够轻松地将其添加到网站上。实际上,如果我的网站上有一支团队,我甚至可以与他们分享这个 recipe,他们可以简单地运行它。
我使用 Nuxt content 为我的网站做支撑,这意味着我没有 CMS。我的内容存在 markdown 文件中,这对开发人员来说非常容易添加内容,但对非开发人员来说可能不太容易。但现在,即使我的母亲也可以向我的网站添加新播客节目。这太棒了。这只是我的个人网站,但想想这个用例对许多其他企业的可能性。
我对 Goose 能做的事情印象深刻。我用它的次数越多,它就越让我感到惊讶。我现在将继续为我添加的其余内容添加其他 recipes,或者也许只是用参数修改这个 recipe,这样我就可以有一个 recipe。我将继续尝试。这很有趣。
如果你觉得这很有趣,或者正在做类似的事情,或者使用过上面提到的任何 MCPs,请告诉我。我们生活在令人兴奋的时代,如果你还没有开始尝试,那么你还在等什么呢?就去尝试,尽情玩乐吧。
一些评论可能仅对已登录的访客可见。登录以查看所有评论。
对于进一步的行动,你可以考虑屏蔽这个人和/或举报滥用。