如何用Trae生成小程序,MCP、Agent、上下文功能很强大

2025-04-25 0 178

据多方消息,OpenAI正计划以约30亿美元收购AI编程工具公司,将成为OpenAI迄今为止最大一笔收购。

从今年开始,AI IDE领域的新闻不断。

正处于时代风口,不懂代码的友友们却陷入了无尽的焦虑。

其实真没必要太担心。

AI的升级进化,都是为了让更多人更好的运用AI。

比如我,一个文科生,一行代码都看不懂,仅靠和AI对话,一个月前也上线了我的第一款小程序——“屎记demo”。

今天,“屎记demo”2.0版本也来了。

对比之前,我做了一些页面的优化,还内置了一个小游戏,💩的时候可以打发时间~

成果展示:

不得不说,AI编程真的太牛了!!!

虽然市面上有很多这种健康类App,但要么功能太复杂,要么就是充斥着各种广告和付费项目。

如果你也跟我一样,只想有一个满足自用、简单、无广的小工具,真的可以试试自己手搓一个!

01:前期准备

虽然AI编程工具很多、很强大,但是实际用起来才发现,有的需要科学上网,有的不仅要会员,费用还不低。

对于像我这样的小白来说,学习成本都太高了。

毕竟我们只是想做一个自用的小程序,如果还要花钱,就有违初心了。

对比无数产品之后,最终我选择用Trae

官网:

它不需要科学上网,全功能免费!!

纯中文界面,对我们0基础小白来说非常友好。

内置、、DeepSeek-V3-0324、大模型,免费不限量使用。

我们还可以通过API配置云端的模型资源。

热门的,最近上线的模型,都能简单调用。

我们进入Trae的官网,跟着提示一步步下载安装Trae IDE。

习惯用传统IDE的友友们,也可以直接加装Trae插件。

点击打开文件夹,选择我们的小程序代码所在的文件夹。

我们只需要在输入框提出需求,就可以完成代码的生成、修改。

为了更直观地看到我们的优化过程,我们打开微信开发者工具,导入小程序代码文件。

我们在Trae中提交需求、更新代码时,可以在这个窗口实时预览更新后的效果。

一般来说代码更新,预览窗口里就同步更新啦,如果代码更新了画面并没有变化,可以手动点一下编译。

如果你是做网页,可以省略这一步,Trae内置的Webview可以直接预览网页。

02:优化主题界面

这里我选择的是Trae内置的DeepSeek-V3-0324模型。

我们直接提问@Builder:你可以看懂这个小程序吗?

在它做出分析和解答后,可以让它给出一些小程序的优化建议。

上个版本的Trae有Chat和Builder两种模式,Chat模式可以理解当前项目中的上下文,一点点精准修改。Builder模式更适合从0到1开发,它会调用不同的工具不断满足我们的需求。

昨天的更新,直接融合了两种模式,我们只需要@Builder 说出需求,操作上更简单了。

另一个@Build with MCP ,可以灵活使用MCP工具,扩展它的能力。

根据@Builder 的建议,我们提出需求:根据布里斯托💩分类法,把💩分为7种形态,在每次计时完成之后,选择💩的状态,并给出一些提醒。

不到1分钟,它就会自动生成代码,我们只需要点接受就行。

在它生成代码时,我发现它会自动参考上下文文件,你也可以在左下角自行添加需要的Doc文件或者网页。

我们继续提出需求:做一套可以自由切换的主题。

在微信开发者工具同步编译之后,调试器可能会报错。

不用担心,我们只需要把红色的错误提示部分复制粘贴给Trae,它就会帮我们修改

大家在做的时候不要害怕报错,AI会一一步步帮你修改好。

如果提出一个需求后,生成的结果完全不符合你的心意,还可以一键回退到某次对话前

真的对新手太友好了!

最后我们让它给我们的页面加上了小动画,当你点击开始计时时,熊猫的状态就会改变。

计时状态下,会有一只大熊猫陪你一起坐在马桶上。

用AI开发小工具,真的可以不用敲一行代码。小白狂喜!

03:新增小游戏模块

当我实测了这个小程序之后,发现使用时纯计时有点太无聊了。

于是,我准备给它再加入一个解压的小游戏。计时过程中可以解解闷。

我们继续发送需求:在熊猫图片下面做一个按钮,叫砖块破坏王。

它好像没理解熊猫图片的意思,最后在页面的最下方生成了一个钻块破坏王的按钮。

不过也没关系,不影响使用就行。

我们继续提出需求,让它实现小游戏的功能:做一个类似砖块破坏王的游戏,当点击砖块破坏王按钮时,就会跳转到这个游戏。

“我希望游戏画面居中”

“给小游戏加上一个积分器”

“跳转时重新开始按钮显示为开始游戏,点击后游戏开始运行,然后按钮显示为重新开始”

我们在对话中一点点优化小程序的功能。

最后的成品就是大家最开始看到的样子啦。

我们在微信开发者工具中,点击上传,在网页端提交审核,等待审核通过,就可以正式发布。

04:一点分享

这次Trae的新功能自定义智能体和MCP,虽然在升级小程序的时候没有用到,我觉得还是要给大家说一下,真的很强!

我们可以添加自定义智能体,可以让Trae化身各类专家,帮你解决代码问题。

例如,我需要一个编程专家,精准定位代码问题并帮我解决,可以直接通过提示词创建:

它内置的4种工具,和@Builder 一样可以读取、写入、运行代码,并提供预览。还可以上网搜索信息。

我们还可以搭配MCP,让AI自由调用各种外部的工具。这就让Trae的能力更多元,更像是一整个生态系统。

比如,我想将小程序的更新日记自动推送到GitHub,我们可以在MCP市场中添加GitHub,它就能帮我实现这个功能。

点击GitHub后的“+”,输入Personal Access Token,把原始配置的代码对照下列标红位置处改动一下:

GitHub MCP Severs就配置成功啦。

我们可以在编程专家智能体中直接勾选添加它。

回到对话界面,这次我们@编程专家 发送:自动总结这个小程序的变更,总结成更新日志自动push到github,我的我的GitHub用户名是“Koi0101-max”,仓库名称是“-demo”。

如果你尝试完市场中的各种MCP服务,发现都不太适合自己的项目,你还可以自定义添加。

对于我这样的0基础小白,Trae就像一位随时待命的“程序员搭子”,不仅理解你的需求,还能快速响应,产出的效果也不错!

它是真的能帮我们做到0代码开发。

如果你现在刚好有一个创意,就不要只是停留在想法的层面啦,试着用Trae把它变成现实吧。

原文链接:实测新版Trae,支持MCP一句话改造了我的小程序!

若非本站原创的文章,特别作如下声明:
本文刊载所有内容仅供提供信息交流和业务探讨而非提供法律建议目的使用,不代表任何监管机构的立场和观点。
不承担任何由于内容的合法性及真实性所引起的争议和法律责任。
凡注明为其他媒体来源的信息,均为转载,版权归版权所有人所有。
如有未注明作者及出处的文章和资料等素材,请版权所有者联系我们,我们将及时补上或者删除,共同建设自媒体信息平台,感谢你的支持!

AI老司机 AI行业动态 如何用Trae生成小程序,MCP、Agent、上下文功能很强大 https://www.ailsj.cn/1485.html

相关文章

发表评论
暂无评论