用前端视角理解大语言模型

前端开发者的 AI 进阶之路

  1. 01. AI 入门：前端开发者的第一课 👈 当前
  2. 02. 调用大模型 API：从 fetch 到流式响应
  3. 03. Prompt 工程：让 AI 听懂你的话
  4. 04. Embedding 与向量：把文字变成数字
  5. 05. RAG：让 AI 回答你的专属数据
  6. 06. Function Calling：让 AI 调用你的 API
  7. 07. Agent 入门：从对话到自主行动
  8. 08. MCP 协议：Agent 的通用接口
  9. 09. 构建你的第一个 AI 聊天应用
  10. 10. 进阶方向：多模态、本地部署与成本优化
  11. 番外 1. LLM 简史：从 Transformer 到今天
  12. 番外 2. API 参数全解：temperature 到 logprobs
  13. 番外 3. Token 的秘密：BPE、中文更贵、怎么省
  14. 番外 4. 上下文窗口进化史：KV Cache 与长上下文
  15. 番外 5. 幻觉与开源崛起：LLM 的两个关键议题

写在前面

如果你是一名前端开发者，每天在 React、Vue、TypeScript 里打转，突然看到铺天盖地的"LLM""Agent""RAG"——别慌。这个系列会用你已经熟悉的语言（JS/TS、HTTP、API、JSON）一步一步拆解整个 AI 应用的全貌。

学完这个系列你会具备：

  • 调用各家大模型 API 的能力
  • 用 Prompt 工程引导模型给出想要的结果
  • 搭建一个能回答你自己数据的小型知识库（RAG）
  • 实现 Agent：让 AI 自己调用工具解决复杂问题
  • 用 React 写出带流式输出的 AI 聊天应用

什么是 LLM（大语言模型）

一句话：一个超大的、会"续写"文本的函数。

// 你可以把它想成这样一个纯函数
function llm(inputText: string): string {
 // 内部是一个几千亿参数的神经网络
 // 它的全部能力就是：给定一段文本，预测下一个最可能的词
 return continuation
}

把这个 llm 函数反复调用，把每次的输出拼回去再调用下一次，就形成了"生成一段完整回答"的效果。

所以本质上，LLM 不是在"思考"，它是在做基于海量语料训练出来的概率预测。理解这一点非常关键，能帮你避免很多错误预期。

Token：AI 世界的基本单位

LLM 不是按"字"处理文本，而是按Token。一个 Token 大约等于：

  • 英文：0.75 个单词
  • 中文：1~2 个汉字
// 粗略估算
const tokens = Math.ceil(chineseText.length * 1.5)

为什么要关心 Token？因为所有费用都按 Token 算，所有模型都有上下文窗口限制（比如 GPT-4o 是 128K Tokens，Claude 是 200K Tokens）。

可以在 OpenAI Tokenizer 在线看一段文字会被切成什么样的 Token。

主流模型速览（2026 年初）

厂商代表模型特点
OpenAIGPT-4o / GPT-4.1综合能力强，生态最成熟
AnthropicClaude Opus 4 / Sonnet 4长文本、写代码强
GoogleGemini 2.0 Pro多模态、超长上下文
DeepSeekDeepSeek-V3 / R1开源、性价比极高
阿里Qwen 系列中文好、开源

对前端开发者来说：先学用，不用深究模型原理。就像你不用懂 V8 引擎也能写 JS 一样。

AI 应用的典型分层

我画一张图你就懂了（脑补一下）：

┌─────────────────────────────────────┐
│ UI 层（React / Vue / 移动端） │ ← 你现在的位置
├─────────────────────────────────────┤
│ 应用层（Prompt / Agent / RAG） │ ← 这个系列重点讲
├─────────────────────────────────────┤
│ 模型接入层（OpenAI SDK / 自部署） │
├─────────────────────────────────────┤
│ 模型层（LLM 本身） │
└─────────────────────────────────────┘

大多数产品型 AI 应用（Cursor、Perplexity、ChatGPT 桌面版……）都在上面两层做工作，模型本身是底座。前端开发者完全可以深度参与"应用层"的构建。

几个必须打破的错觉

LLM 真的理解我 —— 并没有，它只是基于训练数据做概率预测，遇到训练里没见过的东西就会编造，这就是幻觉的来源。

同样的问题得到同样的答案 —— 默认情况下有随机性（由 temperature 参数控制），相同输入也可能有不同输出。

越大的模型越好 —— 要看场景。简单分类任务用小模型又快又便宜；只有复杂推理才需要上旗舰模型。

AI 能自己联网和运行代码 —— 原生 LLM 只会生成文本。联网、调工具是靠后面要讲的 Function Calling / Agent 框架实现的。

你需要准备什么

-Node.js 20+：跑所有代码示例 -一个 API Key：建议从 DeepSeek 开始，几毛钱能跑完整个系列；想用 OpenAI 也行 -基础的 fetch / Promise / async-await 知识：你已经有了 -一点好奇心：够用

下一步

下一篇我们会立刻动手，用十几行代码调通第一个大模型 API，并实现"流式输出"（就是 ChatGPT 那种一个字一个字蹦出来的效果）。

参考资料

版权声明: 如无特别声明，本文版权归 sshipanoo 所有，转载请注明本文链接。

（采用 CC BY-NC-SA 4.0 许可协议进行授权）

本文标题:AI 入门：前端开发者的第一课

本文链接:https://www.sshipanoo.com/blog/ai/ai-for-frontend/01-AI入门/

本文最后一次更新为 天前，文章中的某些内容可能已过时！

目录