从零开始做一个 AI Agent（附录九）UI界面详解

从零开始做一个 AI Agent：以 Java Web RAG 学习助手为例

🎯本文是一套面向技术博客专栏的完整教程。它不是只讲概念，而是以当前项目为真实案例，从一个最小后端 API 出发，逐步扩展到课程资料知识库、RAG 问答、轻量级 Agent Harness、工具注册表、执行 Trace、答案校验、学习记忆和前端工作台。
🎯用户可以上传课程课件、实验指导书、代码文件和配置文件。系统会解析资料、切块、建立检索索引；用户提交学习任务后，Agent 会判断任务类型、规划步骤、调用工具、生成回答、校验引用，并把执行过程展示给前端。

UI界面详解

目标是做一个能操作后端 Agent 的管理界面：

资料管理
学生问答
Agent 任务
Agent 历史
Agent trace
文档 chunks / embedding 状态
LLM / embedding / vector-store health

1. 前端最终效果

当前前端目录：

frontend
  index.html
  package.json
  tsconfig