中国版 Cursor：CodeBuddy

我正在参加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