欢迎光临
我们一直在努力

【OpenMAIC】技术深度解析:基于多智能体的沉浸式AI课堂

文章目录

  • OpenMAIC技术深度解析:基于多智能体的沉浸式AI课堂
    • 一、引言
    • 二、项目概述
      • 2.1 核心理念
      • 2.2 技术栈
    • 三、核心架构设计
      • 3.1 整体架构
      • 3.2 项目结构解析
    • 四、核心技术解析
      • 4.1 两阶段生成Pipeline
      • 4.2 多智能体编排(LangGraph)
      • 4.3 播放引擎
      • 4.4 动作执行引擎
    • 五、LLM Provider抽象层
      • 5.1 多模型支持
    • 六、场景类型实现
      • 6.1 幻灯片场景
      • 6.2 测验场景
      • 6.3 互动模拟场景
      • 6.4 项目式学习(PBL)
    • 七、OpenClaw集成
      • 7.1 集成架构
      • 7.2 技能配置
    • 八、部署方案
      • 8.1 本地开发
      • 8.2 Docker部署
      • 8.3 Vercel部署
    • 九、技术亮点总结
      • 9.1 创新点
      • 9.2 核心优势
    • 十、应用场景与案例
      • 10.1 典型场景
      • 10.2 使用示例
    • 十一、总结
    • 十二、快速参考

OpenMAIC技术深度解析:基于多智能体的沉浸式AI课堂

一、引言

在线教育经历了从MOOC到AI驱动的演进,但仍缺乏真正的互动性和个性化体验。**OpenMAIC(Open Multi-Agent Interactive Classroom)**由清华大学MAIC实验室开发,通过多智能体编排技术,将任何主题或文档转化为沉浸式、可互动的AI课堂体验。本文将深入解析OpenMAIC的核心技术、架构设计和实现原理。

在这里插入图片描述

二、项目概述

2.1 核心理念

OpenMAIC旨在实现"一键生成沉浸式多智能体学习体验",突破传统在线教育的局限:

#mermaid-svg-lgEk1WgctzT5x4hL{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-lgEk1WgctzT5x4hL .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-lgEk1WgctzT5x4hL .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-lgEk1WgctzT5x4hL .error-icon{fill:#552222;}#mermaid-svg-lgEk1WgctzT5x4hL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-lgEk1WgctzT5x4hL .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-lgEk1WgctzT5x4hL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-lgEk1WgctzT5x4hL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-lgEk1WgctzT5x4hL .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-lgEk1WgctzT5x4hL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-lgEk1WgctzT5x4hL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-lgEk1WgctzT5x4hL .marker{fill:#333333;stroke:#333333;}#mermaid-svg-lgEk1WgctzT5x4hL .marker.cross{stroke:#333333;}#mermaid-svg-lgEk1WgctzT5x4hL svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-lgEk1WgctzT5x4hL p{margin:0;}#mermaid-svg-lgEk1WgctzT5x4hL .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-lgEk1WgctzT5x4hL .cluster-label text{fill:#333;}#mermaid-svg-lgEk1WgctzT5x4hL .cluster-label span{color:#333;}#mermaid-svg-lgEk1WgctzT5x4hL .cluster-label span p{background-color:transparent;}#mermaid-svg-lgEk1WgctzT5x4hL .label text,#mermaid-svg-lgEk1WgctzT5x4hL span{fill:#333;color:#333;}#mermaid-svg-lgEk1WgctzT5x4hL .node rect,#mermaid-svg-lgEk1WgctzT5x4hL .node circle,#mermaid-svg-lgEk1WgctzT5x4hL .node ellipse,#mermaid-svg-lgEk1WgctzT5x4hL .node polygon,#mermaid-svg-lgEk1WgctzT5x4hL .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-lgEk1WgctzT5x4hL .rough-node .label text,#mermaid-svg-lgEk1WgctzT5x4hL .node .label text,#mermaid-svg-lgEk1WgctzT5x4hL .image-shape .label,#mermaid-svg-lgEk1WgctzT5x4hL .icon-shape .label{text-anchor:middle;}#mermaid-svg-lgEk1WgctzT5x4hL .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-lgEk1WgctzT5x4hL .rough-node .label,#mermaid-svg-lgEk1WgctzT5x4hL .node .label,#mermaid-svg-lgEk1WgctzT5x4hL .image-shape .label,#mermaid-svg-lgEk1WgctzT5x4hL .icon-shape .label{text-align:center;}#mermaid-svg-lgEk1WgctzT5x4hL .node.clickable{cursor:pointer;}#mermaid-svg-lgEk1WgctzT5x4hL .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-lgEk1WgctzT5x4hL .arrowheadPath{fill:#333333;}#mermaid-svg-lgEk1WgctzT5x4hL .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-lgEk1WgctzT5x4hL .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-lgEk1WgctzT5x4hL .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-lgEk1WgctzT5x4hL .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-lgEk1WgctzT5x4hL .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-lgEk1WgctzT5x4hL .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-lgEk1WgctzT5x4hL .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-lgEk1WgctzT5x4hL .cluster text{fill:#333;}#mermaid-svg-lgEk1WgctzT5x4hL .cluster span{color:#333;}#mermaid-svg-lgEk1WgctzT5x4hL div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-lgEk1WgctzT5x4hL .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-lgEk1WgctzT5x4hL rect.text{fill:none;stroke-width:0;}#mermaid-svg-lgEk1WgctzT5x4hL .icon-shape,#mermaid-svg-lgEk1WgctzT5x4hL .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-lgEk1WgctzT5x4hL .icon-shape p,#mermaid-svg-lgEk1WgctzT5x4hL .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-lgEk1WgctzT5x4hL .icon-shape rect,#mermaid-svg-lgEk1WgctzT5x4hL .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-lgEk1WgctzT5x4hL .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-lgEk1WgctzT5x4hL .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-lgEk1WgctzT5x4hL :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

