别再囤API Key了，浏览器里藏着免费AI

如果你还在为调用 OpenAI/Claude 的 API Key 发愁——注册要海外手机号、付款要美元信用卡、按 token 计费像开盲盒——那这篇文章可能帮你把这条成本线直接砍到 0 元。海外 Web 开发圈这半年悄悄成型了一条技术路线：把 AI 引擎直接塞进浏览器，本地推理、离线可用、不花一分钱 API 费。国内几乎没人系统写过这套东西。今天一次讲清楚 4 个真实可用、官网可直接访问的工具，外加一张"什么场景选哪个"的决策图。

一、为什么"浏览器跑AI"突然能打了

两件事在 2024-2025 年交叉，让这件事从玩具变成了生产力：

1. WebGPU 在主流浏览器全面落地。Chrome、Edge 已经默认启用，Firefox、Safari 也在跟进。WebGPU 让 JavaScript 拿到了接近原生的 GPU 算力，跑矩阵乘法不再是笑话。
2. 模型小型化突飞猛进。Gemma、Qwen、Phi 这类 0.5B-4B 级别的小模型，质量已经能覆盖摘要、翻译、分类、抽取这类高频任务。一个 1B 模型量化后不到 1GB，浏览器下载缓存一次就能反复用。

两条曲线一交叉，结论就是：以前必须服务器干的推理活，现在用户的浏览器自己就能干。开发者省了 GPU 账单，用户省了隐私顾虑——数据压根不出本机。

下面 4 个工具，就是这个赛道上的四条主力路线。

二、工具一：Chrome Built-in AI（Gemini Nano）——浏览器自带的那台"免费发动机"

很多人用了十年 Chrome，不知道它里面现在出厂自带一个大模型。

• 名称：Chrome Built-in AI（核心是 Gemini Nano，Google最小的端侧模型）
• 官方文档：developer.chrome.com/docs/ai（Prompt API / Summarizer API / Translator API 等系列页面）
• 功能：Google 从 2025 年起把一组"内置 AI API"逐步推入 Chrome 稳定版。对 Chrome 扩展开发者来说，Prompt API 已经可以免费调用 Gemini Nano——不用 API Key、不用付费、不用联网（模型文件下载到本地后离线可用）。配套的还有 Summarizer API（网页/文章摘要）、Translator API、Language Detector API 等，全部走本地推理。
• 价格：0 元。没有按量计费，没有配额，用多少都是本地 GPU 在跑。
• 为什么值得关注：这是目前门槛最低的"零成本 AI 应用"发布通道。你写一个 Chrome 扩展，调用 LanguageModel.create()（Prompt API 的新接口名）就能拿到一个会话式的本地模型，做划词翻译、页面摘要、邮件润色，一秒钟变成"AI 扩展"，而且你的用户也不用配置任何东西。
• 注意事项：它对硬件有门槛——官方要求设备有足够的内存/显存和空闲磁盘（核显机器约 16GB 内存、独显约 8GB 显存、22GB 级空闲磁盘，以官方文档为准），首次使用会下载 Gemini Nano 模型文件（GB 级）。普通网页（非扩展）使用 Prompt API 目前还需要通过 Origin Trial 等机制申请，以官方文档的当前状态为准。
• 适用人群：会写一点 JavaScript 的所有人。扩展开发是最低的入门坡道。

和国内对比：国内浏览器（360、QQ、Edge 中文版）目前都没有同等的内置模型 API 暴露给开发者。也就是说，这波"浏览器即推理引擎"的红利，现阶段只有 Chrome/Edge 生态能吃到——恰好是信息差所在。

三、工具二：WebLLM——把任意开源模型塞进浏览器标签页

• 名称：WebLLM
• 官网/GitHub：github.com/mlc-ai/web-llm
• 背景：来自 MLC 社区（机器学习编译社区，TQ Chen 团队主导，与陈天奇的 TVM/MLC 生态一脉相承），这个背景保证了它不是玩具项目。
• 功能：基于 WebGPU，在浏览器里直接跑 Llama 3、Phi、Gemma、Qwen、Mistral 等开源模型的量化版本。模型权重从 HuggingFace 拉取后缓存在浏览器本地，之后完全离线推理。它既能当纯前端库用，也能放进 Web Worker 后台跑，甚至可以起一个本地推理服务供页面调用。
• 价格：开源免费（Apache 2.0 许可），推理零成本，唯一的"成本"是用户首次下载模型权重的流量。
• 为什么值得关注：Chrome 内置 AI 只能让你用 Gemini Nano，WebLLM 让你自选模型。你的用户里有中文场景重的？选 Qwen 小模型；要英文写作？选 Llama/Phi。模型即插即换，不锁死在一家供应商。
• 适用人群：想做"纯前端 AI 应用"的独立开发者——不需要后端服务器，静态托管到 Cloudflare Pages/Vercel 就能上线，边际成本为零。

一个典型初始化长这样（细节以官方 README 为准）：

import * as webllm from "@mlc-ai/web-llm";

