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

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

文章目录

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

一、引言

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

在这里插入图片描述

二、项目概述

2.1 核心理念

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

传统在线教育

被动观看视频

固定内容路径

缺乏互动

OpenMAIC

多智能体互动

动态内容生成

实时课堂体验

核心特性

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

2.2 技术栈

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

三、核心架构设计

3.1 整体架构

OpenMAIC采用模块化分层架构:

数据层

能力层

核心业务层

前端层

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采用智能的两阶段课程生成流程:

classTwoStageGenerationPipeline:""" 两阶段课程生成Pipeline """def__init__(self): self.llm_provider = LLMProvider() self.content_generator = ContentGenerator()defgenerate_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 }defgenerate_outline(self, topic, materials):""" 生成课程大纲 """ prompt =f""" 分析主题:{topic} 参考材料:{materials} 生成结构化课程大纲,包含: - 学习目标(3-5个) - 章节划分(4-6章) - 每章要点(2-4个) - 建议场景类型(slide/quiz/interactive/pbl) """return self.llm_provider.generate(prompt)defgenerate_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 classMultiAgentOrchestrator:""" 基于LangGraph的多智能体编排器 """def__init__(self): self.graph = self.build_director_graph()defbuild_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()defteacher_agent(self, state: AgentState):""" AI教师智能体 """# 角色设定:专业、引导性 system_prompt =""" 你是一位经验丰富的教师,负责: - 讲授核心概念 - 回答学生问题 - 引导讨论方向 - 在白板上绘图说明 """ action = self.decide_action(state)# 生成动作:speech/whiteboard/slide/highlightreturn{'agent':'teacher','action': action,'content': self.generate_content(state.context)}defstudent_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'}classPlaybackEngine{private state: PlaybackState;private currentScene: Scene;private agents: Agent[];asyncplayScene(scene: Scene){this.state = PlaybackState.Playing;this.currentScene = scene;// 遍历场景中的动作序列for(const action of scene.actions){awaitthis.executeAction(action);// 检查用户互动if(this.hasUserInteraction()){this.state = PlaybackState.Live;awaitthis.handleInteraction();this.state = PlaybackState.Playing;}}this.state = PlaybackState.Idle;}privateasyncexecuteAction(action: Action){// 28+动作类型执行switch(action.type){case'speech':awaitthis.tts.speak(action.content);break;case'whiteboard_draw':awaitthis.whiteboard.draw(action.content);break;case'slide_highlight':awaitthis.slideRenderer.highlight(action.target);break;case'laser_pointer':awaitthis.slideRenderer.laserPointer(action.position);break;// ... 更多动作类型}}privateasynchandleInteraction(){// 实时用户互动处理const userMessage =awaitthis.waitForUserMessage();// 通过LangGraph路由给合适的智能体const response =awaitthis.orchestrator.route( userMessage,this.currentContext );awaitthis.executeAction(response.action);}}

4.4 动作执行引擎