传统在线教育

被动观看视频

固定内容路径

缺乏互动

OpenMAIC

多智能体互动

动态内容生成

实时课堂体验

核心特性:

  • 一键生成:输入主题或上传材料,AI自动构建完整课堂
  • 多智能体协同:AI教师+AI同学共同授课与讨论
  • 丰富场景类型:幻灯片、测验、互动模拟、项目式学习
  • 白板与语音:智能体可实时绘图、讲解公式、语音输出
  • 多格式导出:可编辑PPTX或交互式HTML
  • OpenClaw集成:从Feishu、Slack等20+消息应用直接生成课堂

2.2 技术栈

技术层技术选型说明
前端框架 Next.js 16 React全栈框架,App Router
UI库 shadcn/ui + Radix 高质量React组件库
状态管理 Zustand 轻量级状态管理
语言 TypeScript 类型安全
样式 Tailwind CSS 实用优先的CSS框架
智能体编排 LangGraph 多智能体状态机
LLM抽象 自定义Provider层 支持OpenAI、Anthropic、Gemini等
语音合成 多TTS提供商 可定制语音
幻灯片生成 pptxgenjs定制版 PowerPoint生成

三、核心架构设计

3.1 整体架构

OpenMAIC采用模块化分层架构:

#mermaid-svg-e6fN95tj9kIoQ5Zy{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-e6fN95tj9kIoQ5Zy .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-e6fN95tj9kIoQ5Zy .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-e6fN95tj9kIoQ5Zy .error-icon{fill:#552222;}#mermaid-svg-e6fN95tj9kIoQ5Zy .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-e6fN95tj9kIoQ5Zy .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-e6fN95tj9kIoQ5Zy .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-e6fN95tj9kIoQ5Zy .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-e6fN95tj9kIoQ5Zy .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-e6fN95tj9kIoQ5Zy .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-e6fN95tj9kIoQ5Zy .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-e6fN95tj9kIoQ5Zy .marker{fill:#333333;stroke:#333333;}#mermaid-svg-e6fN95tj9kIoQ5Zy .marker.cross{stroke:#333333;}#mermaid-svg-e6fN95tj9kIoQ5Zy svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-e6fN95tj9kIoQ5Zy p{margin:0;}#mermaid-svg-e6fN95tj9kIoQ5Zy .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-e6fN95tj9kIoQ5Zy .cluster-label text{fill:#333;}#mermaid-svg-e6fN95tj9kIoQ5Zy .cluster-label span{color:#333;}#mermaid-svg-e6fN95tj9kIoQ5Zy .cluster-label span p{background-color:transparent;}#mermaid-svg-e6fN95tj9kIoQ5Zy .label text,#mermaid-svg-e6fN95tj9kIoQ5Zy span{fill:#333;color:#333;}#mermaid-svg-e6fN95tj9kIoQ5Zy .node rect,#mermaid-svg-e6fN95tj9kIoQ5Zy .node circle,#mermaid-svg-e6fN95tj9kIoQ5Zy .node ellipse,#mermaid-svg-e6fN95tj9kIoQ5Zy .node polygon,#mermaid-svg-e6fN95tj9kIoQ5Zy .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-e6fN95tj9kIoQ5Zy .rough-node .label text,#mermaid-svg-e6fN95tj9kIoQ5Zy .node .label text,#mermaid-svg-e6fN95tj9kIoQ5Zy .image-shape .label,#mermaid-svg-e6fN95tj9kIoQ5Zy .icon-shape .label{text-anchor:middle;}#mermaid-svg-e6fN95tj9kIoQ5Zy .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-e6fN95tj9kIoQ5Zy .rough-node .label,#mermaid-svg-e6fN95tj9kIoQ5Zy .node .label,#mermaid-svg-e6fN95tj9kIoQ5Zy .image-shape .label,#mermaid-svg-e6fN95tj9kIoQ5Zy .icon-shape .label{text-align:center;}#mermaid-svg-e6fN95tj9kIoQ5Zy .node.clickable{cursor:pointer;}#mermaid-svg-e6fN95tj9kIoQ5Zy .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-e6fN95tj9kIoQ5Zy .arrowheadPath{fill:#333333;}#mermaid-svg-e6fN95tj9kIoQ5Zy .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-e6fN95tj9kIoQ5Zy .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-e6fN95tj9kIoQ5Zy .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-e6fN95tj9kIoQ5Zy .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-e6fN95tj9kIoQ5Zy .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-e6fN95tj9kIoQ5Zy .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-e6fN95tj9kIoQ5Zy .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-e6fN95tj9kIoQ5Zy .cluster text{fill:#333;}#mermaid-svg-e6fN95tj9kIoQ5Zy .cluster span{color:#333;}#mermaid-svg-e6fN95tj9kIoQ5Zy div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-e6fN95tj9kIoQ5Zy .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-e6fN95tj9kIoQ5Zy rect.text{fill:none;stroke-width:0;}#mermaid-svg-e6fN95tj9kIoQ5Zy .icon-shape,#mermaid-svg-e6fN95tj9kIoQ5Zy .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-e6fN95tj9kIoQ5Zy .icon-shape p,#mermaid-svg-e6fN95tj9kIoQ5Zy .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-e6fN95tj9kIoQ5Zy .icon-shape rect,#mermaid-svg-e6fN95tj9kIoQ5Zy .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-e6fN95tj9kIoQ5Zy .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-e6fN95tj9kIoQ5Zy .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-e6fN95tj9kIoQ5Zy :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

