你以为接 AI 功能都要先调 API？今天浏览器自己带了一个

阿柯·前端架构 内容创作者 2026-09-04 15 阅读

导语部分：每个前端工程师都经历过这个场景——产品说「加个 AI 摘要功能」，你第一反应是去找 API Key、选模型、配计费。2025 年中 Chrome 悄悄把这件事变成了历史。从 Chrome 149 开始，浏览器内置了一个可以在本地运行的 AI 模型，开发者只需要调几行 JS 就能让网页直接跑推理。

核心内容：

痛点：每次接 AI 都要折腾一整套后端

传统的 AI 功能接入路线是这样的：前端 → 后端 API 代理 → 第三方 AI 服务商 → 计费系统 → 返回结果。这条链路里，前端要管 API Key 安全、后端要处理跨域和限流、团队要付月费。对一个「给文章加个摘要按钮」的需求来说，工程代价太高。

解决方案：Prompt API，浏览器原生的对话接口

Chrome 从 149 开始内置了 Gemini Nano 模型，并通过一套标准化的 JavaScript API 暴露给网页。这套 API 叫做 Prompt API，核心用法只有三行：

// 检查能力是否可用
if (await LanguageModel.canCreate()) {
  // 创建会话
  const session = await LanguageModel.create();
  // 发起对话（支持流式）
  const stream = session.promptStreaming('请把这段文字缩写成50字摘要：');
  for await (const chunk of stream) {
    console.log(chunk);
  }
}

对比一下传统方案：

  • 不需要 API Key，模型就在用户设备上
  • 不走网络，推理在本地完成，延迟低，隐私好
  • 不付云端费用，用户自己的算力跑自己的推理

三行核心代码背后的工程逻辑

LanguageModel.create() 创建的会话会维护对话上下文，支持多轮对话直到上下文窗口满。Session 有三个关键方法：

  1. prompt(text) / promptStreaming(text) — 发对话，支持流式返回
  2. clone() — 分叉对话，保留原会话不变
  3. destroy() — 释放资源，不用时主动清理

上下文管理也是自动的：当窗口满了，系统会逐对移除最早的对话记录直到有空间。要检测溢出，监听 contextoverflow 事件就行。

适用场景：轻量级、本地化、隐私敏感

不是所有 AI 场景都适合迁移到 Prompt API。它的强项是：

  • 文本摘要、翻译、改写（Summarizer/Writer/Translator API 有更高级抽象）
  • 基于用户输入的实时生成（不依赖网络）
  • 隐私要求高的数据处理（不离设备）

它的局限是：

  • 模型能力有限（Gemini Nano 是轻量级模型，复杂推理不如 GPT-4/Claude）
  • 设备要求较高（需要 22GB 可用存储空间，ChromeOS/Android 暂不支持）
  • 跨浏览器支持有限（目前只有 Chrome）

下一步：怎么判断你的项目能不能用

第一步：检查能力是否可用，加一个 Feature Detection 防崩溃：

const supported = await LanguageModel.canCreate();
if (!supported) {
  // 降级到传统 API 或提示用户
  console.log('当前浏览器不支持内置 AI');
}

第二步：如果是摘要/翻译场景，优先用更高层的抽象 API（Writer/Summarizer/Translator），它们在底层封装更好。

第三步：加上错误处理，特别是 QuotaExceededError（上下文满）和 abort signal（用户主动取消）。

结语：浏览器的角色正在从「显示网页的工具」变成「运行 AI 能力的平台」。这件事对前端工程师意味着：以前需要一个后端 + 一个 AI 服务商才能实现的功能，现在一二十行 JavaScript 就能搞定。

评论区

0 条评论

登录后可评论。

阿柯·前端架构 15 阅读