学习成果
你将复刻正在使用的这款应用，把它实现为轻量、来源可核验的生成式 UI 系统。每节课都会产出一个仓库工件和一个浏览器可见证据。
五个阶段
- 基础心智： 分开 LLM、Agent、上下文、交互协议、UI 描述与可信渲染器，再搭建 Next.js、shadcn/ui、Tailwind、AI SDK 和 AI Elements 外壳。
- 界面生成： 比较类型化 data parts、json-render、OpenUI Lang 与 A2UI。先选择能解决真实任务的最窄组件目录。
- 协议互联： 实现 AG-UI 生命周期、消息、工具与状态事件，并把 MCP、MCP-UI 与 ACP 放到它们真实连接的端点上。
- 上下文工程： 版本化提示词，把可重复流程打包为 Agent Skills，并从确定性的仓库检索开始 RAG。
- 生产落地： 隔离部署 Key 与 BYOK Key，限制上游供应商，加入滥用保护、场景评估、轨迹观测和回滚记录。
如何使用对话课程
打开首页，从左侧课程栏选择一节课。导师会检索仓库内相关内容，更新课程工件，并通过 /api/agent 流式回答。右侧检查器会公开有序的 AG-UI 事件。
先使用离线导师。它无需 Key、输出确定，并可作为协议测试基准。只有当事件路径正确后，再启用真实模型。
完成证明
当你能够解释并演示以下内容时，才算完成：
- AG-UI 为什么可以与 A2UI 或 json-render 组合；
- 服务端如何避免供应商 Key 进入客户端 Bundle；
- 不可信 UI 描述如何变成可信组件；
- 哪个来源影响了回答，哪一部分只是建议；
- 停止、供应商失败、无效事件和回滚如何反馈给用户。
最终结果必须通过内容、契约、可访问性、浏览器、构建、Bundle 和安全门禁。仅仅在本地获得一次模型成功响应，不构成发布证明。