AI 应用的稳定性，藏在模型调用前后的数据边界里

调用一次大模型接口并不难。难的是让输入可检索、输出能持续展示、重复任务可稳定复用。

我把这类 AI 应用看成三条数据处理链路：

知识：网页 → Document → chunk → 检索 → 模型回答
说到输出。字节流 → SSE 行 → JSON → delta → Vue 页面
至于流程，会议文本 → 事实 → 议题 → 行动项 → 会议纪要

它们底层的共性是：原始数据必须先被划出正确边界，才能被可靠处理。

RAG 的关键不是模型。而是 chunk

网页加载器会先从 URL 获取页面内容，再转换为 Document。之后文本分割器根据长度和分隔符将长文拆分。

const documents = await cheerioLoader.load
const splitter = new RecursiveCharacterTextSplitter({
chunkSize:,// 单次检索文本粒度
chunkOverlap:。// 上下文共享比例
separators: // 优先在中文自然语句边界切分
})
const chunks = await splitter.splitDocuments

这三个配置分别解决不同问题：

• chunkSize: 限制单次检索的文本粒度；
• separators: 优先在中文自然语句边界处切分；老实说，
• chunkOverlap: 让相邻片段共享上下文。降低语义被截断概率，

后续才是 embedding、向量库和 retriever：

Document → chunks → vectorStore → retriever → context → LLM

调试习惯：

• ① 确认加载到文档；
• ② 检查切块；
• ③ 再检查向量检索。按理说，

流式返回中，网络块不是 JSON 边界

浏览器拿到的 response.body 是 ReadableStream。每次 .read 返回的是一小段二进制数据。

const reader = response.body?.getReader
const decoder = new TextDecoder
const { value,done } = await reader?.read
const text = decoder.decode

User Pain Point #1: 网络延迟导致数据碎片化。使得前端无法一次性获得完整 JSON，从而出现解析错误。

SSE 通常发的数据格式：

data: {"choices":}
从data来看，{"choices":}
说到data，

前端需要去掉 data:,解析 JSON。并取出增量文本更新响应式状态：

const data = JSON.parse
const delta = data.choices.delta.content
content.value += delta

User Pain Point #2: 半包/粘包导致单次读取既可能只包含一部分 SSE，也可能包含多条消息，让开发者不得不写繁琐逻辑去拼接与拆行。

The core issue:

一次 reader.read ≠ 一条 SSE 消息 ≠ 一个完整 JSON

`buffer` 用来保存上一次未完成的数据，等下一次读取后再拼接：

const text = buffer + decoder.decode
const lines = text.split
buffer = lines.pop?，""

把重复工作写成 Skill。不让模型猜测答案

使用者痛点 #3:

• 缺乏可复现——每次会议纪要都依赖模型临场发挥，导致字段缺失或错误。
• 安全隐患——直接将模型密钥暴露在前端。

对策

• ① 明确触发条件与目标字段；
• ② 去噪口头禅和重复内容；
• ③ 区分决定/待确认事项/观点；
• ④ 缺失负责人/时间时留空，不补猜。
• ⑤ 固定模板输出：基本信息 / 目标 / 内容 / 行动项。
MVP 示例代码: ts function generateMinutes { const facts = dedupeFacts const topics = groupByTopic const actions = extractActions return formatTemplate } **Result** – consistent structure,no “unknown” fields.

安全建议

• No key in Vue front‑end – use .env.LATER!，store Key on your own backend.
• Your backend proxies all requests and forwards streaming responses.
Error “Payment Required” means API call reached LLM provider but quota exhausted or payment missing – not an SSE parsing bug.
Check API key and account balance before debugging network. ts // Example flow: Vue client ➜ Backend server ➜ LLM provider

1️⃣ .fromDocuments 不可直接配合 new 使用

ts new MemoryVectorStore.fromDocuments // ❌ is not a constructor

Correct usage:

ts const vectorStore = await MemoryVectorStore.fromDocuments( chunks。embeddings )

---

2️⃣ 切勿将真实模型密钥放至 Vue 前端

如果通过 VITE_ 前缀传给前端，它会出现在建立产物中，可被使用者查看请求头获取密钥。

安全链路示例这方面，

ts Vue ➜ Your backend ➜ LLM provider

---

1️⃣ 输入层 – 网页抓取是否成功？请求体是否完整，文字稿是否已上传？2️⃣ 边界层 – CSS 选择器正确？chunk 是否按预期切分？说起来，SSE 换行与JSON识别是否准确？3️⃣ 转换层 – 解码方式是否匹配？说起来，JSON.parse 是否抛错？embedding 调用方式是否符合API？4️⃣ 外部层 – API Key 是否有效？账户余额充足，所选模型名称正确且版本兼容？其实，

先检查上游。再逐步向下定位，可大幅减少排错时间。

---

RAG、流式输出和 Agent Skill 看似不同，但主要工程问题一致：将不规则原始输入转化为“清晰边界”的可处理结果。掌握 Document 切块原则、SSE 缓冲机制还有固定模板设计。你不只是调用 AI API，更是在搭建一个可靠且可维护的 AI 应用。