const engine = await webllm.CreateMLCEngine("Qwen2.5-1.5B-Instruct-q4f16_1-MLC");
const reply = await engine.chat.completions.create({
  messages: [{ role: "user", content: "把这段话翻译成英文：……” }],
});

没有服务器，没有 Key，npm install 完就拥有一个端侧大模型运行时。

四、工具三：Transformers.js——不跑大模型，但"十八般小模型"样样精通

• 名称：Transformers.js（HuggingFace 官方 JS 版本）
• 官方文档：huggingface.co/docs/transformers.js，GitHub 仓库 github.com/huggingface/transformers.js
• 功能：把 HuggingFace 生态里海量 Transformer 模型直接跑在浏览器里。它不是拿来跑对话大模型的，而是干"任务级"的活：文本分类、命名实体识别、零样本分类、问答、摘要、语音识别（Whisper 也能跑）、图像分类、嵌入向量……v3 版本加入了 WebGPU 支持，性能上了一个台阶。
• 价格：开源免费，模型直接从 HuggingFace Hub 加载。
• 为什么值得关注：90% 的"AI 功能"其实不需要大模型。你要做的可能只是"判断用户评论是正面的还是负面的"——这种活一个几亿参数的小模型本地跑又快又准，何必付 API 费？海外很多独立开发者的产品里，"AI 功能"其实全是 Transformers.js 的小模型在撑。
• 适用人群：前端工程师、想给现有 Web 产品加"轻 AI 功能"的团队。配合 ONNX 社区导出的量化模型，很多任务在笔记本上延迟低于 100 毫秒。

五、工具四：MediaPipe LLM Inference API——Google 给的第二条端侧路

• 名称：MediaPipe LLM Inference API（Google AI Edge 体系）
• 官方地址：developers.google.com/ai-edge/mediapipe
• 功能：Google 官方的端侧推理方案，Web 平台可以加载 Gemma、Phi 等模型的 .task 格式包进行本地推理。和 Chrome 内置 AI 的区别是：它不依赖浏览器"出厂自带"模型，你自己打包模型、自己控制版本，适合要交付确定性体验的产品（比如教育、企业内网工具）。
• 价格：框架开源免费，模型方面 Gemma 系列权重可免费下载使用（遵守 Google 的使用条款）。
• 为什么值得关注：如果你觉得 Gemini Nano 太小、WebLLM 太"社区"，MediaPipe 是 Google 官方维护、文档齐全的中间路线，移动端（Android/iOS）和 Web 用同一套思路，代码可以平移。

六、和国内生态放在一起看

公平地说，国内端侧推理并不弱——阿里的 MNN/MNN-LLM 是非常成熟的端侧推理框架，各大手机厂商的端侧大模型也多是自研栈。但注意区别：

• MNN 面向的是 App/嵌入式（Android/iOS/嵌入式 Linux），面向 Web/浏览器 的开箱即用生态和文档，海外这套（Chrome AI + WebLLM + Transformers.js）明显更成熟；
• 对中国个人开发者来说，这套浏览器方案还有一层独特价值：绕开了支付和注册门槛。不用海外信用卡、不用囤 API Key、不用按 token 焦虑，模型文件从 HuggingFace 或国内镜像拉一次就行。

这就是典型的"价格差 + 认知差"叠加：东西是开源的、文档是公开的，但国内中文社区几乎没有成体系的实战内容。

七、一张决策图：你的场景该选哪个

flowchart TD
    A[想给产品加 AI 能力，预算为零] --> B{AI 在什么形态的产品里?}
    B -->|Chrome 扩展| C[Prompt API<br/>Gemini Nano 免费原生调用]
    B -->|普通网页 App| D{需要什么级别的任务?}
    B -->|跨端 App| E[MediaPipe LLM Inference<br/>Web/Android/iOS 一套思路]
    D -->|对话/生成类| F{模型有没有硬性偏好?}
    F -->|要用特定开源模型| G[WebLLM<br/>WebGPU 跑 Qwen/Llama/Phi]
    F -->|小模型就够| H[Transformers.js<br/>分类/抽取/嵌入/Whisper]
    C --> I[用户首次需下载模型<br/>之后离线运行]
    G --> I
    H --> I
    E --> I

八、信息差总结

九、行动指南：这个周末就能做的事

1. 今天（10 分钟）：打开 developer.chrome.com/docs/ai，按文档确认你的 Chrome 版本和硬件是否满足内置 AI 要求，跑通官方示例扩展；
2. 周六（2 小时）：clone github.com/mlc-ai/web-llm，跑通官方 demo，选一个 Qwen 小模型做一个"划词摘要"网页；
3. 周日（3 小时）：把上面两个能力组合成一个真实小工具——比如"本地文章摘要器"，发布到 Chrome Web Store 或静态托管平台，作品集里就多了一个"零成本 AI 应用"。

十、参考来源

1. Chrome Built-in AI 官方文档（Prompt API / Summarizer API）：https://developer.chrome.com/docs/ai/prompt-api
2. WebLLM GitHub 仓库：https://github.com/mlc-ai/web-llm
3. Transformers.js 官方文档：https://huggingface.co/docs/transformers.js
4. MediaPipe / Google AI Edge 官网：https://developers.google.com/ai-edge/mediapipe
5. WebLLM 官方在线 Demo：https://huggingface.co/spaces/mlc-ai/WebLLM-Chat

说明：文中硬件门槛、API 可用状态等细节以官方文档最新版本为准；本次未对具体版本号做实时核验。

本文由「51学通信」技术团队出品。51学通信由通信行业18年老兵爱卫生（微信ID: gprshome201101）维护。 聚焦5G/6G核心网、3GPP标准、AI工具实战。知识星球「51学通信」提供深度技术答疑和行业洞察。

[!tip] 51学通信知识星球 星主：爱卫生（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 星球定位：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 当前规模：5200 篇主题 / 990 个回答，198 元/年。 加入福利：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 AI 加持：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。