小白也能做AI产品？我用 MateChat 给学生做了一个会"拍照解题 + 分步教学"的AI智能老师
前言
在 K12 与职业教育领域，"拍照搜题"早已成为学生学习的刚需。然而，多数现有产品仅提供答案或简单解析，缺乏引导式教学、错因分析与知识关联，难以真正提升学习效果。
真正的教育智能体应具备三大能力：看懂题目、讲清思路、激发思考。
生成式 AI 的出现为智能教育带来新可能------不仅能"看图识题"，还能像老师一样分步讲解、举一反三、指出易错点。但要将这一能力落地为可用产品，开发者仍面临两大挑战：
● 如何快速搭建一个支持图片上传、多轮对话、富文本解析的交互界面？
● 如何确保 UI 体验专业、响应迅速、适配教学场景？
通过 DevUI 设计体系 与 MateChat 智能对话框架 的结合，我找到了一种完美、高效的解决方案。MateChat 负责 GenAI 交互逻辑，DevUI 提供企业级 UI 基础能力，二者协同实现"开箱即用 + 高度可定制"的教育应用开发范式。
本文将完整复盘如何通过 MateChat Cli 初始化项目，并深度集成 MateChat 模块，以及 DButton、DModal、DTheme（DevUI） 等组件，构建一个专业、流畅、可落地的在线教育智能答疑助手。
效果图预览
技术方案：MateChat + DevUI 的黄金组合
| 能力 | 技术实现 | 组件来源 |
|---|---|---|
| 对话界面 | 气泡消息流 + 输入区 + 快捷提问 | @matechat/core |
| 教学引导 | 预设 Prompt（如"继续下一步"） | McPrompt |
| 公式/图表渲染 | Markdown + LaTeX 支持 | McMarkdownCard |
| 文件上传解析 | 作业图片/附件显示 | McFileList |
| 图片预览 | Modal 弹窗展示 | DevUI Modal |
| 主题切换 | DevUI 开箱即用 | DevUI |
✅ 关键优势：MateChat 已封装好 GenAI 交互语义，DevUI 提供企业级 UI 基石，两者无缝融合。
1. 项目初始化：一键创建教育应用骨架
我们使用 CLI 工具快速启动项目：
c
npm create matechat@latest
cd matechat-tutor-assistant
npm run dev按提示输入项目名（如 matechat-tutor-assisant），选择 Vue Starter 模板。该模板已预置：
● Vue 3 + TypeScript 开发环境
● @matechat/core 核心组件库
● vue-devui 基础 UI 库
● 默认 Mock 对话逻辑
按引导步骤执行上面命令后，即可在浏览器中看到一个基础聊天界面。
✅ 优势：无需手动配置路由、状态管理、主题系统，开发者可直接聚焦业务逻辑。
2. 教育场景核心需求：从"文字问答"到"图文协同"
传统答疑机器人仅支持文本输入，但学生的真实学习行为是：
● 拍下作业本上的题目 上传
● 提 问"为什么这里要用这个公式？"
因此，我们的智能助手必须支持：
● ✅图片上传与展示
● ✅AI 对图像内容的理解
● ✅支持数学公式等内容的展示
● ✅在对话中引用已上传文件
这正是 MateChat 中 McFileList 组件 的用武之地！
（文档：https://matechat.gitcode.com/components/fileList/demo.html）。
3. 深度集成 McFileList：构建"题目上传-解析-追问"闭环
参考 McFileList 官方示例，我们将其应用于两个关键上下文：
3.1 输入框上下文：支持学生上传题目图片
在用户输入区域，我们将 McFileList 作为 McInput 的头部插槽内容：
c
<McInput v-model="inputValue" @send="handleSubmit">
<template #head>
<McFileList
:fileItems="uploadedFiles"
context="input"
@remove="removeFile"
@preview="handlePreview"
/>
</template>
</McInput>
● context="input" 模式下，每个文件右上角显示 删除按钮（✕），符合上传场景交互习惯；
● 支持拖拽、粘贴、点击上传，自动识别图片格式（PNG/JPG）；
● 文件卡片显示文件名与格式，如 数学作业.jpg。
3.2 对话气泡上下文：展示已提交的题目供后续追问
当学生发送消息后，我们将已上传的文件以更简洁的形式嵌入 AI 回复气泡中：
c
<McBubble :from="'user'">
<McFileList
:fileItems="currentMessage.files"
context="dialog"
/>
</McBubble>
● context="dialog" 模式移除删除按钮，仅保留文件信息，同时展示缩略图与文件大小；
● 用户可在后续消息中继续引用该图片作为上下文："这道题考查的知识点是什么？"
3.3 图片预览：DevUI Modal 提供全屏查看
当用户点击缩略图时，我们调用 DevUI 的模态框组件展示高清原图：
（文档：https://vue-devui.github.io/components/modal/）
c
<Modal
v-model:visible="previewModalVisible"
:title="previewFile?.name || '图片预览'"
width="800px"
>
<img
v-if="previewFile"
:src="previewFile.url"
alt="预览"
style="max-width: 100%; max-height: 80vh; object-fit: contain; display: block; margin: 0 auto;"
/>
</Modal>
✅ 利用 DevUI 的 Model 组件，和方便查看上传的题目，方便对照答案一起理解。
4. 教学能力增强：不止于"解题"
借助 MateChat 的对话能力，我们进一步强化教学属性：
4.1 公式 讲解（利用 McMarkdownCard）
AI 返回 Markdown 格式的解析：
c
<McMarkdownCard v-if="message.from === 'assistant'" :content="message.text" :mdPlugins="mdPlugins" />
通过 McMarkdownCard 结合 plugin-katex 插件自动渲染公式。
（MarkdownCard文档：https://matechat.gitcode.com/components/markDownCard/demo.html）
4.2 快捷追问引导（McPrompt）
在 AI 回复下方添加 McPrompt 组件：
（McPrompt文档：https://matechat.gitcode.com/components/prompt/demo.html）
c
const promptList = [
{
value: 're-explain',
label: '重新讲解一遍',
desc: '重新详细讲解解题过程'
},
{
value: 'next-step',
label: '继续下一步',
desc: '继续讲解下一步骤'
},
{
value: 'related-knowledge',
label: '相关知识点',
desc: '了解相关数学知识点'
}
]
<McPrompt
:list="promptList"
:direction="'horizontal'"
:variant="'bordered'"
@click="handlePromptClick"
/>
可直接进行重新讲解或继续下一步，降低学生追问门槛，促进深度学习。
5 . 技术架构优势：MateChat + DevUI 协同价值
5 . 1 主题定制：DevUI DTheme 打造教育氛围
为营造专注、专业的学习环境，我们通过 DevUI 主题系统切换为浅蓝配色：
c
// src/global-config.ts
export default {
theme: 'light',
// 覆盖 DevUI Design Tokens
customTokens: {
'--devui-brand': '#3b82f6', // 主色：教育蓝
'--devui-global-bg': '#f9fafb', // 背景色柔和
'--devui-text-primary': '#1e293b'
}
};来自于同一开发团队，MateChat 和 DevUI 两者各司其职，完美结合了！
| 能力 | 提供方 | 说明 |
|---|---|---|
| 对话气泡、文件列表、快捷提示 | MateChat | 专注 GenAI 交互语义 |
| 按钮、模态框、主题、布局容器 | DevUI | 提供企业级 UI 基础设施 |
| 响应式、多主题、国际化 | 双方共建 | 开箱即用 |
这种分工使得开发者既能快速实现 AI 功能，又能保证产品级 UI 质量。
6. 效果验证与教学价值
我们在某中学试点班级部署该助手，两周内收集到以下反馈：
● 87% 的学生表示"比纯文字答疑更直观"；
● 平均单次会话包含 1.6 张图片，说明图文协同是真实需求；
● 教师认为"AI 能指出常见错误"对教学有辅助价值。
7. 结语
通过 MateChat 与 DevUI 组件，我们仅用不到两天时间，就构建了一个具备真实教学价值的智能答疑原型。它不仅解决了"如何上传题目"的技术问题，更通过上下文感知、状态管理、教育化交互，让 AI 真正扮演起"数字助教"的角色。
对于希望快速落地教育类 AI 应用的团队，MateChat 提供了一条高效、可靠、可扩展的技术路径。
8. 部署与使用指南
● 代码部署在 Gitcode 平台，这是最受开发者欢迎的国内平台，符合国内用户的使用习惯
● 完整代码详见 GitCode 仓库：https://gitcode.com/smarte/matechat-tutor-assistant.git
● 如果你觉得这个项目对你有用， 欢迎 Star 和 Fork
● 运行步骤
c
git clone https://gitcode.com/smarte/matechat-tutor-assistant.git
npm run install
npm run dev参考链接：
● DevUI 官网：https://devui.design/home
● MateChat 解决方案：https://matechat.gitcode.com/use-guide/solution.html
● McFileList 组件：https://matechat.gitcode.com/components/fileList/demo.html
● DevUI 组件文档：https://devui.design/components/overview