前言
前段时间，听说国外有款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 已经为我们的数独游戏增加了难易度选择以及重新开始按钮，但是看这个数独游戏的页面，总感觉不是太好看
那么下面我们针对数独游戏页面再提出一点优化，下面是整理的优化内容
优化页面展示样式：1.数字输入框大小和显示的数字框大小一致，不要串格2.难易度选择和重新开始按钮放在数独游戏顶部，同时增加检查答案按钮3.点击检查答案，全对时给出弹框展示小红花，有错误则提示具体错误的数字输入我们的优化需求后，Trae 会对我们的需求进行简单的分析，分析结束后会再次修改页面优化代码，等待代码优化结束后我们点击全部接受代码
再次刷新数独游戏界面来看一下游戏界面的效果，这时我们已经可以看到我们的数独游戏界面已经符合正常的视觉感受了，只是选择难度的下拉框高度有点低，和正常的标题文字【选择难度】相比有点小，这里我们再次优化一下页面
在Trae 对话框输入我们的需求，
优化页面展示样式：1.难易度下拉框的字体保持和选择难度字体大小一致，下拉框高度和重新开始按钮高度一致这里我们可以再次看到，在AI 对话框输入页面优化需求之后，Trae 会对我们的需求以及当前页面内容进行上下文结合的分析，分析后对页面进行调整
等待数独游戏页面代码优化完成之后，再次刷新数独游戏页面，我们可以看到如下的效果
到这里，个人就比较满意了。这时我们可以尝试一下看看我们自己开发的数独游戏了，比如这里我在第一行的空格处输入3，然后点击检查答案，看一下效果
这里我们可以看到检查答案却是是有效的，只是这个弹窗提示有点遮挡数独游戏的界面，那么下面我们再次提出我们的页面优化需求，优化一下检查答案按钮对错误的提示
优化页面展示样式：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 文件内容
{ "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 从而为开发者提供最智能的服务，新的开发模式来了，激动...
外站链接
InfoQ ： xie.infoq.cn/article/a04…51CTO ： blog.51cto.com/u_10917175/…CSDN ： angel.blog.csdn.net/article/det…博客园 ： www.cnblogs.com/RainOfJune/…知乎 ： zhuanlan.zhihu.com/p/190973713…
