我如何使用 AI 代理 + MCP 實現網站內容的完全自動化

最近我一直在嘗試各種工具來自動化一些簡單的任務，以便保持網站內容更新。我創作了很多內容，包括影片、部落格文章，也經常作為嘉賓參與播客節目，我希望這些內容都能反映在我的網站上。把所有資訊集中在一個地方，方便與他人分享，也方便日後回顧。但這很繁瑣，也很耗時，而我的時間非常寶貴。所以，這正是人工智慧可以勝任這項工作的絕佳機會。那麼，我該從何入手呢？

人工智慧出現之前

首先，讓我說說在我的網站上新增播客節目是什麼感覺。我用的是 Nuxt 內容管理插件，所以基本上每個播客節目都是一個包含一些 YAML 程式碼的 Markdown 檔案。這些 YAML 程式碼包含日期、播客名稱、圖片 URL 和主機資訊等等。去年，我的做法是直接找到一個舊的播客節目，然後在 VSCode 裡點擊“複製”，再把所有內容重命名為新的播客資訊。也就是說，我需要手動點擊新節目的連結，然後從節目所在的網站複製貼上資訊到我的 Markdown 文件中。之後，我還要下載圖片並上傳到 Cloudinary，從那裡取得圖片名稱，再貼到我的 Markdown 檔案中。 Cloudinary 在管理圖片和保持網站效能方面確實很棒，但是下載和上傳圖片的額外工作非常繁瑣，導致我有時加入新節目到網站要花很長時間，因為我實在懶得去做。

使用提示和劇作家 MCP 實現自動化

我開始利用 VSCode 中的可重複使用提示符號來自動化一些流程。我為 Copilot 建立了指令，告訴它需要做什麼，然後我只需要點擊播放按鈕，在新聊天視窗中執行提示符，然後再輸入播客的 URL 即可。我安裝了 Playwright MCP，這樣 Copilot 就能使用它來導航到播客的 URL，並找到完成元資料所需的相關資訊。這非常方便，節省了很多時間，我什至可以透過提供多個 URL 來大量更新新劇集。

然而，圖片問題依然存在，我甚至一度想放棄使用 Cloudinary，因為直接使用網站公共資料夾中儲存的圖片更快捷方便。但那樣一來，我就無法享受到 Cloudinary 及其圖片優化功能的好處了。

使用 Goose、Playwright MCP、Cloudinary MCP 和 GitHub MCP 進行自動化

然後我開始試用Block公司的程式設計代理Goose。 Goose是一個桌面應用程式，不過它也提供命令列介面（CLI）。我決定試一試，看看能否改善我自動化這個流程的方式。我或許可以繼續在VSCode裡摸索，也能達到類似的效果，但最近我一直在嘗試不用編輯器來寫程式碼，或者更準確地說，是完成任務。也就是說，只需稍後在持續整合（CI）平台上查看拉取請求，然後讓代理自動完成剩下的工作。因為我真的相信這是我們未來的發展方向，所以我想繼續嘗試這種編碼方式。

所以我把提示複製到 Goose 裡，儲存為一個配方。配方和提示很像，但它可以使用參數，所以我可以把播客網址加為參數，這樣它就能自動辨識。還有很多其他選項，我還來不及仔細研究，但這些對我來說已經足夠了。現在，Playwright MCP 可以導航到網站，以獲取播客頁面所需的所有資訊。然後，我讓 Goose 下載圖片並加入到本地，它也照做了。這很棒，但我真的要因為懶就放棄使用 Cloudinary 嗎？

於是我想，如果 Cloudinary 有 MCP（多客戶端協定），Goose 就可以直接用這個 MCP 伺服器上傳圖片，然後用正確的圖片 ID 更新圖片元資料。如果真能這樣，我的所有問題都解決了。所以我查看了 Goose 的擴充程序，搜尋了 Cloudinary，你猜怎麼著？居然真的有 Cloudinary 的 MCP 伺服器！不僅如此，它還真的管用。 Goose 使用 Playwright MCP 造訪 Cloudinary 網站，取得了所有需要的內容，包括圖片，然後透過 Cloudinary MCP，利用我儲存在擴充功能設定中的 API 金鑰，將圖片新增至我的 Cloudinary 帳戶。它甚至不用我指定，就自動找到了保存位置。

鵝的雲狀 mcp

就這樣，一切都運作正常。我查看了我的 Cloudinary 帳戶，圖片都在那裡。然後我讓 Goose 執行開發伺服器，並透過 Playwright MCP 導航到播客頁面來驗證其執行情況，確保一切正常。我不僅可以看到瀏覽器打開並看到帶有圖片的新播客節目，還可以要求 Goose 截取頁面螢幕截圖。

當然，還有一件事。既然已經走了這麼遠，不如就把它完成吧。於是我讓 Goose 建立一個 pull request，它使用我之前配置好的 GitHub MCP 完成了建立。之後我又檢查了一遍程式碼，以防萬一有什麼問題，特別是 Cloudinary URL 的部分，儘管我已經目測檢查過了，正如你所料，一切正常。我合併了程式碼，新的播客節目也加入到我的網站上了。

結論

事情是這樣的。我花了不少時間才弄清楚這一切，設定好流程，並確保一切正常運作。沒錯，我自己複製貼上肯定更快。但現在一切都搞定了，下次我想加入播客節目時，只需在 Goose 裡執行我的“配方”，然後輸入播客的 URL 就行了。我今晚會做客一期節目，所以節目播出後，我就可以輕鬆地把它加入到網站上。事實上，如果我有一個團隊負責網站運營，我甚至可以把這個「配方」分享給他們，他們也只需要執行一下就行了。

我的網站使用 Nuxt 內容管理系統，這意味著我沒有使用任何內容管理系統 (CMS)。我的內容都以 Markdown 文件的形式存在，這使得開發者加入內容非常容易，但對於非開發者來說可能就沒那麼方便了。不過現在，就連我媽媽都能在我的網站上新增新的播客節目了。這真是太棒了！這只是我個人的網站，但想想這種應用場景對其他許多企業來說有多大的潛力。

Goose 的功能真是讓我印象深刻。我用得越多，就越覺得它強大。接下來，我打算加入其他配方，或修改這個配方，加入一些參數，最後得到一個完整的配方。我會繼續嘗試。這真有趣。

如果你覺得這篇文章有趣，或者你正在做類似的事情，或者你用過上面提到的任何MCP，請告訴我。我們生活在一個令人興奮的時代，如果你還沒開始嘗試，那還在等什麼呢？趕快動手試試，享受樂趣吧！

原文出處：https://dev.to/debs_obrien/how-i-use-ai-agents-mcp-to-fully-automate-my-websites-content-3ekj