Cursor 要付费，何不试试 Trae | Trae 带你做游戏

前言

前段时间，听说国外有款 AI 编程工具 Cursor 很火，特别好用，然后就赶快下载了感受一下。当时整体操作下来的感觉是在自然语言生成代码这块，还不错，比如你想做个小游戏，或者画个页面什么的，不用 UI 设计师，不用前端工程师，你自己通过对话的方式就可以实现。但是没过几天就提示我收费了，一气之下就果断卸载。个人作为开发者，对于技术工具，或者说技术知识方面，一直提倡的是开源共进，而不是技术付费，因此对于需要付费的往往比较敏感。当时还在想，什么时候能有一款国产的 AI 编程开发工具...这不，Trae 就来了，来的很及时哦。

我正在参加 Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：www.trae.com.cn/?utm_source…

那么什么是 Trae 开发工具？

Trae

简单来说就是一款 AI 编程开发工具，那么官网的介绍是这样的：Trae （The Real Al Engineer） 是由字节跳动推出的 AI 原生集成开发环境（IDE），Trae IDE 与 AI 深度集成，提供智能问答、代码自动补全以及基于 Agent 的 AI 自动编程能力。使用 Trae 开发项目时，你可以与 AI 灵活协作，提升开发效率。在了解了 Trae 开发工具之后，下面我们就可以来下载安装 Trae 开发工具了。

下载安装

这里我们直接点击上面的 Trae 免费下载链接，在 Trae 官网直接点击【立即获取 Trae IDE】 或者点击右上角的【下载 IDE】

等待 Trae IDE 工具下载完成之后，我们直接双击.exe 文件进行安装，安装过程中我们可以指定安装目录

剩下的默认即可，等待安装成功后可以直接点击完成后立即运行 Trae。

Trae 配置

在安装完成 Trae 之后，首次打开 Trae 开发工具，需要我们进行设置，

点击【开始】按钮，设置主题风格以及显示语言，这里我们选择简体中文

点击【继续】在接下来的页面中根据你的具体情况选择。如果你的电脑中已安装并配置 VS Code 或 Cursor，你可以点击 【从 VS Code 导入】 按钮。系统将会从对应的 IDE 中获取插件、IDE 设置、快捷键设置等信息并一键导入到 Trae 中，帮助你快速从其他 IDE 切换到 Trae。这里我直接选择【跳过】

在接下来的页面我选择【安装 Trae 命令】，添加 Trae 相关的命令行后，你可以在终端中使用命令行更快速地完成 Trae 相关的操作，比如使用 trae 命令快速唤起 Trae，或者使用 trae my-react-app 命令在 Trae 中打开一个项目

安装完 Trae 命令后，在登录页面，使用手机号或稀土掘金帐号登录 Trae。完成登录后，你才可以在 Trae 中使用 AI 服务

点击【登录】跳转到登录页面，输入手机号、验证码之后，点击【登录并打开 Trae】即可成功登录 Trae 账号

下面就是打开的 Trae 的操作界面，这里我们可以看到，Trae 可以直接打开本地文件夹或者 克隆 Git 仓库等

到这里，我们就已经完成了 Trae 的安装以及初始化配置，下面我们就可以来开发我们的小游戏了。

开发小游戏

这里首先介绍一下自己，个人作为后端开发者，对于前端的一些页面设计、样式、前端工具的使用其实不太熟悉，那么基于我之前使用 Cursor 的感觉，AI 编程工具更倾向于前端编辑器的感觉。那么这里我们作为首次探索，我刚好看到了 Trae IDE 开发工具的首页提供了一个小游戏的模板【@Builder 生成一个贪吃蛇游戏】，那么我们直接点击这个模版，来感受一下 Trae 吧！

模版游戏

在点击了模板【@Builder 生成一个贪吃蛇游戏】之后，我们可以看到在 Trae 开发工具页面看到具体的 AI 对话内容以及生成的 html 及 css 代码，点击 AI 对话输入区的 【全部接受】接受代码