数据层

能力层

核心业务层

前端层

Next.js App Router

React组件

Zustand状态管理

生成Pipeline两阶段课程生成

编排层LangGraph多智能体

播放引擎状态机驱动

动作引擎28+动作类型

AI Provider抽象

TTS/ASR

媒体生成

导出引擎

存储层

PDF解析可选MinerU

3.2 项目结构解析

OpenMAIC/
├── app/ # Next.js App Router
│ ├── api/ # 服务端API路由(18个端点)
│ │ ├── generate/ # 场景生成Pipeline
│ │ ├── generate-classroom/ # 异步课堂任务提交
│ │ ├── chat/ # 多智能体讨论(SSE流式)
│ │ └── pbl/ # 项目式学习端点
│ ├── classroom/[id]/ # 课堂播放页面
│ └── page.tsx # 首页(生成输入)

├── lib/ # 核心业务逻辑
│ ├── generation/ # 两阶段课程生成Pipeline
│ ├── orchestration/ # LangGraph多智能体编排
│ ├── playback/ # 播放状态机
│ ├── action/ # 动作执行引擎
│ ├── ai/ # LLM Provider抽象
│ ├── store/ # Zustand状态存储
│ └── types/ # TypeScript类型定义

├── components/ # React UI组件
│ ├── slide-renderer/ # Canvas幻灯片渲染器
│ ├── scene-renderers/ # 测验、互动、PBL渲染器
│ └── whiteboard/ # SVG白板绘图

