前端 + AI 学习记录（Day 11–20）：LangChain / Agent & 工程化入门

前端 + AI 学习记录（Day 11–20）：LangChain / Agent & 工程化入门

这一篇是第二阶段总结，覆盖 Day 11–20：从“能调 API”升级到“能设计链路、玩转 RAG 与 Agent，并开始做工程化”。

---

一、阶段目标：从“会用接口”到“会设计流水线”

这一段的目标很明确：

• 不再只写「单次调用」，而是学会用 LangChain/链式思维 把流程拆成多步；
• 初步掌握 RAG + Agent 的组合，开始像“设计流水线”而不是“写一坨逻辑”；
• 对工程化有意识：调试、监控、A/B、性能不再是黑箱。

---

二、Day 11–13：LangChain 基础 & Agent 初体验

• Day 11：LangChain 入门

  • 知道了 LLMChain + PromptTemplate 的基本用法：

    const chain = new LLMChain({ llm, prompt })
    const res = await chain.call({ question })
    

  • 最大收获：Prompt 不再散落在代码各处，而是被当成“模板 + 输入变量”。

• Day 12：本地模型（Ollama）接入

  • 跑通了一个本地 llama2，前端可以选择 openai 或 ollama；
  • 理解：本地模型适合隐私/成本场景，但需要更多性能调优。

• Day 13：Agent 初体验

  • 掌握了 ReAct 核心：Thought → Action → Observation → … → Final；
  • 学会让 LLM“自己决定调用哪个工具”，而不是前端/后端写死 if/else。

---

三, Day 14–15：AI 应用的工程化开端

• Day 14：A/B 测试 & 用户反馈

  • 为不同 Prompt 版本打标签（A/B/C），收集点击/满意度；
  • 知道了评估不是拍脑袋，而是要有数据 + 基准集。

• Day 15：第一个完整项目收尾

  • 第一个项目已经具备：
    • 聊天 + 流式输出；
    • 简单 RAG 文档问答；
    • 基础错误处理与简单日志；
  • 意识到：从这里开始，更多是“深度”和“质量”的提升。

---

四、Day 16–20：高级 Chain / 多 Agent / 性能优化

• Day 16：高级 Chain & Memory

  • 了解了：
    • SequentialChain / Parallel / Router 的思路；
    • 不同 Memory（Buffer / Summary）在保留上下文上的区别；
  • 把「复杂逻辑」拆成多个小 Chain，再用组合的方式拼起来。

• Day 17：多 Agent 协同

  • 模式：
    • 专家 Agent（前端专家 / 报表专家 / 文档专家）；
    • 协调者 Agent（只负责拆任务 & 分配）；
    • 流水线 Agent（Step1→Step2→Step3）；
  • 对前端来说：这些协同结果最终都可以变成「可视化的执行轨迹」。

• Day 18：实际应用场景拆解

  • 通过客服 / 代码助手 / 文档助手 / 数据分析四类场景，练习“翻译”为：
    • Prompt 模板；
    • 工具列表；
    • RAG 检索需求。

• Day 19：性能优化

  • 学会关注：
    • Token 使用（上下文截断 / Prompt 压缩）；
    • 缓存（响应缓存 / Embedding 缓存）；
    • 请求队列 & 重试（避免打爆后端）。
  • 意识到：AI 应用的性能优化 == 降本 + 提升体验的关键。

• Day 20：阶段复盘

  • 这 10 天把“单调用”扩展成了“流水线/工作流”；
  • 前端的角色从“调接口”变成了“设计产品体验 + 调试/监控工具的人”。

---

五、这一阶段对前端最重要的 3 个改变

1. 开始用 Chain/Agent 思维拆解流程
   不再写一坨 async function xxx()，而是想：“这一步是检索，那一步是分析，这一步是生成报告”。

2. 把 Prompt/工具/链路当成“可配置资源”
   模板、工具 Schema、Chain 结构都可以配置化，而不是硬编码死在逻辑里。

3. 工程化意识觉醒
   每次新功能都在问自己：

   • 怎么调试？
   • 怎么监控？
   • 怎么做简单评估？