在接受了代码之后，我们选择 index.html 页面，右键【复制路径】并将复制后的路径放在浏览器中打开 index.html 运行游戏

下面是我们看到的贪吃蛇的游戏界面，整个游戏界面比较简单，也就是基础的实现了贪吃蛇的功能

下面我们就来开始我们今天的正题吧。

数独游戏

需求背景

这里个人其实还是比较喜欢数独游戏的，还特意买过数独游戏的小书，在闲暇之余解一下数独，也活动一下大脑，让自己的大脑不至于生锈。但是数独游戏小书有一个特点就是不便于携带，在当下手机可以解决万事万物的情况下，没有一个手机版的数独小游戏，总感觉有点遗憾。之前自己也一直想自己开发一个数独小游戏，受限于自身技术，对前端的不熟悉，也就一直没有动手。现在有了 Trae IDE 开发工具，那么对于我这个不懂前端的开发来说，必须是一个福音啊，我可以直接通过自然语言对话的方式来实现我的数独小游戏的开发，就像上面通过模版生成贪吃蛇小游戏那样。

AI 对话生成数独小游戏

这里我们重新创建一个空的文件夹来存放我们的数独小游戏代码文件，通过开发工具上面的【打开文件夹】来切换不同的项目目录

打开【shudu】 文件夹后，在右侧 AI 对话框中输入【生成一个数独小游戏】，那么 Trae AI 工具在对我们的需求进行分析后开始生成数独游戏的页面及 js 文件，等待全部生成完成之后我们点击【全部接受】

并复制 index.html 页面地址在浏览器打开

页面优化

这里我们看到，生成的数独游戏是没办法直接玩儿的，那么我们需要对现在的数独游戏进行优化。考虑到 AI 对话语言的三要素（定角色、做什么、怎么做），上面我们的 AI 对话内容有点过于简单，下面我们直接重新修改一下对话语言来再次尝试，【你是一个小游戏开发专家，具有丰富的游戏开发经验，我需要你开发一个数独小游戏，需要支持难，中，易三种难易度切换，锻炼玩家数字敏感性。现在，帮我生成完整的代码吧。】

这里在输入需求内容后遇到了这样的情况，多次尝试也没有效果，提示【系统未知错误，请稍后重试】，

那么当遇到这种情况的时候，你可以尝试切换大语言模型来处理，这里我将大语言模型切换到第二个就可以了。应该是第一个内置模型不太支持这种需求比较高的自然语言代码生成吧

这里我们可以看到在提出第二次的对话语言之后，Trae IDE 基于第二次的要求对第一次生成的文件内容进行了优化修改，修改后我们可以通过中间区域看到前后文件变更内容以及是否接受代码的按钮，这里我们还是【全部接受】

回到浏览器刷新我们打开的 index.html 页面，这时我们可以看到 Trae 已经为我们的数独游戏增加了难易度选择以及重新开始按钮，但是看这个数独游戏的页面，总感觉不是太好看

那么下面我们针对数独游戏页面再提出一点优化，下面是整理的优化内容

 体验AI代码助手 代码解读复制代码优化页面展示样式：1.数字输入框大小和显示的数字框大小一致，不要串格2.难易度选择和重新开始按钮放在数独游戏顶部，同时增加检查答案按钮3.点击检查答案，全对时给出弹框展示小红花，有错误则提示具体错误的数字

输入我们的优化需求后，Trae 会对我们的需求进行简单的分析，分析结束后会再次修改页面优化代码，等待代码优化结束后我们点击全部接受代码

再次刷新数独游戏界面来看一下游戏界面的效果，这时我们已经可以看到我们的数独游戏界面已经符合正常的视觉感受了，只是选择难度的下拉框高度有点低，和正常的标题文字【选择难度】相比有点小，这里我们再次优化一下页面

在 Trae 对话框输入我们的需求，

 体验AI代码助手 代码解读复制代码优化页面展示样式：1.难易度下拉框的字体保持和选择难度字体大小一致，下拉框高度和重新开始按钮高度一致