├── skills/ # OpenClaw技能
│ └── openmaic/ # 引导式设置和生成SOP

└── packages/ # 工作区包
├── pptxgenjs/ # 定制PowerPoint生成
└── mathml2omml/ # MathML → Office Math转换

四、核心技术解析

4.1 两阶段生成Pipeline

OpenMAIC采用智能的两阶段课程生成流程:

class TwoStageGenerationPipeline:
"""
两阶段课程生成Pipeline
"""

def __init__(self):
self.llm_provider = LLMProvider()
self.content_generator = ContentGenerator()

def generate_lesson(self, topic, materials=None):
"""
生成完整课程
"""

# 阶段1: 大纲生成
outline = self.generate_outline(topic, materials)
# 结构化课程大纲,包含学习目标、章节、要点

# 阶段2: 场景内容生成
scenes = []
for item in outline.items:
scene = self.generate_scene(item)
# 根据类型生成:幻灯片/测验/互动/PBL
scenes.append(scene)

return {
'outline': outline,
'scenes': scenes
}

def generate_outline(self, topic, materials):
"""
生成课程大纲
"""

prompt = f"""
分析主题:
{topic}
参考材料:
{materials}

生成结构化课程大纲,包含:
– 学习目标(3-5个)
– 章节划分(4-6章)
– 每章要点(2-4个)
– 建议场景类型(slide/quiz/interactive/pbl)
"""

return self.llm_provider.generate(prompt)

def generate_scene(self, outline_item):
"""
生成场景内容
"""

scene_type = outline_item.get('scene_type', 'slide')

if scene_type == 'slide':
return self.generate_slide(outline_item)
elif scene_type == 'quiz':
return self.generate_quiz(outline_item)
elif scene_type == 'interactive':
return self.generate_interactive(outline_item)
elif scene_type == 'pbl':
return self.generate_pbl(outline_item)

Pipeline优势:

  • 结构化:先规划后生成,确保逻辑连贯
  • 可扩展:易于添加新的场景类型
  • 质量可控:每阶段独立验证和调整

4.2 多智能体编排(LangGraph)

from langgraph.graph import StateGraph

class MultiAgentOrchestrator:
"""
基于LangGraph的多智能体编排器
"""

def __init__(self):
self.graph = self.build_director_graph()

def build_director_graph(self):
"""
构建导演图
"""

graph = StateGraph(AgentState)

# 添加节点
graph.add_node("teacher_agent", self.teacher_agent)
graph.add_node("student_agent_1", self.student_agent)
graph.add_node("student_agent_2", self.student_agent)
graph.add_node("discussion_coordinator", self.coordinator)

# 定义边
graph.add_edge("teacher_agent", "student_agent_1")
graph.add_edge("student_agent_1", "student_agent_2")
graph.add_edge("student_agent_2", "discussion_coordinator")
graph.add_edge("discussion_coordinator", END)

return graph.compile()

def teacher_agent(self, state: AgentState):
"""
AI教师智能体
"""

# 角色设定:专业、引导性
system_prompt = """
你是一位经验丰富的教师,负责:
– 讲授核心概念
– 回答学生问题
– 引导讨论方向
– 在白板上绘图说明
"""

action = self.decide_action(state)
# 生成动作:speech/whiteboard/slide/highlight

return {
'agent': 'teacher',
'action': action,
'content': self.generate_content(state.context)
}

