AI 教育内容生成与智能辅导平台（Vue）
**项目名称：**AI 教育内容生成与智能辅导平台（支持 Prompt / RAG / Multi-Agent）
**项目角色：**前端负责人（AI 应用方向）
项目背景
面向教育场景，构建集智能问答、知识库检索、任务规划与内容生成于一体的 AI 应用前端系统，提升教学内容生产与学习效率。
基于 Vue3 构建 AI 应用前端系统，落地 Prompt 工程、RAG 检索增强与 Multi-Agent 协作场景，具备完整 AI 产品化经验**。**
技术栈（Vue 版）
- Vue 3 + Composition API + TypeScript
- Vite + Pinia
- SSE / WebSocket（AI 流式输出）
- LangChain.js / OpenAI API
- React Flow（Agent 流程编排思想，Vue 类实现）
- Markdown-it / Highlight.js
核心模块拆解（直接写简历）
AI 对话与 Prompt 管理系统
设计并实现 AI 对话模块，支持 Prompt 模板化、参数化注入与多角色指令配置，提升 AI 输出稳定性与可控性。
:::color1
- System / User Prompt 分离
- Prompt 参数通过表单动态配置
- 支持 Prompt 版本切换
:::
RAG 知识库检索增强
构建基于 RAG 的知识库问答前端能力，支持文档上传、知识域管理、检索参数配置与答案溯源展示。
:::color1
- 文档上传与状态管理（待处理 / 已向量化）
- 支持 TopK、相似度阈值前端可配
- 回答结果高亮引用来源
:::
Multi-Agent 可视化协作
参与 Multi-Agent 协作模式前端实现，设计 Agent 状态流转与执行过程可视化界面。
:::color1
Agent 示例
- Planner Agent（拆解教学任务）
- Generator Agent（生成内容）
- Reviewer Agent（校验结果）
前端重点
- Agent 状态机
- Agent 执行日志流式展示
:::
AI 流式输出与交互体验
实现基于 SSE 的 AI 流式输出能力，支持实时文本渲染、中断生成与多轮上下文管理。
其他的优化点
- 使用 shallowRef / computed 优化大文本渲染
- Markdown 流式增量渲染，避免整段重绘
- 会话级缓存，减少重复 AI 请求
AI 教育内容生成与智能辅导平台(React)
主导 React AI 应用前端架构设计，落地 Prompt、RAG 与 Multi-Agent 复杂交互场景，具备 AI 产品级前端工程经验。
技术栈（React 版）
- React 18 + Hooks
- Zustand
- Vercel AI SDK / OpenAI API
- SSE / WebSocket
- React Flow
- React Markdown / Prism
模块一：Prompt Engineering 前端体系
构建 Prompt Engineering 前端管理体系，支持 Prompt 模板配置、参数注入与上下文拼接，提升 AI 输出一致性。
React 视角亮点
- useMemo 缓存 Prompt 结构
- useCallback 控制 Prompt 生成函数稳定性
- Prompt Schema JSON 化
模块二：RAG 知识增强问答系统
实现 RAG 场景下的前端交互设计，支持知识库管理、检索参数配置与 AI 回答可解释性展示。
加分点
- 支持多知识域 namespace
- 引用来源点击回溯
- 命中文档片段高亮
模块三：Multi-Agent 流程编排与可视化
基于 React Flow 实现 Multi-Agent 执行流程可视化，支持 Agent 节点配置、执行状态追踪与结果展示。
状态管理
- Agent 执行状态集中管理
- 支持并行 / 串行 Agent 调度展示
模块四：AI Streaming 交互体验优化
基于 SSE 实现 AI 流式渲染，支持中断、重试与多轮对话上下文控制，显著提升用户体验。
React 性能优化（高级前端必写）
- 拆分 Chat Message 组件，避免无效重渲染
- 大文本渲染使用 memo + 虚拟滚动
- 使用 useTransition 优化 AI 返回时的 UI 阻塞