我正在參加CodeBuddy「首席試玩官」內容創作大賽，本文所使用的 CodeBuddy 免費下載鏈接：騰訊云代碼助手 CodeBuddy - AI 時代的智能編程伙伴

一句話即可讓 AI 助手生成網頁。

還能生成小游戲。

甚至可以生成腳本。

傳統開發環境的痛點

傳統集成開發環境（IDE）通常需要手動創建目錄、安裝依賴，配置繁瑣，門檻較高。無論是獨立開發者還是愛好者，不借助 AI，開發環境都顯得復雜且不友好。

CodeBuddy 簡介

本文介紹騰訊云代碼助手 CodeBuddy。

CodeBuddy 是一款編程擴展插件，非獨立軟件。官網：https://copilot.tencent.com/

CodeBuddy 安裝流程

點擊“免費使用”。

進入頁面后，選擇你的開發工具。以 VSCode 為例，點擊“在 Visual Studio Code 中安裝”。

彈出窗口后，點擊“打開 Visual Studio Code”。

VS Code 會自動打開。

點擊“Install”按鈕完成安裝。

你也可以在擴展市場搜索“騰訊云代碼助手”進行安裝。

安裝完成后，左側會出現插件圖標。

CodeBuddy 基本界面與功能

點擊圖標進入 CodeBuddy 界面。首次使用需登錄（注冊騰訊云賬號）。先看 Chat 功能，可以像聊天一樣讓它修改代碼。

如需使用智能體 Agent，點擊 Craft。

MCP 協議與服務擴展

支持主流 MCP 協議。

內置 MCP 倉庫。

可在 MCP 市場中快速安裝和查找服務。如未找到所需服務，可點擊右上角加號手動添加。

例如添加文件系統：

"filesystem": {
    "command": "npx",
    "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "D:\\"
    ]
}

保存后，即可在 MCP 已安裝列表中看到。

Craft 模式與 MCP 協作案例

下面通過案例演示 Craft 模式和 MCP 的協作。

我希望將 CodeBuddy 從左側移動到右側面板，方便查看左側文件。

我更習慣在右側操作，便于查看文件。第一個案例：“在 ./web-demo/ 下生成響應式個人博客首頁，包含導航欄、文章列表和頁腳。”

可以看到操作流程。無需手動操作，自動完成。建議在設置中勾選“自動修改文件”，無需每次確認。

點擊右上角設計按鈕，展開設置，勾選“自動修改文件”。

發現 CodeBuddy 在 ./web-demo/ 下又新建了一個 web-demo 文件夾。

這其實是多余的。
我本意是在 ./web-demo/ 下直接生成響應式博客首頁，無需再新建文件夾。
于是我刪除多余文件夾，將代碼移至 ./web-demo/ 下。移動后查看頁面效果。VS Code 運行 HTML 方法此處略過。

頁面如上圖，簡潔明了。測試響應式時，瀏覽器縮放頁面，元素會自適應屏幕比例。

整體響應式表現良好。實際操作體驗更佳。如果想讓頁面更美觀，可以繼續嘗試，比如“請豐富頁面，加入漂亮的卡片，美化 UI 設計”。

經過“請豐富頁面，加入漂亮的卡片，美化 UI 設計”后，我又補充“頁面不夠炫酷，可以用臨時圖片占位文章封面”。最終頁面如下：

同樣支持響應式縮放。建議大家實際體驗。

小游戲開發體驗

接下來測試小游戲開發。我準備了 5 張素材圖片：

assets\人物.gif
assets\怪物.gif
assets\怪物被踩扁.gif
assets\灌木背景循環.png
assets\金幣.gif

我的提示詞是：“在 ./game-demo 下生成一個橫版過關小游戲，包括 index.html、game.js、assets 素材文件夾。”

第一次生成的游戲未用素材，運行效果如下：

第二次提示“assets 目錄下已準備好素材，請使用”。僅用兩次就完成了小游戲開發。

最終代碼目錄如下：

運行效果：

基本功能已實現，但代碼仍有優化空間，繼續下一個案例。

MCP + Craft：B站熱門視頻管理應用案例

提示詞如下：

“使用 MCP，從 https://api.bilibili.com/x/web-interface/popular?ps=30 拉取前30條熱門視頻數據，提取 title 和 pubdate 字段，保存到 ./data/videos.json，然后在 ./bilibili-popular-app 下生成一個 React + Express 管理應用，直接讀取 data/videos.json，使用 Ant Design 風格，包含視頻列表展示、標記已看、刪除和分頁功能。”

我還配置了一個 MCP，名為 fetcher，用于抓取數據。

"fetcher": {
    "command": "npx",
    "args": ["-y", "fetcher-mcp"]
},

因此，最后一個案例結合了 MCP 和 Craft 智能體。

運行時，先通過 fetcher 抓取數據，寫入 ./data/videos.json。

接著進入第二階段：創建 React + Express 管理應用。

后續遇到問題直接對話修復，最后分別運行 server 與 client，效果如下：

總結與展望

本文介紹了騰訊云代碼助手 CodeBuddy，結合 Craft 智能體，制作了個人網頁和小游戲，通過 MCP 服務抓取數據，并基于數據實現了前后端一體的管理面板。

所有案例均通過對話完成，門檻低且高效。生成代碼仍有優化空間。

作為國內首家支持 MCP 服務的 AI 代碼助手，MCP 協議前景廣闊，騰訊代碼助手值得期待。

通過 CodeBuddy 生成的代碼已上傳至 GitHub，感興趣可查看：

GitHub 地址：https://github.com/BNTang/CodeBuddy