def student_agent(self, state: AgentState):
"""
AI学生智能体(不同人设)
"""

# 角色1:好问型学生
# 角色2:实践型学生
# 可以有更多人设…

return {
'agent': f'student_{state.student_id}',
'action': 'question',
'content': self.generate_question(state.context)
}

智能体类型:

智能体角色功能行为特点
AI教师 核心讲解 专业、引导、白板绘图
AI同学1 提问互动 好问型,主动发起讨论
AI同学2 补充观点 实践型,分享经验
协调器 流程控制 管理讨论节奏,切换主题

4.3 播放引擎

// 播放状态机
enum PlaybackState {
Idle = 'idle',
Playing = 'playing',
Live = 'live'
}

class PlaybackEngine {
private state: PlaybackState;
private currentScene: Scene;
private agents: Agent[];

async playScene(scene: Scene) {
this.state = PlaybackState.Playing;
this.currentScene = scene;

// 遍历场景中的动作序列
for (const action of scene.actions) {
await this.executeAction(action);

// 检查用户互动
if (this.hasUserInteraction()) {
this.state = PlaybackState.Live;
await this.handleInteraction();
this.state = PlaybackState.Playing;
}
}

this.state = PlaybackState.Idle;
}

private async executeAction(action: Action) {
// 28+动作类型执行
switch (action.type) {
case 'speech':
await this.tts.speak(action.content);
break;
case 'whiteboard_draw':
await this.whiteboard.draw(action.content);
break;
case 'slide_highlight':
await this.slideRenderer.highlight(action.target);
break;
case 'laser_pointer':
await this.slideRenderer.laserPointer(action.position);
break;
// … 更多动作类型
}
}

private async handleInteraction() {
// 实时用户互动处理
const userMessage = await this.waitForUserMessage();

// 通过LangGraph路由给合适的智能体
const response = await this.orchestrator.route(
userMessage,
this.currentContext
);

await this.executeAction(response.action);
}
}

4.4 动作执行引擎

class ActionEngine {
// 28+动作类型
private actionHandlers: Map<ActionType, ActionHandler>;

constructor() {
this.actionHandlers = new Map([
['speech', new SpeechActionHandler()],
['whiteboard_draw', new WhiteboardDrawHandler()],
['whiteboard_text', new WhiteboardTextHandler()],
['whiteboard_shape', new WhiteboardShapeHandler()],
['whiteboard_chart', new WhiteboardChartHandler()],
['slide_show', new SlideShowHandler()],
['slide_highlight', new SlideHighlightHandler()],
['laser_pointer', new LaserPointerHandler()],
['spotlight', new SpotlightHandler()],
// … 更多动作类型
]);
}

async execute(action: Action): Promise<void> {
const handler = this.actionHandlers.get(action.type);

if (!handler) {
throw new Error(`Unknown action type: ${action.type}`);
}

await handler.execute(action);
}
}

五、LLM Provider抽象层

5.1 多模型支持

OpenMAIC支持多个LLM提供商:

interface LLMProvider {
name: string;
generate(prompt: string, options?: GenerateOptions): Promise<string>;
stream(prompt: string): AsyncIterable<string>;
}

class ProviderManager {
private providers: Map<string, LLMProvider>;

constructor() {
this.providers = new Map([
['openai', new OpenAIProvider()],
['anthropic', new AnthropicProvider()],
['google', new GeminiProvider()],
['deepseek', new DeepSeekProvider()],
// 支持任何OpenAI兼容API
]);
}

getProvider(name?: string): LLMProvider {
const providerName = name || this.getDefaultProvider();
const provider = this.providers.get(providerName);

if (!provider) {
throw new Error(`Provider not found: ${providerName}`);
}

return provider;
}

private getDefaultProvider(): string {
// 推荐:Gemini 3 Flash(质量与速度平衡)
// 最高质量:Gemini 3.1 Pro
return 'google';
}
}

推荐模型:

  • Gemini 3 Flash:质量与速度最佳平衡
  • Gemini 3.1 Pro:最高质量(速度较慢)
  • GPT-4o:稳定可靠
  • Claude 3.5 Sonnet:长文本优秀