这里我们可以再次看到，在 AI 对话框输入页面优化需求之后，Trae 会对我们的需求以及当前页面内容进行上下文结合的分析，分析后对页面进行调整

等待数独游戏页面代码优化完成之后，再次刷新数独游戏页面，我们可以看到如下的效果

到这里，个人就比较满意了。这时我们可以尝试一下看看我们自己开发的数独游戏了，比如这里我在第一行的空格处输入 3，然后点击检查答案，看一下效果

这里我们可以看到检查答案却是是有效的，只是这个弹窗提示有点遮挡数独游戏的界面，那么下面我们再次提出我们的页面优化需求，优化一下检查答案按钮对错误的提示

 体验AI代码助手 代码解读复制代码优化页面展示样式：1.点击检查答案按钮，输入数字对，则数字变绿色，输入数字不对，则数字变红色

下面是接受优化后的数独游戏效果，这里可以看到对于错误的数字已经可以红色展示，虽然没有输入数字的也展示了绿色，但是错误的已经展示红色了，也算实现了我们的优化需求。

最终效果

到这里，我们的数独游戏就算完整开发完成了，上面就是我们开发的数独小游戏的最终效果。整个开发数独小游戏的过程，我们没有任何的代码输入，完全通过与 AI 对话的方式来进行的数独小游戏的代码开发，开发过程比较简单易操作，在开发完成之后我们也可以直接体验游戏效果。但是大家可能注意到了，现在的数独小游戏只能通过本地文件地址放在浏览器中运行游戏的方式玩耍，而不能直接通过一个请求链接，或者说是一个比较方便的入口，不用文件可以直接访问数独游戏的方式。那么这就需要用到我们的 MCP Server。我们可以通过在 Trae 配置 MCP Server 的方式，通过 Agent 自动调用配置的 MCP Server 发布页面，生成一个可以访问的页面链接来实现我们可以随时随地打开数独游戏的想法。那么如何配置 MCP Server 呢？

MCP Server

Trae 的 Agent 能力升级，支持通过 prompt 和 tools 自定义 Agent。内置 Builder Agent 和 Builder with MCP，支持自动运行模式，自动执行命令和调用工具，并支持配置命令黑名单

MCP

那么什么是 MCP 呢？MCP 全称是 Model Context Protocol (MCP)，是一种协议，它允许大型语言模型（LLMs）访问自定义的工具和服务。Trae 中的智能体作为 MCP 客户端可以选择向 MCP Server 发起请求，以使用它们提供的工具。你可以自行添加 MCP Server，并添加到自定义的智能体中来使用。那么如何配置 MCP Server 呢？我们可以直接在 Trae 的 MCP 市场选择自己需要的 MCP Server 添加到项目中，或者通过手动配置的方式添加。

从 MCP 市场添加

Trae 的 MCP 市场中提供了社区中热门的 MCP Server，我们可以根据需要将它们添加到项目中。在 AI 对话窗口的右上角，点击 【设置】，选择【MCP】

在弹出的 MCP 配置页面点击【+ 添加 MCP Servers】可以跳转到 MCP Server 市场

我们可以从 MCP Server 市场列表中找到所需的 MCP Server，然后点击右侧的 【+】按钮

在弹出的 MCP Server 配置信息页面直接点击【确认】完成 MCP Server 的配置

手动添加

由于 MCP 市场中没有可以将 HTML 部署到指定服务并生成公开访问链接的 MCP Server，那么我们这里就可以配置腾讯云的 EdgeOne Pages MCP Server，那么简单介绍一下 EdgeOne Pages MCP Server。

Pages MCP Server

