第一部分：整体架构鸟瞰

一句话说清楚整个流程：用户在网页上打字提问 → 前端POST请求发给后端 → 后端调用AI大模型(stream模式) → AI一块块吐数据 → 后端用SSE流推给前端 → 前端把Markdown转成HTML展示 → 用户看到"AI正在打字"的效果。

在动手之前，先搞清楚整个系统的数据流转路径。下面这张时序图展示了从用户提问到AI回答的完整过程：

大白话解释：这就像你在微信上跟朋友聊天，朋友一边想一边打字，你能看到"对方正在输入..."，然后文字一点点冒出来。AI智能体也是这个原理，不是写完整句话才发，而是想一个字发一个字。

第二部分：后端如何调用AI模型

后端是整个系统的枢纽，承担三个核心职责：接收前端请求、调用AI模型、转发流式响应。

2.1 流式请求 vs 普通请求

首先要搞清楚两种请求方式的本质区别：

2.2 调用AI的核心参数

以DeepSeek为例（兼容OpenAI API格式），关键就是一个参数：stream: true。

// 标准的流式请求参数（OpenAI格式，DeepSeek兼容）
{
  "model": "deepseek-chat",           // 模型选择
  "messages": [                        // 对话历史（含上下文）
    {"role": "system", "content": "你是一名资深前端工程师"},
    {"role": "user", "content": "什么是JavaScript闭包？"}
  ],
  "stream": true,                      // 核心！开启流式
  "temperature": 0.7,                  // 随机性(0-2)，越高越发散
  "max_tokens": 2000,                  // 最大生成长度
  "top_p": 0.9,                        // 核采样(0-1)，控制多样性
  "frequency_penalty": 0.0,            // 重复惩罚(-2到2)
  "presence_penalty": 0.0              // 主题惩罚(-2到2)
}

2.3 Prompt Engineering：让AI听话的艺术

一句话解释：Prompt就是给AI的"任务说明书"，你说得越清楚，AI干得越好。

核心技巧对比

好Prompt vs 差Prompt

// 差的Prompt（模糊、缺乏上下文）
{
  "role": "user",
  "content": "帮我优化这段代码"
}

// 好的Prompt（角色清晰、需求明确、有约束）
{
  "role": "system",
  "content": "你是一名资深前端工程师，精通React性能优化。请遵循：\n1. 指出具体问题\n2. 给出优化方案和原理\n3. 提供可运行的代码示例"
},
{
  "role": "user",
  "content": "这段React代码有性能问题，每次输入都触发全局重渲染：\n\n```jsx\nfunction App() {\n  const [text, setText] = useState('');\n  const expensiveList = items.map(...);\n  return 
...
;\n}\n```\n\n请：\n1. 分析性能瓶颈\n2. 用useMemo/useCallback优化\n3. 给出优化后代码"
}

2.4 后端如何处理AI的流式响应

AI开启stream后，返回的不是JSON对象，而是SSE格式的文本流：

// AI返回的原始流（每块以 data: 开头，双换行分隔）
data: {"choices":[{"delta":{"content":"闭"}}]}

data: {"choices":[{"delta":{"content":"包"}}]}

data: {"choices":[{"delta":{"content":"是"}}]}

data: [DONE]

后端的核心逻辑：当"管道工"，把AI的水管接到前端的水管。

关键处理步骤：

1. 逐块读取：后端收到AI的一块数据，立即往下传，不等待完整响应
2. 错误处理：AI超时/断连时，向前端发送错误标记并关闭连接
3. 背压控制：如果前端处理慢，后端需要暂停读取AI流，避免内存溢出

第三部分：后端如何推送数据给前端

后端收到AI的chunk后，需要实时推给前端。有三种技术方案可选：

3.1 三种实时推送方案对比

3.2 SSE的数据格式规范

SSE有严格的协议要求，后端必须遵守：

// 响应头（必须）
Content-Type: text/event-stream          // 告诉浏览器这是SSE流
Cache-Control: no-cache                  // 禁止缓存
Connection: keep-alive                   // 保持连接
Access-Control-Allow-Origin: *           // 跨域支持（可选）

// 数据格式（每条消息格式）
data: {"content": "你好"}                // data: 开头
                                         // 空行（双换行）表示消息结束
data: {"content": "！"}

data: [DONE]                             // 约定的结束标记

3.3 错误处理与容错机制

生产环境中，必须考虑各种异常情况：

第四部分：前端如何接收和渲染

前端要做两件核心的事：接收SSE流 + 把Markdown实时转成漂亮的HTML。

4.1 接收SSE流的两种方式

AI对话通常用POST发送消息（消息内容在body里），所以一般选fetch + ReadableStream。

4.2 Markdown转HTML的挑战

AI对话场景通常返回Markdown格式的文本（因为训练数据中技术文档多用Markdown，AI默认选择这种方式保证可读性），前端需要实时转换成HTML。

注：如果在Prompt中明确要求其他格式（如JSON），AI会按要求输出对应格式的文本。但对话展示场景通常不控制格式，让AI用默认的Markdown即可。

常用的Markdown解析库：

• marked.js：轻量快速(~20KB)，最常用，API简单
• markdown-it：功能更强，插件丰富(支持表格、脚注等)，体积稍大(~40KB)

4.3 流式渲染的核心难点

4.4 性能优化：防抖渲染

AI吐字很快，可能每隔几十毫秒就来一块数据。如果每收到一块就渲染一次，DOM操作太频繁，页面会卡。

防抖 + rAF渲染示意代码（核心思路，非完整代码）：

let buffer = "";           // 内容缓冲区
let rafId = null;          // requestAnimationFrame ID

function onReceiveChunk(chunk) {
  buffer += chunk;         // 先攒起来，不立即渲染

  // 如果还没请求渲染，就请求一次
  if (!rafId) {
    rafId = requestAnimationFrame(() => {
      // 在浏览器下一帧渲染（约16.6ms）
      const html = marked.parse(buffer);
      domElement.innerHTML = html;
      highlightCode();     // 代码高亮
      rafId = null;        // 重置标记
    });
  }
}

第五部分：核心技术点深度思考

第六部分：进阶方向（横向学习）

掌握了前面的核心技术，你已经可以做出一个能用的AI助手。下面是两个进阶方向，可以让AI更强大：

6.1 RAG（检索增强生成）

一句话解释：让AI学会你的私有数据。AI原本不知道你公司的业务，通过RAG让它先搜相关文档，再回答。

核心流程：

1. 离线阶段：把文档切成小块（如500字一块），用Embedding模型转成向量（一串数字），存到向量数据库（专门存数字、找相似数字的数据库，如Pinecone/Milvus）
2. 在线阶段：用户提问时，先把问题向量化，在数据库里搜最相似的3-5个文档块（这里的"3-5"就是Top-K，K=取前几个），把这些文档塞进Prompt，再让AI回答

6.2 MCP协议（Model Context Protocol）

一句话解释：让AI能调用外部工具的协议。像给AI装了手和脚，它可以查数据库、调API、操作文件。

MCP的三大核心概念：

• Resources：暴露资源给AI（如文件列表、数据库表结构）
• Tools：注册工具给AI使用（如查天气、发邮件、执行代码）
• Prompts：预设的提示词模板，快速启动特定任务

应用场景：

• 让AI查询数据库："帮我查一下上个月的销售额"
• 让AI调用API："给张三发一封会议通知邮件"
• 让AI操作文件："把这个报告转成PDF"
• 让AI执行代码："帮我运行这段Python脚本"

总结

做AI智能体，核心就是搞清楚数据流转的每个环节：

技术路线总结

进阶能力图谱