六、场景类型实现

6.1 幻灯片场景

class SlideSceneGenerator {
async generate(outlineItem: OutlineItem): Promise<SlideScene> {
const content = await this.llm.generate(`
为以下主题生成幻灯片内容:
${outlineItem.title}

包含:
– 标题(简洁有力)
– 要点列表(3-5个)
– 配图描述(用于图像生成)
– 动作序列(演讲者台词、高亮效果)
`);

return {
type: 'slide',
content: this.parseContent(content),
actions: this.generateActions(content),
metadata: {
duration: this.estimateDuration(content),
difficulty: outlineItem.difficulty
}
};
}
}

6.2 测验场景

class QuizSceneGenerator {
async generate(outlineItem: OutlineItem): Promise<QuizScene> {
const quiz = await this.llm.generate(`
为以下主题生成测验:
${outlineItem.title}

要求:
– 3-5道题
– 混合题型(单选/多选/简答)
– 包含正确答案和解析
– 难度适中
`);

return {
type: 'quiz',
questions: this.parseQuiz(quiz),
grading: 'auto', // AI自动评分
feedback: true // 提供反馈
};
}
}

6.3 互动模拟场景

class InteractiveSceneGenerator {
async generate(outlineItem: OutlineItem): Promise<InteractiveScene> {
const html = await this.llm.generate(`
为以下主题生成HTML互动模拟:
${outlineItem.title}

要求:
– 使用原生HTML/CSS/JavaScript
– 可视化展示概念
– 支持用户交互
– 代码简洁可维护
`);

return {
type: 'interactive',
html: html,
sandboxed: true // 沙箱环境运行
};
}
}

6.4 项目式学习(PBL)

class PBLSceneGenerator {
async generate(outlineItem: OutlineItem): Promise<PBLScene> {
const project = await this.llm.generate(`
为以下主题设计项目式学习:
${outlineItem.title}

包含:
– 项目描述
– 角色分配(学生扮演)
– 里程碑(3-5个)
– 交付物
– AI助手支持计划
`);

return {
type: 'pbl',
roles: this.parseRoles(project),
milestones: this.parseMilestones(project),
collaboration: 'ai_peers', // AI同学协作
deliverables: this.parseDeliverables(project)
};
}
}

七、OpenClaw集成

7.1 集成架构

OpenMAIC深度集成OpenClaw,实现从消息应用直接生成课堂:

#mermaid-svg-LRv9vkodDvvSM1ct{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-LRv9vkodDvvSM1ct .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-LRv9vkodDvvSM1ct .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-LRv9vkodDvvSM1ct .error-icon{fill:#552222;}#mermaid-svg-LRv9vkodDvvSM1ct .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-LRv9vkodDvvSM1ct .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-LRv9vkodDvvSM1ct .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-LRv9vkodDvvSM1ct .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-LRv9vkodDvvSM1ct .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-LRv9vkodDvvSM1ct .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-LRv9vkodDvvSM1ct .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-LRv9vkodDvvSM1ct .marker{fill:#333333;stroke:#333333;}#mermaid-svg-LRv9vkodDvvSM1ct .marker.cross{stroke:#333333;}#mermaid-svg-LRv9vkodDvvSM1ct svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-LRv9vkodDvvSM1ct p{margin:0;}#mermaid-svg-LRv9vkodDvvSM1ct .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-LRv9vkodDvvSM1ct .cluster-label text{fill:#333;}#mermaid-svg-LRv9vkodDvvSM1ct .cluster-label span{color:#333;}#mermaid-svg-LRv9vkodDvvSM1ct .cluster-label span p{background-color:transparent;}#mermaid-svg-LRv9vkodDvvSM1ct .label text,#mermaid-svg-LRv9vkodDvvSM1ct span{fill:#333;color:#333;}#mermaid-svg-LRv9vkodDvvSM1ct .node rect,#mermaid-svg-LRv9vkodDvvSM1ct .node circle,#mermaid-svg-LRv9vkodDvvSM1ct .node ellipse,#mermaid-svg-LRv9vkodDvvSM1ct .node polygon,#mermaid-svg-LRv9vkodDvvSM1ct .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-LRv9vkodDvvSM1ct .rough-node .label text,#mermaid-svg-LRv9vkodDvvSM1ct .node .label text,#mermaid-svg-LRv9vkodDvvSM1ct .image-shape .label,#mermaid-svg-LRv9vkodDvvSM1ct .icon-shape .label{text-anchor:middle;}#mermaid-svg-LRv9vkodDvvSM1ct .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-LRv9vkodDvvSM1ct .rough-node .label,#mermaid-svg-LRv9vkodDvvSM1ct .node .label,#mermaid-svg-LRv9vkodDvvSM1ct .image-shape .label,#mermaid-svg-LRv9vkodDvvSM1ct .icon-shape .label{text-align:center;}#mermaid-svg-LRv9vkodDvvSM1ct .node.clickable{cursor:pointer;}#mermaid-svg-LRv9vkodDvvSM1ct .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-LRv9vkodDvvSM1ct .arrowheadPath{fill:#333333;}#mermaid-svg-LRv9vkodDvvSM1ct .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-LRv9vkodDvvSM1ct .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-LRv9vkodDvvSM1ct .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-LRv9vkodDvvSM1ct .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-LRv9vkodDvvSM1ct .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-LRv9vkodDvvSM1ct .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-LRv9vkodDvvSM1ct .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-LRv9vkodDvvSM1ct .cluster text{fill:#333;}#mermaid-svg-LRv9vkodDvvSM1ct .cluster span{color:#333;}#mermaid-svg-LRv9vkodDvvSM1ct div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-LRv9vkodDvvSM1ct .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-LRv9vkodDvvSM1ct rect.text{fill:none;stroke-width:0;}#mermaid-svg-LRv9vkodDvvSM1ct .icon-shape,#mermaid-svg-LRv9vkodDvvSM1ct .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-LRv9vkodDvvSM1ct .icon-shape p,#mermaid-svg-LRv9vkodDvvSM1ct .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-LRv9vkodDvvSM1ct .icon-shape rect,#mermaid-svg-LRv9vkodDvvSM1ct .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-LRv9vkodDvvSM1ct .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-LRv9vkodDvvSM1ct .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-LRv9vkodDvvSM1ct :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

托管模式

自托管

Feishu/Slack/Telegram

OpenClaw智能助手

部署模式

获取访问码open.maic.chat

克隆配置启动

生成课堂

返回课堂链接

7.2 技能配置

# ~/.openclaw/skills/openmaic/SKILL.md
name: openmaic
description: 从任何主题生成互动AI课堂

triggers:
"教我.*"
"学习.*"
"生成课堂.*"

phases:
clone:
detection: auto
confirmation: true

startup:
modes:
pnpm dev
pnpm build && pnpm start
docker compose up
selection: user_choice

provider_keys:
recommendation: gemini
user_edit: true

generation:
async: true
polling: true
notification: link_ready

八、部署方案

8.1 本地开发

# 克隆项目
git clone https://github.com/THU-MAIC/OpenMAIC.git
cd OpenMAIC

# 安装依赖
pnpm install

# 配置环境变量
cp .env.example .env.local
# 编辑.env.local,添加LLM API密钥

# 启动开发服务器
pnpm dev
# 访问 http://localhost:3000

8.2 Docker部署

# docker-compose.yml
version: '3.8'

services:
openmaic:
build: .
ports:
"3000:3000"
environment:
OPENAI_API_KEY=${OPENAI_API_KEY}
ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY}
GOOGLE_API_KEY=${GOOGLE_API_KEY}
DEFAULT_MODEL=google:gemini3flashpreview
volumes:
./data:/app/data

# 配置环境变量
cp .env.example .env.local
# 编辑.env.local

# 启动服务
docker compose up –build

8.3 Vercel部署

# 1. Fork仓库
# 2. 在Vercel导入项目
# 3. 配置环境变量
# 4. 部署

环境变量配置:

# 必需:至少配置一个LLM API密钥
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...
GOOGLE_API_KEY=...

