我製作了一個可玩的《毀滅戰士》MCP 應用程式,可以直接在支援的 AI 客戶端(如 Claude Desktop)中運行,並在其他地方提供瀏覽器連結作為備案。

MCP 應用程式是「可在 Claude Desktop 等 MCP 主機內渲染的互動式 UI 應用程式」。

最終版本刻意保持精簡:

將一個為工具和結構化互動設計的協定,拿來問「它能運行《毀滅戰士》嗎?」,這本身就很有趣。

MCP 應用程式是一種漸進增強。因此,該應用程式有兩項任務:

大部分工作並非「我能否讓《毀滅戰士》在瀏覽器中運行?」。這部分已經是常見領域。更困難的部分是如何讓相同的會話在不同的客戶端上工作,這些客戶端在 iframe、CSP 和 UI 渲染方面有不同的規則。

因此,架構最終相當簡單:

瀏覽器端使用了 cloudflare/doom-wasm,這讓我在瀏覽器中獲得了一個真正的《毀滅戰士》運行環境,無需從頭構建引擎。

我將其整合到我的網站,並為其設定了一個專用的 /doom/play 路由,並使用 Freedoom Phase 1 作為預設內容,以便專案保持可再分發性。

第一個版本是一個瀏覽器外殼。它載入了運行環境,掛載了一個畫布,然後啟動了《毀滅戰士》。

一旦基本的瀏覽器路由奏效,我就有了穩定的基礎:

在 chrisnager.com/doom/play 上運行的《毀滅戰士》

從那裡開始,我添加了一個 TypeScript MCP 伺服器。

第一個目標很直接:公開一個創建《毀滅戰士》會話並返回簽名啟動 URL 的工具。這就變成了 create_doom_session。

後來我添加了 get_doom_launch_url 作為一個更簡單的備案,適用於無法渲染內嵌應用程式 UI 的客戶端。

這裡重要的設計決策是保持啟動路徑的獨立性。URL 中的簽名令牌足以啟動遊戲。這意味著瀏覽器路由不必依賴伺服器端會話持久化才能開始遊戲。

事實證明這是正確的權衡。

啟動一個 URL 很簡單。在 MCP 應用程式內渲染《毀滅戰士》才是真正有趣的地方。

最初的嵌入版本很混亂。我一度採用了嵌套 iframe 的設置,這在理論上看起來不錯,但隨即遇到了瀏覽器安全策略、主機 CSP 和嵌入限制的現實。

有些主機成功調用了該工具並生成了 URL,但內嵌應用程式卻因與《毀滅戰士》無關的原因而失敗,這些原因都與主機如何允許內容嵌入其他內容有關。

所以我重新設計了 MCP 應用程式 UI,使其更加直接。

我不再將應用程式視圖視為另一個框架的外殼,而是讓《毀滅戰士》的畫布直接在主機 iframe 內運行。這消除了許多問題:

這是專案中最大的概念轉變。一旦我停止嘗試將瀏覽器頁面嵌入 MCP 應用程式,而是將 MCP 應用程式視為瀏覽器頁面,事情就變得更加清晰。

我希望所有內容都託管在主站點下,因此部署目標變成了:

這意味著需要適應 Netlify 的模型,並確保靜態《毀滅戰士》資產和 MCP 伺服器能夠乾淨地共存。

該應用程式現在位於 chrisnager.com/doom/* 下,並且與《毀滅戰士》相關的部分也進行了相應的命名空間處理。這種清理工作是值得的。它使儲存庫更容易理解,並防止《毀滅戰士》的工作感覺像是滲透到網站的其他部分。

很多工作並不光鮮亮麗。

圍繞以下幾個方面進行了幾輪調試:

一類特別惱人的錯誤來自內容路徑。該應用程式在一個環境中運行良好,然後在另一個環境中嘗試從錯誤的原點或錯誤的路由載入 WAD。

我最終移除了基於 blob 的預載路徑,並將 WAD/配置直接寫入了 Emscripten 文件系統。這減少了移動部件,並使內嵌應用程式路徑更加可靠。

專案一度擁有更多功能:

我幾乎刪除了所有這些功能。由於專案規模變小,現在它更加穩定。

它足夠有趣、技術上引人入勝,並且確實可用。

最後一點很重要。如果「玩《毀滅戰士》」的路徑在用戶看到任何內容之前依賴於大量伺服器狀態,那麼它就不再有趣,而開始變成基礎設施。我想要的是有趣。

MCP 應用程式是新穎且有趣的,我對早期電腦遊戲設計的限制很感興趣,而且看到《毀滅戰士》被移植到新的平台上總是很有趣。

這個副專案迫使我清晰地思考 MCP 應用程式究竟是什麼。它不僅僅是一個返回 JSON 的工具,而是一個真正的互動式表面,具有與 Web 相同的限制:佈局、焦點、資產載入、輸入和安全邊界。

協定設計和瀏覽器怪癖的結合是一個有趣的解決方案。

這個專案我最喜歡的部分是它以一個簡單的互動結束。

你要求玩《毀滅戰士》。工具創建一個會話。如果可以,應用程式會內嵌打開。如果不行,你仍然會得到一個啟動 URL,遊戲仍然可以運行。

我實現了我的目標:不是最大化功能,而是將一個清晰的想法貫徹到底。

這個專案證明了 ChatGPT 和 Claude 可以運行《毀滅戰士》。

《毀滅戰士》部分運行在 ChatGPT 和 Claude 的 iOS 應用程式上。

這篇文章在 Y Combinator 的 Hacker News 上排名第一。

由 Gatsby 建置,Netlify 託管,PageSpeed Insights 認證 (💯)。