一、内置智能体
1、Chat
该智能体用于问答对话，它不会直接修改我们的文件
能力：
- 读
- 预览
- 联网搜索
tips：一般我们开发都是基于一种技术栈，AI以前只会使用原生技术，但是随着算力和技术的升级，AI现在居然已经可以使用框架了，就是因为trae现在可以执行终端命令，它可以帮你安装搭建框架。但是目前它是在网上找到什么就用什么，有时候还是得我们自己选择会好一点
我这里举一个案例，一般AI用原生JavaScript写出来的页面都很丑，我们需要用到一些组件库，但是如果你不给官方文档，它们就会去找到一些二手资料，甚至还会有很多bug
错误演示：
elementUI共有多少种组件elementUI现在有基于Vue2版本的和基于Vue3版本的，现在很多网友也是混淆的，导致AI根本分不清，有时候给你的项目安装了Vue2，但是给你用了Vue3版本的elementUI，导致报错
正确用法：
参考https://element.eleme.cn/#/zh-CN/component elementUI共有多少种组件如果你用了第三方的框架，请附带上官网的地址，防止AI去读取网上乱七八糟的数据来胡乱回答你
我这里提供一些常用的UI组件库给大家
https://element.eleme.cn/ ，饿了么的UI库，我经常用，做的比较通用化
https://nutui.jd.com/ ，京东风格的移动端组件库，做移动端可以用这款更好
https://uniapp.dcloud.net.cn/ ，uniapp，专用做APP的框架，最大的黑科技是可以跨平台发布，而且自带组件库uni-ui，搭配使用出现不兼容的情况更少，更稳定，推荐
但是UI组件库是预定义好，就那么多，如果要做复杂的效果，就不够用了
我最推荐的是工具类，工具类可以随意组合，不受预设限制，但是用起来没有组件库方便，有点累，后面用了组件库就再也没用过了。
但是AI不怕累啊，工具类最合适AI开发，很多以前冷门的东西现在突然变得热门，就是这个原因，比如sapubase，也是AI圣体
我推荐tailwindcss，https://tailwind.nodejs.cn/ ，体积小，又齐全，唯一缺点是英文的看着烦，反正用AI也没这毛病了
另外，如果生成教学网页，比如物理化学的，实验器材特别多，用到很多图片，trae的模型是不能直接生成图片的，可能以后能行，生成图片这种事情，消耗的算力较多，需要额外对接别的接口，额外付费，当然也有免费的解决方案，就是安装第三方的图标库。
- Iconify ，Vue3官方推荐的
- Heroicons，这是上面提到的tailwindcss团队开发的
2、Builder
比起Chat，多了终端和编辑功能，可以直接修改、生成文件，并且执行终端命令
能力：
- 读
- 预览
- 联网搜索
- 终端
- 编辑
tips：完全可以让AI给我们搭建框架，就是运行命令得我们手动点一下，在设置—对话流，我找到了可以自动运行命令，但是我觉得也不安全，谁知道AI得到计算机的全部权限之后会干什么事，而且网上有人找的提示词也未必就安全的，有的人甚至提示词都看不懂就敢这么敢，如果提示词是让你把银行卡余额全部转给他，AI都能给你办了。但肯定有人嫌麻烦，选择全部自动，我建议如果能看懂命令，知道哪些是低风险命令，就添加白名单，否则就不要添加白名单。
案例：
参考官网文档https://vue3.zcopy.site/ ，帮我部署vue3的脚手架
参考https://element-plus.org/zh-CN/ ，帮我安装Element Plus
参考https://heroicons.dev/ ，帮我安装Heroicons
参考https://xiaolily.cn/#/course ，制作一个技能训练平台提示：nodejs的环境，AI有时候会安装失败，那就去官网自己安装吧，https://nodejs.org/ ，还是那句话，以后应该没这事
忽略文件：
如果发现使用框架比原生的速度慢很多，也正常，因为框架中有很多环境相关代码，你如果不去配置忽略文件，AI也会去查看这些文件，浪费大量时间，使用框架的话请配置忽略文件
设置—上下文—忽略文件
/node_modules
*.svg
Workspace 忽略了哪些文件文档集：
另外官网文档可以通过添加文档集的方式更好，因为我们在问的时候才去让AI参考文档，会非常慢，AI还需要慢慢阅读文档，但是如果提前添加到文档集，那么AI就会提前索引构建，用起来就非常快。
设置—上下文—文档集
规则：
如果安装配置了UI组件库，建议使用该库的组件。为了风格的统一，我建议还是选择一款你喜欢的UI组件库，否则这个页面写出来花里胡哨的。
心得经验：有人说，干嘛非要去创建框架，反正AI也不怕累，我就让它用原生写，用了框架之后，又是忽略、又是添加文档集的，还有可能安装失败，但是我就说一点，我们这个课是创建教学辅助网页，如果是原生JavaScript，需要运行到浏览器中，也就是开发工具是不知道浏览器中到底运行得怎么样，如果报错了也不知道，我还得到浏览器中找到报错告诉AI，相当麻烦。但是用基于nodejs的框架就没这问题，nodejs是一个JavaScript的运行环境，可以使得JavaScript运行到web服务环境中，这样出问题之后，框架就会抛出异常，AI就可以自动识别了，实在不行用#Problem也可以精准定位到问题。
3、Builder with MCP
Model Context Protocol (MCP) 是一种协议，它允许大型语言模型（LLMs）访问自定义的工具和服务。
通俗来说，我们通过大模型直接生成的都是普通的静态网页，如果想具备一些特定的能力，可以额外接入一些第三方的工具。
直接上个案例吧，理科类的课例制作，一般需要绘制图表，比如电压电流的变化曲线等等，你如果直接生成是不具备这个能力的，需要引入第三方的工具，这里我推荐mcp-server-chart，这是一个github的项目：https://github.com/antvis/mcp-server-chart
{
"mcpServers": {
"mcp-server-chart": {
"command": "cmd",
"args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
}
}
}选择手动添加MCP，将配置信息填入到trae中
但是还别着急开发，因为我们是做教学网页，需要先在规则中配置：
优先使用前端相关技术，使开发出来的程序可以运行在浏览器中否则经常开发出一些乱七八糟的东西，我甚至都运行不了，如果不能运行到浏览器，就上传不到平台了。
还有一件事情，还需要在设置—对话流中勾选，可以让IDE自动运行MCP，否则他到时候网上随便给你找第三方的图标库，配置好的MCP反而不去用。
依据***文件，使用mcp-server-chart生成***图表
依据学生期末考试成绩.md，使用mcp-server-chart生成柱状图
依据报考热门专业.json，使用mcp-server-chart生成词云图，使用科技风格，词的大小由weight的数值区分下面是用到的数据，因为太多，我只展示三项，可以自己通过AI生成。
{
"majors": [
{
"name": "计算机科学与技术",
"weight": 100
},
{
"name": "人工智能",
"weight": 95
},
{
"name": "数据科学与大数据技术",
"weight": 90
},
]
}上面讲的是通过固定的数据生成静态的图表，在做实验时，图表往往是动态变化的，这个时候用mcp-server-chart就搞不定了，mcp-server-chart只能生成静态图表。
这里我建议使用echarts，echarts最开始是百度开发的，当时官网打开非常快，后面连官网文档都卡得进不去，我一查，发现百度把这个东西捐赠给Apache了，可能是不挣钱还是啥原因，本来当时做图表最好用的工具，但是官网文档看不了也没法玩啊，结果AI开发成为主流之后，莫名又火了，因为AI开发连技术文档都不需要看了，有时候不得不感慨，未来的变化总是始料未及，而我们经常处于思维定势中。
生成一个小球从高处落到地面的动画（高度可以从100m-1000m的范围内调节），使用echarts.js分别绘制出重力势能和动能的变化趋势tips：哪怕已经设置了自动运行MCP，它这个也经常不调用，每次都得告诉他需要调用MCP来实现，特别麻烦。我总结出来还有一招，就是自定义一个智能体，MCP自动化助手：根据实际需求，自动调用相应的MCP工具来实现功能。
4、SOLO模式
这也是2025年12月份才上到国内版的，之前在国外版测试，但是不知道为什么把SOLO Builder模式去掉了
IDE模式和SOLO模式最核心的区别是，IDE模式更倾向于辅助程序员开发，而SOLO模式则对一点技术都不懂的普通用户更友好，我的理解是扮演了一个产品经理的角色吧。
SOLO模式的Plan建议开启，他会先指定详细的计划，与用户沟通之后，再执行
你直接说要做一个什么东西就行了，但是符不符合你的预期就不好说，我建议最好学点基本的技术，然后使用IDE模式，至少项目是你自己把控的，而不是交给产品经理。
这个模式就自己探究吧，也没啥好讲的，没有什么门槛。
二、案例讲解
弹球游戏（难度一颗星）：
请制作一款弹球游戏，小球总是做着无规则的运动，一旦碰到边缘，横向速度和纵向速度取反布朗运动实验（难度两颗星）
依据分子运动论，气体总是做永不停息、无规则的热运动，请使用动画的方式展现这一过程经验：其实布朗运动实验和弹球游戏很像，区别只在于小球的数量，如果先做好了弹球游戏，布朗运动这个就可以说得简略一点，因为就算新建了对话，AI还是将之前的记忆住了，但是我觉得这个逻辑不对，有时候我就是想重新开始，希望官方以后改一下这个。
根据热力学第二定律，孤立系统的熵总是倾向于增加或保持不变，为了展示这一原理，你在容器中间加上一个隔板，左边有气体分子在运动，右边没有，用户可以点击移除隔板按钮。钟摆实验（难度三颗星）
利用html制作一个动能与重力势能相互转化的实验，一根绳子挂着一个小球，小球从高点释放，呈钟摆式的运动，能量损耗忽略不计，小球在最高处重力势能最大，动能为0，最低处重力势能最小，动能最大加入图表：
因为图表是动态变化的，这里我选择echarts
使用echarts绘制动能和重力势能的变化曲线优化图形与动画交互：
另外，这种物理类的交互效果，最适合使用p5库进行优化，p5库是一款JavaScript的框架，最合适画几何图形、做出交互动画，比Canvas效果好，有这个就可以不用Canvas了。
使用本地的p5.min.js，重新绘制界面，优化体验3D效果：
使用本地的p5库的WEBGL，将实验做成3D的效果双钟摆实验（难度四颗星）
有一些物理装置过于复杂，我们甚至都无法用文字来描述，这个时候就得绘制一些参考图给AI，但是直接上传图片的话效果是很差的，这里我推荐使用Figma做一张设计图出来
先到https://www.figma.com/ ，注册账号
获取token，在trae中添加MCP工具，填入token
在figma中绘制一张设计图，复制链接
https://www.figma.com/design/fzYtSTgvZIF4JTiYrjzVCI/Untitled?node-id=0-1&t=fxqb0g9G4u1LsFkm-1，按照设计图，实现双钟摆实验，两个绳子的一端是同一个点，另外一端分别连着不同的小球，两个小球会发生碰撞，小球的弹性系数可以调整，同时也绘制出动能与重力势能的变化气体压强探究实验（难度三颗星）
这个案例主要用于练习，让AI扮演教师或者专家，给学生提供即时的互动反馈与策略建议
顶部先讲解原理知识：
原理一：根据玻意耳定律，在温度不变时，压强 p与体积V成反比
原理二：气体的温度保持不变，意味着分子的平均动能不变，即分子的平均运动速率保持不变
原理三：当体积减小时，分子密度增大。虽然单个分子的撞击力度不变，但单位时间内撞击单位面积器壁的分子数增加，导致宏观压强增大
原理四：温度增加，分子的平均运动速度（动能）增加，使得分子对容器壁的撞击更频繁、更猛烈，从而压强增大
接下来是实验模拟部分
实验的任务要求为：请想办法增加容器内的压强。
实验装置：在一个密闭的长方形容器中，顶部是活塞，可以通过活塞的位置来改变容器的体积，在温度不变的条件下，体积越小压强越大，压强和体积的乘积是固定的。用户可以控制活塞的位置，观察压强和体积的实时变化，并使用本目录种的echarts.min.js绘制实时变化曲线。用户也可以控制温度，从而增大压强，温度增加气体分子的运动速度会增加。
如果用户操作正确，给用户讲解原理，如果用户操作错误，给出推荐的做法，并讲解原理技能训练平台
制作一个在线技能训练的平台，将之前制作的实验放入平台上就几个课例还算简单，但是如果要想长期使用，技能训练平台要做分页、搜索、目录，要具备上传、删除的功能，得有后端和数据库，比较麻烦一点，请自行尝试。
后记
如果你想让你的课例上传到公网，使所有人都可以访问，那么你需要有一台服务器，不推荐去买一台服务器实体，买来之后还得买公网IP，这个很贵，还不如到阿里云、腾讯云等第三方云服务商租用服务器，比较合适普通人，但是其实也有一定的技术门槛，需要自己搭建服务器环境、建设网站应用。
我自己建了一个网站——《海盐职教中心·编程部落》https://xiaolily.cn/ ，方便各位老师将课例上传到公网，这样大家制作的课例可以互相使用，我想创设一个共享的生态，否则全靠单打独斗，个人精力是有限的，制作这个课例我就花了好几天时间，完成一整套课例人都累死了。欢迎大家使用（学校资产，没有运营成本，所以也不能是盈利性质，永久免费，可放心使用），如需使用请联系本人QQ：532753310（彭老师）。
到这里就本案例就全部完成了，我的案例已经上传到《海盐职教中心·编程部落》https://xiaolily.cn/ ，各位可以在课例模块找到这份课例查看实际效果（不保证你看到这篇笔记的时候还在不在），或许你看到视频的时候，发现接口已经请求不了了，因为我的学生都是学计算机的，而且我还亲自上过他们的《网络安全》课程，他们最喜欢干的事情就是攻击我的网站，乐此不疲。所以各位的课例如果用了AI接口，并且发布到公网上，一定要小心，有人会发送恶意请求，忘了给大家说了，扣子API是需要充钱的，充了钱才有资源点，用户的每次请求都会根据消耗的算力才扣除资源点，如果写程序对接口请求循环一万次，资源点就被耗光了，甚至变成欠费模式。
最后，我只是一个爱分享技术的普通计算机老师，我们海盐职业教育中心信息部实力真的很强，欢迎广大优秀毕业生报考。