什么是 Pages MCP Server？EdgeOne Pages Deploy MCP 是一项专用服务，能够将 HTML 内容快速部署到 EdgeOne Pages 并生成公开访问链接。看到没，刚才我们说的数独游戏只能通过自己电脑本地浏览器访问，需要给其他人玩儿的话，要拷贝给他们。那么现在就不用了，我们可以通过 EdgeOne Pages Deploy MCP 将我们的数独游戏 HTML 页面快速部署到 EdgeOne Pages 并生成公开访问链接，有了公开访问链接，其他有需要的小伙伴就可以直接通过链接看了，再也不用逐个拷贝文件了。

但是在我们的 Trae 提供的 MCP 市场中并没有腾讯云的 EdgeOne Pages MCP Server。在这种情况下， 对于一些在市场中无法找到想要的 MCP Server，或者想使用自己开发的 MCP Server，则需要手动配置。手动配置的入口在我们的 MCP 市场下面，可以直接看到有一个【手动配置】

点击【手动配置】输入我们的 EdgeOne Pages MCP Server 的配置 JSON 文件内容

json 体验AI代码助手 代码解读复制代码{  "mcpServers": {    "edgeone-pages-mcp-server": {      "command": "npx",      "args": ["edgeone-pages-mcp"],       "env": {             "EDGEONE_PAGES_API_TOKEN": "您的API令牌"       }    }  }}

输入完 MCP Server 的配置内容后点击【确认】后可以看到我们已经将我们的 EdgeOne Pages MCP Server 添加到 Trae 的 MCP Server 了

点击【我知道了】可以看到我们添加的腾讯云的部署页面的 MCP Server 已经添加成功

回到 Trae 对话框页面，切换我们的对话模式为【Builder with MCP】

输入我们的需求【发布数独小游戏】，对话框配置的绿色点表示 MCP Server 正常运行

首次使用 MCP Server 时，Trae Agent 智能体会对我们使用的 MCP Server 工具进行【运行】确认，这里我们可以直接开启【从下次开始自动运行命令和 MCP 工具】，那么后续就可以自动运行了，不用手动点击【运行】按钮了

等待 MCP Server 自动运行完成之后，我们可以看到我们的数独小游戏已成功部署至 EdgeOne Pages，并生成了临时访问 URL

我们可以直接将 URL 地址复制到浏览器或者其他的任何地方进行访问了，这里没有绑定域名的话，临时 URL 的有效期是 3 个小时。

效果页面

那么到这里，我们的数独小游戏的开发整个就完成了，从通过 Builder 面板对话生成数独小游戏，到最后的通过配置 MCP Server 发布小游戏，整个操作过程都比较简单，另外 Trae 的所有操作菜单以及按钮都是中文的，这就比较方便中文的开发者，相对于 Cursor 的全英文操作界面，Trae 的操作简直不要太好，下面是我们今天开发的数独小游戏的 URL 地址访问的效果

最后总结

Trae IDE 作为与 AI 深度集成，提供智能问答、代码自动补全以及基于 Agent 的 AI 自动编程能力的开发工具，开发者可以通过智能体的方式来快速实现开发。通过内置智能体 Builder 可以帮助你从 0 到 1 开发一个完整的项目。根据你的需求，Builder 会调用不同的工具，包括分析代码文件的工具、编辑代码文件的工具、运行命令的工具等等，从而更加精确且有效地处理你的需求。

对于 Builder 不能满足需求的情况，在 Builder 的基础上，Trae 支持我们配置需要的 MCP Server ，对于我们配置的 MCP Server，默认都会添加至 Builder with MCP，在开发过程中，我们只需要切换到 Builder with MCP ，通过 AI 对话的模式就可以命令我们的 Agent 智能体自动运行匹配的 MCP Server，从而实现智能开发。

对于用户来说，只需要输入 AI 对话语言，Trae Agent 会根据用户的语言内容分析并调用不同的 MCP Server 来完成任务，从而达到用户想要的效果。也就是说，在以后的开发中，开发者的对接人是 Agent ，而不是众多的 MCP Server，开发者通过与 Agent 对话，Agent 会根据将需求匹配到具体的 MCP Server 从而为开发者提供最智能的服务，新的开发模式来了，激动...