classActionEngine{// 28+动作类型private actionHandlers: Map<ActionType, ActionHandler>;constructor(){this.actionHandlers =newMap([['speech',newSpeechActionHandler()],['whiteboard_draw',newWhiteboardDrawHandler()],['whiteboard_text',newWhiteboardTextHandler()],['whiteboard_shape',newWhiteboardShapeHandler()],['whiteboard_chart',newWhiteboardChartHandler()],['slide_show',newSlideShowHandler()],['slide_highlight',newSlideHighlightHandler()],['laser_pointer',newLaserPointerHandler()],['spotlight',newSpotlightHandler()],// ... 更多动作类型]);}asyncexecute(action: Action):Promise<void>{const handler =this.actionHandlers.get(action.type);if(!handler){thrownewError(`Unknown action type: ${action.type}`);}await handler.execute(action);}}

五、LLM Provider抽象层

5.1 多模型支持

OpenMAIC支持多个LLM提供商:

interfaceLLMProvider{ name:string;generate(prompt:string, options?: GenerateOptions):Promise<string>;stream(prompt:string): AsyncIterable<string>;}classProviderManager{private providers: Map<string, LLMProvider>;constructor(){this.providers =newMap([['openai',newOpenAIProvider()],['anthropic',newAnthropicProvider()],['google',newGeminiProvider()],['deepseek',newDeepSeekProvider()],// 支持任何OpenAI兼容API]);}getProvider(name?:string): LLMProvider {const providerName = name ||this.getDefaultProvider();const provider =this.providers.get(providerName);if(!provider){thrownewError(`Provider not found: ${providerName}`);}return provider;}privategetDefaultProvider():string{// 推荐:Gemini 3 Flash(质量与速度平衡)// 最高质量:Gemini 3.1 Proreturn'google';}}

推荐模型

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

六、场景类型实现

6.1 幻灯片场景

classSlideSceneGenerator{asyncgenerate(outlineItem: OutlineItem):Promise<SlideScene>{const content =awaitthis.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 测验场景

classQuizSceneGenerator{asyncgenerate(outlineItem: OutlineItem):Promise<QuizScene>{const quiz =awaitthis.llm.generate(` 为以下主题生成测验:${outlineItem.title} 要求: - 3-5道题 - 混合题型(单选/多选/简答) - 包含正确答案和解析 - 难度适中 `);return{ type:'quiz', questions:this.parseQuiz(quiz), grading:'auto',// AI自动评分 feedback:true// 提供反馈};}}

6.3 互动模拟场景

classInteractiveSceneGenerator{asyncgenerate(outlineItem: OutlineItem):Promise<InteractiveScene>{const html =awaitthis.llm.generate(` 为以下主题生成HTML互动模拟:${outlineItem.title} 要求: - 使用原生HTML/CSS/JavaScript - 可视化展示概念 - 支持用户交互 - 代码简洁可维护 `);return{ type:'interactive', html: html, sandboxed:true// 沙箱环境运行};}}

6.4 项目式学习(PBL)

classPBLSceneGenerator{asyncgenerate(outlineItem: OutlineItem):Promise<PBLScene>{const project =awaitthis.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,实现从消息应用直接生成课堂:

托管模式

自托管

Feishu/Slack/Telegram

OpenClaw智能助手

部署模式

获取访问码
open.maic.chat

克隆配置启动

生成课堂

返回课堂链接

7.2 技能配置

# ~/.openclaw/skills/openmaic/SKILL.mdname: openmaic description: 从任何主题生成互动AI课堂 triggers:-"教我.*"-"学习.*"-"生成课堂.*"phases:clone:detection: auto confirmation:truestartup:modes:- pnpm dev - pnpm build && pnpm start - docker compose up selection: user_choice provider_keys:recommendation: gemini user_edit:truegeneration:async:truepolling:truenotification: link_ready 

八、部署方案

8.1 本地开发

# 克隆项目git clone https://github.com/THU-MAIC/OpenMAIC.git cd OpenMAIC # 安装依赖pnpminstall# 配置环境变量cp .env.example .env.local # 编辑.env.local,添加LLM API密钥# 启动开发服务器pnpm dev # 访问 http://localhost:3000

8.2 Docker部署

# docker-compose.ymlversion:'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:gemini-3-flash-preview 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 # 安装pnpminstall# 配置cp .env.example .env.local # 添加API密钥# 运行pnpm dev 

参考资料

  1. OpenMAIC GitHub Repository
  2. “From MOOC to MAIC: Reimagine Online Teaching and Learning through LLM-driven Agents” (JCST 2026)
  3. LangGraph Documentation
  4. OpenClaw Documentation

Read more

基于Java和高德开放平台的WebAPI集成实践-以搜索POI2.0为例

基于Java和高德开放平台的WebAPI集成实践-以搜索POI2.0为例

目录 前言 一、高德搜索API简介 1、高德开放平台 2、搜索功能介绍  3、部分API介绍 二、Uniapi集成高德API 1、API集成流程 2、访问接口的定义 3、业务调用集成 三、常见问题与优化 四、总结 前言         在当今数字化时代,地理信息系统(GIS)和位置服务(LBS)已成为许多应用程序的核心组成部分。无论是导航、物流、社交网络还是电子商务,位置数据的获取和处理都显得尤为重要。高德开放平台作为国内领先的地理信息服务提供商,提供了丰富的WebAPI接口,帮助开发者快速集成地图、导航、搜索等功能。其中,POI(Point of Interest)搜索是许多应用场景中的关键功能,它能够帮助用户快速找到附近的兴趣点,如餐馆、酒店、加油站等。         Java作为一种广泛使用的编程语言,因其跨平台性、

前端科技新闻(WTN-4)你用了免费的 Trae 编辑器吗?排队多少名?我排在1584名

前端科技新闻(WTN-4)你用了免费的 Trae 编辑器吗?排队多少名?我排在1584名

写在前面,怎么说呢?首先是为了支持国产,用于偷懒写git摘要和部分内容的代码补充还是有些效率提升的,但是plan模式,基本上没怎么完成过。可能是项目不太标准的原因,要是做已经成熟的产品副本或许更简单- 突然有了个点子,找那些收费高卖的贵的,出青春版,或许有搞头。 也是首次,发现需要排队了,哈哈哈哈哈哈哈哈哈,让我想起某些游戏,付费插队 一、技术快讯|一次普通的 i18n 任务,却排到 1500 名之后 最近在使用 Trae 编辑器(免费版) 时,遇到了一件颇具“时代特色”的小插曲。 我只是想让 AI 帮忙做一个非常常规的工程任务: * 扫描页面组件 * 提取未国际化的中文文案 * 生成 key-value * 替换为统一的 $t('xxx') 调用 * 保证多语言资源文件结构一致 点击执行后,编辑器并没有立刻开始处理,而是弹出了一条提示:

B/S 架构:现代 Web 应用的核心架构模式

前言 在当今高度互联的数字时代,Web 应用已成为企业运营、公共服务和日常生活的基础设施。无论是电商平台、在线办公系统,还是政府服务平台,其背后都依赖于一种核心的软件架构模式——B/S 架构(Browser/Server Architecture,浏览器/服务器架构)。 作为对传统 C/S 架构(Client/Server)的演进与优化,B/S 架构凭借其跨平台性、集中式维护、部署便捷性以及强大的可扩展能力,已成为现代 Web 应用开发的事实标准。 一、什么是 B/S 架构? B/S 架构(Browser/Server Architecture)是一种基于 Web 的多层客户端-服务器软件架构模型。其核心思想是: 将用户界面、业务逻辑与数据存储进行分层解耦,用户通过标准

鸿蒙webview开发中web内部网络请求访问资源跨域问题,客户端解决方案

鸿蒙webview开发中web内部网络请求访问资源跨域问题,客户端解决方案

项目场景: 在鸿蒙系统的h5混合开发过程中,我们使用web组件进行混合开发,后台并未对跨域问题进行处理,web组件内部发送网络请求出现访问资源跨域问题。 问题描述 访问资源跨域是浏览器在发送网络请求时经常遇到的问题,而鸿蒙的web组件也就相当于一个浏览器,因此在web组件内部发送,也会出现跨域问题,这种问题一般需要再后台解决,但是鸿蒙官方也有提供客户端解决跨域的方案,官网:解决Web组件本地资源跨域问题-管理Web组件的网络安全与隐私-ArkWeb(方舟Web)-应用框架 - 华为HarmonyOS开发者 原因分析: 为了提高安全性,ArkWeb内核不允许file协议或者resource协议访问URL上下文中来自跨域的请求。因此,在使用Web组件加载本地离线资源的时候,Web组件会拦截file协议和resource协议的跨域访问。可以通过方法二设置一个路径列表,再使用file协议访问该路径列表中的资源,允许跨域访问本地文件。当Web组件无法访问本地跨域资源时,开发者可以在DevTools控制台中看到类似以下报错信息: 官方解决方案描述: 在鸿蒙官网,提供了两种解决方