01. 从 FE Engineer 到 Agent Engineer
前端工程背景非常适合切入 Agent 工程。原因是 Agent 产品不是单纯的模型调用，而是一个包含交互、状态、工具、反馈、可观测性和质量迭代的完整产品系统。
能力迁移表
| FE Engineer 能力 | Agent Engineer 对应能力 |
|---|---|
| React / TypeScript | Agent app、typed tool schema、structured output、状态建模 |
| UI state / server state | Agent state、thread、memory、checkpoint |
| REST / GraphQL / SDK 集成 | Tool calling、外部系统调用、权限边界 |
| Loading / error / retry UI | Streaming、partial response、tool error recovery |
| 表单和校验 | JSON Schema、Zod、tool 参数校验、模型输出校验 |
| 前端监控 / Sentry / logs | LangSmith tracing、feedback、dashboard、alert |
| E2E / component tests | Dataset eval、regression eval、LLM-as-judge |
| 产品体验 | Human-in-the-loop、confidence UI、引用、确认步骤 |
心智模型变化
前端开发常见目标是「确定性地把状态渲染为 UI」。Agent 工程的目标更接近「在不确定模型输出上建立可控的产品系统」。
你需要从这些问题出发：
- 用户意图是否被正确理解？
- 模型是否选择了正确工具？
- 工具输入是否符合 schema？
- 工具结果是否被正确解释？
- 检索内容是否足够支撑回答？
- 如果模型不确定，产品是否有安全退路？
- 失败样例是否被记录并进入 eval？
前端优势
1. 产品体验敏感度
Agent 产品的失败经常不是崩溃，而是体验层面的不可靠：
- 等待太久但没有进度反馈
- 回答看似合理但没有证据
- 工具调用失败但 UI 没有解释
- 用户不知道 Agent 正在做什么
- Agent 越权执行了不该执行的动作
前端工程师对这些问题天然敏感，适合设计 streaming、step indicator、tool approval、feedback、fallback 等交互。
2. TypeScript 和 schema 思维
Agent 工程越来越依赖结构化边界：
- tool 输入 schema
- model structured output
- event protocol
- trace metadata
- eval result schema
这和前端工程中的 typed props、API response、form validation 非常接近。
3. 调试链路能力
前端工程师习惯看 network、console、performance、Sentry。Agent 工程里对应的是看 trace：
- 哪个 prompt 导致错误？
- 哪个 tool 被错误调用？
- 哪个 retrieval chunk 误导了模型？
- latency 卡在模型、检索还是工具？
- token 和 cost 花在哪里？
LangSmith 的价值正是在这里。
需要补齐的短板
1. 非确定性系统
传统前端 bug 往往能稳定复现；LLM 输出可能同一个输入多次不同。你需要用 dataset 和 eval 来替代「手感调 prompt」。
2. Evaluation 设计
Agent 工程的关键能力不是「写出一个 demo」，而是证明它比上一版更好。你需要学习：
- gold answer
- reference-free eval
- LLM-as-judge
- pairwise comparison
- regression dataset
- online feedback
3. RAG 和数据质量
很多 Agent 的效果瓶颈不是模型，而是上下文质量。需要理解：
- chunking
- embedding
- retrieval
- reranking
- citation
- hallucination control
- no-answer policy
4. 安全和权限
工具调用让 Agent 能影响真实系统。你需要补齐：
- prompt injection 防护
- PII redaction
- tool permission
- human approval
- audit log
- destructive action guardrail
一个实用迁移路线
第一步：从 Agent UI 开始
做一个前端页面，支持：
- streaming response
- tool call progress
- error state
- user feedback
- trace link
这个阶段不用追求复杂 Agent，重点是把 Agent 的过程显性化。
第二步：把 API 封装成工具
选择你熟悉的 API，例如 GitHub、Linear、Notion、内部服务，封装成工具：
- 明确工具名字和描述
- 定义参数 schema
- 处理错误和权限
- 输出稳定结构
参考：Anthropic: Writing effective tools for agents。
第三步：引入 LangSmith tracing
把每次请求拆成可观察链路：
- user input
- prompt
- model call
- tool call
- retrieval
- final response
- latency / cost / metadata
第四步：建立 eval
从真实失败样例开始，建立 20-50 条 dataset：
- 用户问题
- 期望行为
- 禁止行为
- 评分标准
- 失败原因分类
第五步：用 LangGraph 做 workflow
当简单 Agent loop 不够可控时，引入 graph：
- router
- planner
- worker
- evaluator
- human approval
- checkpoint