# 可选:默认模型
DEFAULT_MODEL=google:gemini-3-flash-preview

# 可选:MinerU增强文档解析
PDF_MINERU_BASE_URL=https://mineru.example.com
PDF_MINERU_API_KEY=your_api_key

九、技术亮点总结

9.1 创新点

维度传统方案OpenMAIC
内容生成 手动制作 AI两阶段自动生成
互动性 被动观看 多智能体实时互动
个性化 固定路径 动态调整适配
场景类型 单一幻灯片 4种场景类型
部署便利性 复杂配置 OpenClaw一键生成

9.2 核心优势

技术优势:

  • 基于LangGraph的成熟多智能体编排
  • 28+丰富动作类型,支持复杂交互
  • 模块化架构,易于扩展新场景
  • 完整的TypeScript类型系统

产品优势:

  • 一键生成,零门槛使用
  • 支持多种LLM,灵活选择
  • 可导出标准格式(PPTX/HTML)
  • OpenClaw集成,无缝对接消息应用

学术价值:

  • 发表于JCST(Journal of Computer Science and Technology)
  • 从MOOC到MAIC的理论创新
  • 开源AGPL-3.0,推动社区发展

十、应用场景与案例

10.1 典型场景

场景示例特点
快速学习 “30分钟Python入门” 浓缩核心知识
游戏教学 “阿瓦隆规则讲解” 互动式规则说明
金融分析 “智谱AI股价分析” 结合实时数据
论文解读 “DeepSeek论文精读” 深度技术剖析

10.2 使用示例

# 示例1:编程教学
user_input = "教我Python从零开始"
output = {
"outline": ["环境搭建", "基础语法", "数据结构", "函数编程"],
"scenes": [
{"type": "slide", "topic": "环境搭建"},
{"type": "interactive", "topic": "代码练习"},
{"type": "quiz", "topic": "语法测试"}
]
}

# 示例2:论文解读
user_input = "解读DeepSeek最新论文"
output = {
"outline": ["背景", "方法", "实验", "结论"],
"scenes": [
{"type": "slide", "content": "核心创新点"},
{"type": "interactive", "content": "架构可视化"},
{"type": "pbl", "content": "复现关键实验"}
]
}

十一、总结

OpenMAIC代表了AI驱动教育的新范式,通过多智能体编排技术,实现了从被动观看到主动互动的转变。

技术贡献:

  • 两阶段生成Pipeline确保内容质量
  • LangGraph实现复杂多智能体编排
  • 28+动作类型支持丰富交互
  • OpenClaw集成降低使用门槛

未来方向:

  • 更多场景类型支持
  • 更智能的个性化适配
  • 多语言支持扩展
  • 移动端体验优化

适用对象:

  • 教育机构:快速生成在线课程
  • 企业培训:定制化培训内容
  • 个人学习:自主学习助手
  • 内容创作者:知识变现工具

掌握OpenMAIC的技术原理,将为AI+教育领域提供强大支撑。

十二、快速参考

项目地址:

  • GitHub:https://github.com/THU-MAIC/OpenMAIC
  • 在线体验:https://open.maic.chat
  • 论文:https://jcst.ict.ac.cn/en/article/doi/10.1007/s11390-025-6000-0

技术栈:

  • Next.js 16 + React 19
  • TypeScript
  • LangGraph
  • Tailwind CSS
  • Zustand

快速启动:

# 克隆
git clone https://github.com/THU-MAIC/OpenMAIC.git
cd OpenMAIC

# 安装
pnpm install

# 配置
cp .env.example .env.local
# 添加API密钥

# 运行
pnpm dev


参考资料:

  • OpenMAIC GitHub Repository
  • “From MOOC to MAIC: Reimagine Online Teaching and Learning through LLM-driven Agents” (JCST 2026)
  • LangGraph Documentation
  • OpenClaw Documentation
  • 赞(0)
    未经允许不得转载:171主机测评 » 【OpenMAIC】技术深度解析:基于多智能体的沉浸式AI课堂
    分享到: 更多 (0)

    评论 抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址