AI能改变什么,这或许又是一个Agent能带来巨大改变的业务逻辑,网课有多种形式常见的有如视频网课、图文网课。
网络课程从十几二十年前就开始流行,各行各业都有自己的网络课程,从中小学、职业教育、证书考试、继续教育等。但网课的制作并不容易,需要耗费大量的人力物力,视频课程还需要专门的录制设备,录制室。图文课程也需要人工将每个课程的章节、习题等手工录入或导入到网课系统。
这里只介绍可交互的图文网络课程生成Agent,通过用户上传指定的文本资料,自动生成基于该资料的网课课程。文章的末尾将提供网课智能体所生成的页面展示。
智能体描述
上传课程材料填写课程级别(初级、中级、高级)与课程名称后智能体将能够根据课程材料文本数据自动生成完整的可交互式的网络课程,每个课程都包含多个章节,章节详情可做到根据章节具体内容而生成可视化的交互学习页面。如学习页面包含可交互的组件以及图表。每个章节还会存在多种类型(选择题、判断题、填空题等)的练习题。
智能体工作主要流程:课程材料>课程信息>课程章节生成>章节详情生成>章节习题生成,具体业务流程如下图所示。

Agent结构
课程信息Agent
以课程材料、填写的课程级别等信息为上下文生成生成课程简要描述文本以及课程基本信息。
课程章节Agent
以课程材料为上下文生成课程章节,课程章节包括:章节标题、章节描述、学习时长等。
章节详情Agent
以课程材料、章节描述信息为上下文生成章节详情,章节内容会根据使用的内容使用文本、可视化图表、交互组件等展示章节内容。
章节代码检查Agent
检查上个Agent所生成的章节详情页面代码是否包含基本的运行时错误等。
章节习题Agent
以章节内容为上下文,生成章节习题,习题包括:题干、问题选项、正确答案、习题解析。

章节详情Agent实现
在这个网课智能体中,所具有看点的应该是本Agent的实现,网课的可交互页面的学习体验也依赖于此Agent。这个环节也是最有可能出错的。智能体的输入为:课程材料、章节详情、React组件。输出为根据章节内容所适配的可交互React代码。下面代码为输出的React可视化示例:
() => {
const data = [
{ name: '训练集', value: 70 },
{ name: '验证集', value: 15 },
{ name: '测试集', value: 15 }
];
return (
<div>
<Recharts.PieChart width={400} height={300}>
<Recharts.Pie
data={data}
cx="50%"
cy="50%"
labelLine={true}
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{data.map((entry, index) => (
<Recharts.Cell key={`cell-${index}`} fill={['#4e79a7', '#f28e2c', '#e15759'][index % 3]} />
))}
</Recharts.Pie>
<Recharts.Tooltip />
</Recharts.PieChart>
<p className="text-center mt-4">测试集、训练集、验证集占整个数据集的比例</p>
</div>
);}
提示词如下:
你是负责用 React + JSX 创建引人入胜的可视化讲解的智能体。
你的工作流程如下:
1. 你将从规划智能体那里收到一个主题及要点列表
2. 你需要为用户创建一个吸引人的解释/演示
## Output Format
<start of your output>
() => {
const [counter,setCounter]=React.useState(0); // by default your code has access to the React object
const increase=()=>{
setCounter(counter+1);
};
return (<>
<button onClick={increase}>+</button>
<span>{'counter : '+ counter}</span>
</>);
}
<end of your output>
重要注意事项
请仅输出我指定的组件部分,尤其不要包含:
- 代码前后的 ```jsx 标签
- <start of your output><end of your output>
- 任何关于代码的解释或包围代码的文字
你的代码会被立即解析并展示给用户,因此务必避免语法错误!!
----
风格指南:
- 你的首要任务是通过可视化讲解和交互性防止用户感到无聊。
- 在此过程中,尽量把概念讲得越清晰越好。
- 使用具体示例。
- 不要包含练习题,这tester agent的任务。
- 确保组件占满其父容器的 100%。
- 不要创建幻灯片,而是做成一整页可连续滚动的页面。
## 可用库与插件
你将可以访问若干库和插件,下面将为你提供它们的文档:
效果展示

扩展
上面所描述的智能体流程比较简单,还可以进一步完善如引入RAG、试卷、考试等功能,使其达到一个较高的可用度。
在加入RAG的支持后,可通过向量检索实现由用户自定义只生成用户所关心的课程材料中某个主题的网络课程。在完成课程生成后和配套生成整个课程的试卷,试卷可以是一套或者N套。扩充章节内容,目前章节没有细分小节或内容不够长,通常大章节都有会几个小知识点。
变革才刚刚开始,目前由于模型幻觉、成本等因素智能体现在阶段完全取代网课系统也不现实,加上目前视频生成也不是很成熟,但相信用不了多久的未来无论是图文网课或是视频网课量大量都是由AI Agent自动生成。