前端接入 AI 的重点不是训练大模型，而是理解 LLM 能力边界，并能把 AI 能力稳定接入产品。本文整理 Transformer、Prompt、RAG、Agent 与工程化实践。

大模型基础

Transformer、Token 与 Attention

Token 是模型处理文本的基本单位，可能是字、词或词片段。Transformer 通过 Attention 建模上下文关系，让模型判断哪些 token 对当前生成更重要。

上下文窗口是模型一次能处理的 token 数量上限。超过窗口的内容不能全部被模型直接看到，需要摘要、检索或分段处理。

Embedding

Embedding 把文本、图片等内容转成向量，让语义相近的内容在向量空间里距离更近。RAG、推荐、聚类、相似搜索都常用 embedding。

与关键词搜索相比，Embedding 看语义相似而非字面匹配。比如「如何提升首屏速度」和「白屏优化方案」字面不同，但语义接近。

Prompt 与模型能力

Prompt 工程

Prompt 设计要明确角色、目标、输入、输出格式、约束和示例。Few-shot 能通过样例稳定输出风格。复杂任务可以拆成规划、执行、校验多个阶段。

要让模型输出稳定 JSON，需要明确 schema，要求只输出 JSON，使用结构化输出能力或函数调用，服务端做解析和校验，失败时重试或降级。

Function Calling 与 Tool Calling

Function Calling 让模型选择调用哪个函数并生成结构化参数。Tool Calling 更强调模型连接外部工具，比如搜索、数据库、业务接口、文件系统。

模型输出不可靠，不能直接操作数据库。必须经过权限、参数校验、审计和业务层封装。工具调用应该暴露受控能力，而不是裸 SQL 或高权限接口。

RAG 架构

Chunking、向量库与 ReRank

RAG 流程通常是文档切块、生成 embedding、写入向量库、按用户问题召回相关片段，再把片段交给模型生成答案。ReRank 可以对召回结果重新排序，提高相关性。

RAG 答错常见原因：切块不合理、召回不准、上下文不足、模型忽略证据、数据过期或提示词约束不清。要从检索和生成两端排查。

前端如何接入 RAG

前端通常负责文件上传、问题输入、流式展示、引用来源、反馈按钮和错误状态。后端负责文档解析、索引、召回、权限过滤和模型调用。

展示引用来源能增强可信度，也方便用户验证答案。对企业知识库来说，还能暴露模型答案依据，便于排查错误。

Agent 与协议

Agent、Planning 与 Memory

Agent 是能基于目标进行规划、调用工具、观察结果并继续行动的系统。Planning 负责拆任务，Memory 负责保存长期或短期上下文，但记忆必须可控、可清理。

与普通聊天机器人相比，普通聊天主要生成回答；Agent 会围绕目标规划步骤，调用工具，基于工具结果继续决策，更像一个任务执行系统。

MCP 与 A2A

MCP 可以理解为模型应用连接工具和数据源的协议化方式，让工具暴露更标准。A2A 更关注 Agent 之间的协作通信。

MCP 的价值在于降低工具接入成本，让不同模型应用用统一方式发现和调用工具，避免每个应用重复写私有集成。

AI 工程化

Streaming 与 SSE

AI 输出通常较慢，流式返回能让用户更快看到结果。SSE 适合服务端单向推送文本流；WebSocket 适合双向实时通信。

前端处理流式输出时，用 fetch 读取 ReadableStream 或使用 EventSource 接收 SSE，逐块更新 UI，同时处理取消、重试、超时和错误恢复。

Guardrails 与 Observability

Guardrails 包括输入校验、输出校验、敏感信息过滤、权限控制和人工审核。Observability 包括日志、token、延迟、成本、命中率、错误率和用户反馈。

AI 应用上线主要风险：不可控输出、越权访问、成本失控、延迟过高、无法追踪问题。工程上要有权限、审计、监控、降级和人工兜底。

代码示例

RAG 的工程链路

RAG 不是「把文档塞进 prompt」。专业链路至少包含解析、清洗、切块、向量化、索引、召回、重排、上下文拼装、生成、引用和反馈闭环。

type Chunk = {
  id: string
  docId: string
  text: string
  metadata: {
    title: string
    page?: number
    updatedAt: string
  }
}

async function answerQuestion(question: string) {
  const queryVector = await embed(question)

  const candidates = await vectorStore.search({
    vector: queryVector,
    topK: 20,
    filter: { visibleTo: currentUser.id }
  })

  const reranked = await rerank(question, candidates)
  const contexts = reranked.slice(0, 5)

  return generate({
    system: '只基于给定资料回答；资料不足就说明不足。',
    question,
    contexts
  })
}

RAG 权限不能只在前端做。索引时写入权限 metadata，召回时按用户身份过滤，生成阶段也只传入用户有权访问的片段，并记录审计日志。

Chunking 的取舍

切块太小会丢上下文，切块太大会降低召回精度并浪费 token。常见策略是按标题层级、段落、语义边界切块，并保留 overlap。

function chunkText(text: string, size = 800, overlap = 120) {
  const chunks: string[] = []
  let start = 0

  while (start < text.length) {
    const end = Math.min(start + size, text.length)
    chunks.push(text.slice(start, end))
    start = end - overlap
    if (start < 0) start = 0
    if (end === text.length) break
  }

  return chunks
}

真实场景更推荐结构化切块，比如 Markdown 按标题、PDF 按页和段落，代码按函数或类边界。

流式输出前端实现

前端处理流式输出时要关注增量解码、取消请求、错误恢复和 Markdown 渲染安全。

async function streamAnswer(question: string, onDelta: (text: string) => void) {
  const controller = new AbortController()

  const response = await fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ question }),
    signal: controller.signal,
    headers: { 'Content-Type': 'application/json' }
  })

  if (!response.body) throw new Error('No stream body')

  const reader = response.body.getReader()
  const decoder = new TextDecoder()

  while (true) {
    const { value, done } = await reader.read()
    if (done) break
    onDelta(decoder.decode(value, { stream: true }))
  }

  return () => controller.abort()
}

流式输出不能直接 innerHTML。模型输出不可信，直接插入 HTML 有 XSS 风险。应该把内容当文本处理，Markdown 渲染也要做安全过滤。

Tool Calling 的安全边界

工具调用要把模型限制在「提议调用」，真正执行由业务系统校验。

const tools = {
  getOrder: async (args: { orderId: string }, user: User) => {
    if (!/^\d+$/.test(args.orderId)) {
      throw new Error('invalid order id')
    }

    const order = await db.order.findUnique({
      where: { id: args.orderId }
    })

    if (!order || order.userId !== user.id) {
      throw new Error('forbidden')
    }

    return order
  }
}