前端开发者的 AI 工程化手册

"AI 不会取代前端，但用好 AI 的前端会取代不会用的前端。"

这一栏是把 LLM 应用开发拆成前端能直接落地的实战话题。如果你日常写 Vue / React / TypeScript，又想把 AI 能力接入到产品里、做出真正能跑起来的 Chat、Agent、RAG 应用，这里整理了我自己踩过的坑和反复用得上的清单。

为什么前端要学 AI 工程化

过去两年，前端工程师的边界已经被重画过一次：

• 接口侧的变化：以前是调 RESTful，现在多了 流式接口（SSE）、长连接（WebSocket）、多轮上下文管理，传统的 axios 拦截器都不够用了。
• 渲染侧的变化：Markdown 流式渲染、代码高亮的增量更新、<think> 思考过程的折叠、引用来源的内联标注，全是前端要解决的问题。
• 交互侧的变化：Agent 的"跑了什么工具/在等什么"需要可视化，MCP 协议 让前端可以反过来给 LLM 提供工具，这是新的前端架构面。
• 基建侧的变化：Prompt 也是工程产物，需要版本管理、灰度、A/B、监控、回放——这些前端早就有成熟方案。

简单说：AI 时代的前端，不只是"画 Chat 框"，而是接入、调试、可视化、产品化整条链路。

内容结构

全部按"前端开发者最容易卡住的地方"切片，可以从任意一节切入。

1. LLM 应用基础

• OpenAI / Anthropic / DeepSeek API 调用对比 —— 三家接口的字段差异、流式协议、重试与超时策略。
• Prompt 工程的工程化最佳实践 —— 把 Prompt 当代码管：模板、变量、版本、A/B、灰度、监控。

2. 前端落地实战

• 流式渲染：SSE / WebSocket 在 Chat UI 里的实现 —— ReadableStream、EventSource 的正确姿势，以及 cancel、AbortController 的踩坑。
• Markdown 流式渲染 + 代码高亮的踩坑 —— 流式增量、不闪烁、不卡顿、代码块按片段高亮。
• 前端 RAG：把文档检索接到聊天页 —— 浏览器端嵌入、向量检索、引用来源 UI 的最小可运行版本。

3. Agent 与协议

• MCP 协议入门：让 LLM 用上你的工具 —— Model Context Protocol 的原理、实现一个 MCP Server、前端如何复用。
• Function Calling vs Tool Use 实战对比 —— OpenAI、Anthropic 两套 Tool 调用模型的差异和迁移成本。

4. 本地与浏览器内推理

• Ollama 本地起一个开发助手 —— 在自己的笔记本上跑 Llama / Qwen / DeepSeek，配合 VS Code。
• transformers.js：在浏览器里跑模型 —— 隐私场景下，把小模型推到客户端跑。

5. AI 编码工具

• Cursor / Claude Code / Copilot 实战对比 —— 三个工具的真实使用差异、什么场景用哪个、如何把 Cursor Rules 写到位。

持续更新

这个板块会持续更新，节奏是 每周一篇 起步。你可以：

• ⭐ Star 仓库 webEngineerWong/vite-blog 跟进更新；
• 📝 在 掘金 关注我；
• 💬 通过页脚的 QQ 或评论区告诉我"哪一节最想看"，我会优先排期。

这里只写"我自己跑通过 + 在生产里用过"的内容，不堆砌没验证过的东西。