Chrome 内置 AI API 实战：Prompt API 与 Summarizer API 构建零服务器智能应用

Chrome 138 正式发布了 Prompt API（也称为 Built-in AI API），将 Gemini Nano 模型直接嵌入浏览器内核，开发者无需加载任何外部模型文件、无需 GPU 服务器，就能在网页中执行文本生成、摘要、翻译等 AI 任务。根据 Chrome Platform Status 数据，Prompt API 的 Origin Trial 阶段已有超过 12,000 个域名注册使用，日均调用量突破 5000 万次。 对于构建隐私优先的开发者工具、在线编辑器和知识管理应用来说，这是继 WebGPU 之后最重要的浏览器原生能力升级。

与 Transformers.js 等第三方方案不同，Chrome 内置 AI API 完全由浏览器引擎管理——模型自动下载、自动更新、自动调度硬件资源（NPU > GPU > CPU）。你写的代码量减少了 80%，但获得了浏览器级的稳定性和安全性。 本文将从 API 架构到生产实战，带你全面掌握这套新 API。

🧠 一、Chrome 内置 AI API 全景解析

1.1 为什么需要浏览器原生 AI API？

在 Chrome 内置 AI API 出现之前，要在浏览器中运行 AI 推理，你需要：

• ❌ 加载 100MB+ 的模型文件（Transformers.js / ONNX Runtime Web）
• ❌ 自己管理 WebGPU 设备和内存分配
• ❌ 处理 WASM 多线程兼容性问题
• ❌ 应对不同浏览器的推理后端差异

Chrome 内置 AI API 把这些复杂性全部封装在浏览器内部。你只需要调用一个异步方法，就能获得一个推理会话。 这就是浏览器原生 API 的设计哲学——把复杂留给引擎，把简单留给开发者。

💡 **提示：**Chrome 内置 AI API 和 WebNN API 是两个不同层级的 API。WebNN 是底层的神经网络计算图 API（类似 ONNX Runtime），而 Prompt API 是高层的文本生成 API（类似 OpenAI Chat API）。大多数应用场景下，你应该优先使用 Prompt API。

1.2 API 家族成员一览

Chrome 内置 AI 不只是一个 API，而是一组协同工作的 API 家族：

这组 API 共享同一个底层模型（Gemini Nano），但针对不同任务做了专门优化。一个模型，多个 API，零额外下载。

1.3 能力检测与兼容性策略

在生产环境中使用这些 API，第一步永远是做能力检测：

// 检测 Chrome 内置 AI API 可用性 - 完整工具函数
async function checkBuiltInAICapabilities() {
  const capabilities = {
    prompt: false,        // Prompt API (LanguageModel)
    summarizer: false,    // Summarizer API
    writer: false,        // Writer API
    rewriter: false,      // Rewriter API
    translator: false,    // Translator API
    languageDetector: false, // Language Detector API
    modelReady: false,    // 模型是否已下载
  };

  // 检测 Prompt API
  if ('LanguageModel' in self) {
    capabilities.prompt = true;
    try {
      const availability = await LanguageModel.availability();
      capabilities.modelReady = availability === 'available';
      // availability 返回值: 'unavailable' | 'downloadable' | 'downloading' | 'available'
      console.log('Prompt API 模型状态:', availability);
    } catch (e) {
      console.warn('Prompt API 可用性检测失败:', e.message);
    }
  }

  // 检测其他 API
  capabilities.summarizer = 'Summarizer' in self;
  capabilities.writer = 'Writer' in self;
  capabilities.rewriter = 'Rewriter' in self;
  capabilities.translator = 'Translator' in self;
  capabilities.languageDetector = 'LanguageDetector' in self;

  return capabilities;
}

// 使用示例
const caps = await checkBuiltInAICapabilities();
if (caps.prompt && caps.modelReady) {
  console.log('✅ Prompt API 已就绪，可以开始推理');
} else if (caps.prompt && !caps.modelReady) {
  console.log('⏳ Prompt API 可用，但模型需要下载');
} else {
  console.log('❌ 当前浏览器不支持 Chrome 内置 AI API');
}

⚠️ **警告：**Chrome 内置 AI API 目前仅在 Chrome 138+ 桌面版可用，移动端 Chrome 和其他浏览器尚不支持。生产环境中必须提供降级方案——推荐使用 Transformers.js 作为 Fallback。

🔧 二、Prompt API 深度实战

2.1 基础用法：创建会话与文本生成

Prompt API 的核心是 LanguageModel 类，它管理着一个推理会话（Session）。会话维护对话上下文，支持多轮对话：

// Prompt API 基础用法 - 完整示例
// 创建一个 AI 会话
const session = await LanguageModel.create({
  systemPrompt: '你是一个专业的 JSON 格式化助手。用户会给你原始 JSON，你需要输出格式化后的版本，并指出可能的问题。',
  temperature: 0.3,    // 低温度 = 更确定性的输出
  topK: 40,            // Top-K 采样
});

// 单次推理（非流式）
const result = await session.prompt(
  '请格式化这个 JSON 并指出问题：{"name":"test","items":[1,2,,"a",null]}'
);
console.log(result);

// 流式推理 - 逐 token 输出
const stream = session.promptStreaming(
  '请解释 JSON 中 null 和 undefined 的区别'
);

for await (const chunk of stream) {
  // chunk 是字符串片段，每次包含新生成的文本
  process.stdout.write(chunk);
}

2.2 多轮对话与上下文管理

Prompt API 的会话会自动维护对话历史，但你需要了解 token 限制：

// 多轮对话会话管理 - 带 Token 监控
async function createSmartChatSession() {
  const session = await LanguageModel.create({
    systemPrompt: `你是一个代码审查助手。规则：
    1. 只审查 JavaScript/TypeScript 代码
    2. 按严重程度分级：🔴 严重 / 🟡 警告 / 🟢 建议
    3. 给出具体修改建议和代码示例`,
  });

  // 获取当前会话的 token 使用情况
  const usage = await session.usage;
  console.log(`已用 tokens: ${usage.tokensUsed}/${usage.tokensRemaining + usage.tokensUsed}`);

  return {
    session,

    async chat(userMessage) {
      // 检查剩余 token 空间
      const usage = await session.usage;
      const totalTokens = usage.tokensUsed + usage.tokensRemaining;
      const usedPercent = (usage.tokensUsed / totalTokens * 100).toFixed(1);

      if (usedPercent > 85) {
        // token 使用超过 85%，需要压缩上下文
        console.warn(`⚠️ Token 使用率 ${usedPercent}%，建议创建新会话`);

        // 方案 1：获取对话摘要，用摘要创建新会话
        const summary = await session.prompt(
          '请用 3 句话总结上述代码审查对话的要点'
        );

        // 创建新会话，带上历史摘要
        const newSession = await LanguageModel.create({
          systemPrompt: `你是一个代码审查助手。以下是之前的审查要点：${summary}`,
        });

        this.session = newSession;
        return newSession.prompt(userMessage);
      }

      // 正常推理
      const response = await this.session.prompt(userMessage);
      return response;
    },

    async getUsage() {
      return await session.usage;
    },
  };
}

// 使用示例
const chat = await createSmartChatSession();

// 第一轮：提交代码审查
const review1 = await chat.chat(`
  请审查这段代码：
  function fetchData(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, false);
    xhr.send();
    return JSON.parse(xhr.responseText);
  }
`);

// 第二轮：追问细节
const review2 = await chat.chat('除了同步请求，还有什么其他问题？');

// 检查 token 使用
const usage = await chat.getUsage();
console.log('Token 使用:', usage);

2.3 Prompt API 高级参数调优

Prompt API 的 create 方法支持多个关键参数，合理配置能显著提升输出质量：

// 针对不同场景的会话配置
const configs = {
  // 代码生成：低温度，确定性输出
  codeGeneration: {
    systemPrompt: '你是一个 TypeScript 专家。只输出代码，不要解释。代码必须包含类型注解。',
    temperature: 0.1,
    topK: 10,
  },

  // 创意写作：高温度，多样化输出
  creativeWriting: {
    systemPrompt: '你是一个创意写作助手。输出有趣、独特的文字。',
    temperature: 0.9,
    topK: 60,
  },

  // JSON 校验：极低温度，精确输出
  jsonValidation: {
    systemPrompt: `你是 JSON 校验助手。规则：
    1. 检查语法错误并指出位置
    2. 检查常见问题（尾逗号、单引号、注释）
    3. 输出格式：{ "valid": boolean, "errors": [], "fixed": "..." }`,
    temperature: 0.0,
    topK: 1,
  },

  // Few-shot 学习：预设示例
  fewShotTranslation: {
    systemPrompt: '将用户输入的技术术语翻译成中文，保持英文缩写不变。',
    temperature: 0.3,
    initialPrompts: [
      { role: 'user', content: 'Application Programming Interface' },
      { role: 'assistant', content: '应用程序编程接口 (API)' },
      { role: 'user', content: 'Hypertext Transfer Protocol' },
      { role: 'assistant', content: '超文本传输协议 (HTTP)' },
    ],
  },
};

// 使用 Few-shot 配置
const session = await LanguageModel.create(configs.fewShotTranslation);
const result = await session.prompt('Structured Query Language');
console.log(result); // → 结构化查询语言 (SQL)

📌 记住：temperature 设置为 0 时，输出几乎是确定性的（每次相同输入产生相同输出）。这对代码生成和数据处理场景非常重要——你不想让 AI 每次格式化 JSON 的方式都不一样。

🚀 三、Summarizer API 与多 API 协同

3.1 Summarizer API 实战

Summarizer API 是处理长文本的利器，支持多种摘要风格和长度：

// Summarizer API 完整实战 - 智能文档摘要
async function summarizeDocument(text, options = {}) {
  const {
    type = 'key-points',     // 'key-points' | 'tl;dr' | 'teaser' | 'headline'
    format = 'markdown',     // 'markdown' | 'plain-text'
    length = 'medium',       // 'short' | 'medium' | 'long'
    language = 'zh',         // 输出语言
  } = options;

  // 检查 API 可用性
  if (!('Summarizer' in self)) {
    throw new Error('Summarizer API 不可用，请使用 Chrome 138+');
  }

  // 检查是否可以跳过下载（之前已下载过）
  const availability = await Summarizer.availability();
  if (availability === 'unavailable') {
    throw new Error('当前设备不支持 Summarizer API');
  }

  // 创建 Summarizer 实例
  const summarizer = await Summarizer.create({
    type,
    format,
    length,
    sharedContext: '这是一篇技术博客文章',
  });

  // 如果模型需要下载，监听下载进度
  if (availability === 'downloadable' || availability === 'downloading') {
    summarizer.addEventListener('downloadprogress', (e) => {
      const percent = (e.loaded / e.total * 100).toFixed(1);
      console.log(`模型下载进度: ${percent}%`);
    });
    await summarizer.ready; // 等待模型就绪
  }

  // 生成摘要（支持流式）
  if (options.stream) {
    const stream = summarizer.summarizeStreaming(text);
    let result = '';
    for await (const chunk of stream) {
      result += chunk;
      // 实时更新 UI
      if (options.onChunk) options.onChunk(chunk, result);
    }
    return result;
  }

  // 非流式摘要
  return await summarizer.summarize(text);
}

// 使用示例：会议纪要生成
const article = `
  2026 年，WebAssembly 的应用场景已经远超最初的设想。
  从服务端的 Wasm 运行时（Wasmtime、WasmEdge）到浏览器中的
  多媒体处理（FFmpeg.wasm），从区块链智能合约到 IoT 设备上的
  轻量级计算，Wasm 正在成为真正的通用字节码格式。
  Component Model 提案的推进让不同语言编写的 Wasm 模块
  可以无缝互操作，这是 Wasm 生态走向成熟的关键一步...
`;

// 基础摘要
const summary = await summarizeDocument(article, {
  type: 'key-points',
  length: 'short',
});
console.log('关键要点:', summary);

// 流式摘要（带实时回调）
await summarizeDocument(article, {
  type: 'tl;dr',
  length: 'medium',
  stream: true,
  onChunk: (chunk, full) => {
    document.getElementById('summary-output').textContent = full;
  },
});

3.2 多 API 协同：构建完整的文档处理管线

在实际应用中，你需要组合多个 API 来完成复杂任务。以下是一个「文档智能处理管线」的完整实现：

// 多 API 协同 - 文档智能处理管线
class DocumentAIProcessor {
  constructor() {
    this.session = null;
    this.summarizer = null;
  }

  async init() {
    // 并行初始化多个 API
    const [sessionResult, summarizerResult] = await Promise.allSettled([
      LanguageModel.create({
        systemPrompt: '你是一个文档处理助手，擅长提取信息、翻译和改写文本。',
      }),
      Summarizer.create({
        type: 'key-points',
        format: 'plain-text',
        length: 'medium',
      }),
    ]);

    if (sessionResult.status === 'fulfilled') this.session = sessionResult.value;
    if (summarizerResult.status === 'fulfilled') this.summarizer = summarizerResult.value;

    if (!this.session) throw new Error('Prompt API 初始化失败');
    if (!this.summarizer) console.warn('⚠️ Summarizer API 不可用，摘要功能降级');
  }

  // 功能 1：智能摘要（优先用 Summarizer，降级用 Prompt API）
  async summarize(text) {
    if (this.summarizer) {
      return await this.summarizer.summarize(text);
    }
    // 降级：用 Prompt API 模拟摘要
    return await this.session.prompt(
      `请用 3-5 个要点总结以下内容：\n\n${text}`
    );
  }

  // 功能 2：关键词提取
  async extractKeywords(text, count = 5) {
    const result = await this.session.prompt(
      `从以下文本中提取 ${count} 个最重要的关键词，用逗号分隔：\n\n${text}`
    );
    return result.split(',').map(k => k.trim());
  }

  // 功能 3：文本改写（不同风格）
  async rewrite(text, style = 'professional') {
    const styleMap = {
      professional: '用专业、正式的语言改写',
      casual: '用轻松、口语化的方式改写',
      simple: '用小学生能理解的简单语言改写',
      technical: '用更精确的技术术语改写',
    };

    return await this.session.prompt(
      `${styleMap[style] || styleMap.professional}以下文本，保持核心含义不变：\n\n${text}`
    );
  }

  // 功能 4：多语言翻译
  async translate(text, targetLang = 'en') {
    const langNames = { en: '英文', zh: '中文', ja: '日文', ko: '韩文' };
    return await this.session.prompt(
      `将以下文本翻译成${langNames[targetLang] || targetLang}：\n\n${text}`
    );
  }

  // 功能 5：完整管线 - 一次调用获取所有结果
  async pipeline(text) {
    const [summary, keywords, professional] = await Promise.all([
      this.summarize(text),
      this.extractKeywords(text, 5),
      this.rewrite(text, 'professional'),
    ]);

    return { summary, keywords, professional };
  }
}

// 使用示例
const processor = new DocumentAIProcessor();
await processor.init();

const articleText = '...'; // 待处理的文章
const result = await processor.pipeline(articleText);

console.log('📋 摘要:', result.summary);
console.log('🏷️ 关键词:', result.keywords);
console.log('📝 专业版:', result.professional);

⚠️ **警告：**并行调用多个 Prompt API 会话时，Chrome 会自动排队处理，不会出现资源竞争。但同时维护太多会话会增加内存占用。建议同时不超过 3 个活跃会话，不用的会话及时调用 session.destroy() 释放资源。

💡 四、性能对比与生产部署

4.1 性能基准测试

以下是 Chrome 内置 AI API 与其他方案在典型场景下的性能对比（测试设备：MacBook Pro M3, Chrome 138）：

⚠️ 重要对比结论：Chrome 内置 AI API 的优势不在输出质量，而在开发体验和部署成本。它不需要 GPU 服务器、不需要模型文件托管、不需要 API Key 管理。对于「够用就好」的场景（文本分类、简单摘要、格式化），它是性价比最高的方案。

4.2 生产级降级策略

在真实产品中，你不能假设所有用户都用 Chrome 138+。以下是完整的降级方案：

// 生产级 AI 服务 - 自动降级方案
class UniversalAIService {
  constructor() {
    this.backend = null; // 'chrome-ai' | 'transformers' | 'api'
    this.instance = null;
  }

  async init(config = {}) {
    const { apiKey, fallbackModel } = config;

    // 优先级 1: Chrome 内置 AI
    if ('LanguageModel' in self) {
      try {
        const availability = await LanguageModel.availability();
        if (availability === 'available' || availability === 'downloadable') {
          this.instance = await LanguageModel.create({
            systemPrompt: config.systemPrompt || '你是一个有帮助的助手。',
            temperature: config.temperature ?? 0.5,
          });
          this.backend = 'chrome-ai';
          console.log('✅ 使用 Chrome 内置 AI 后端');
          return;
        }
      } catch (e) {
        console.warn('Chrome AI 初始化失败:', e.message);
      }
    }

    // 优先级 2: Transformers.js（如果已加载）
    if (typeof window !== 'undefined' && window.transformersPipeline) {
      try {
        this.instance = await window.transformersPipeline(
          'text-generation',
          fallbackModel || 'Xenova/gpt2'
        );
        this.backend = 'transformers';
        console.log('✅ 使用 Transformers.js 后端');
        return;
      } catch (e) {
        console.warn('Transformers.js 初始化失败:', e.message);
      }
    }

    // 优先级 3: 远程 API（最后降级）
    if (apiKey) {
      this.instance = { apiKey, model: config.model || 'gpt-4o-mini' };
      this.backend = 'api';
      console.log('✅ 使用远程 API 后端');
      return;
    }

    throw new Error('没有任何可用的 AI 后端');
  }

  async prompt(text) {
    switch (this.backend) {
      case 'chrome-ai':
        return await this.instance.prompt(text);

      case 'transformers':
        const output = await this.instance(text, { max_new_tokens: 512 });
        return output[0].generated_text;

      case 'api':
        const response = await fetch('https://api.openai.com/v1/chat/completions', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${this.instance.apiKey}`,
          },
          body: JSON.stringify({
            model: this.instance.model,
            messages: [{ role: 'user', content: text }],
            max_tokens: 512,
          }),
        });
        const data = await response.json();
        return data.choices[0].message.content;

      default:
        throw new Error('AI 服务未初始化');
    }
  }

  getBackend() {
    return this.backend;
  }

  async destroy() {
    if (this.backend === 'chrome-ai' && this.instance?.destroy) {
      this.instance.destroy();
    }
    this.instance = null;
    this.backend = null;
  }
}

// 使用示例 - 零配置自动降级
const ai = new UniversalAIService();
await ai.init({
  systemPrompt: '你是 JSON 格式化助手，输出美化后的 JSON。',
  apiKey: localStorage.getItem('openai-key'), // 可选
});

console.log('当前后端:', ai.getBackend());

const formatted = await ai.prompt(
  '请美化这个 JSON: {"users":[{"name":"Alice","age":30},{"name":"Bob","age":25}]}'
);
console.log(formatted);

4.3 避坑指南与最佳实践

在实际项目中使用 Chrome 内置 AI API，以下是必须注意的关键点：

✅ 推荐做法：

• 始终做能力检测，不要假设 API 存在
• 使用 session.usage 监控 token 用量，避免会话溢出
• 为 systemPrompt 提供清晰、具体的指令，减少幻觉
• 用流式 API (promptStreaming) 提升用户感知速度
• 不用的会话及时 destroy() 释放内存

❌ 避免做法：

• ❌ 不要在一个页面创建超过 5 个并发会话（内存压力）
• ❌ 不要在 systemPrompt 中放敏感信息（虽然数据不出浏览器，但调试工具可见）
• ❌ 不要用 temperature: 0 做创意类任务（输出会很死板）
• ❌ 不要忽略 availability 检查（模型可能正在下载中）
• ❌ 不要假设移动端 Chrome 支持（2026 年中仍仅限桌面端）

⚠️ 已知限制：

• Gemini Nano 是小模型，复杂推理能力有限，不要期望达到 GPT-4 级别
• 模型首次下载需要 5-15 秒，需要给用户进度反馈
• initialPrompts 的 token 也计入上下文窗口，合理控制示例数量
• 不支持图片/音频等多模态输入，纯文本场景使用

📊 五、实际应用场景

5.1 场景一：在线 JSON 编辑器的智能助手

对于 jsjson.com 这样的开发者工具网站，Chrome 内置 AI API 是理想选择——零服务器成本、隐私安全、即时响应：

// 在线 JSON 编辑器的 AI 助手集成
class JSONAIAssistant {
  constructor() {
    this.session = null;
  }

  async init() {
    if (!('LanguageModel' in self)) return false;

    this.session = await LanguageModel.create({
      systemPrompt: `你是 JSON 专家。规则：
      1. 输出必须是合法的 JSON
      2. 给出修改建议时，同时提供修改后的完整 JSON
      3. 如果用户给的不是 JSON，先尝试解析意图`,
      temperature: 0.1,
    });
    return true;
  }

  // 功能：JSON 修复
  async fixJSON(brokenJson) {
    return await this.session.prompt(
      `请修复以下 JSON 中的错误，只输出修复后的 JSON，不要解释：\n${brokenJson}`
    );
  }

  // 功能：JSON 转 TypeScript 类型
  async jsonToTypeScript(json, interfaceName = 'RootType') {
    return await this.session.prompt(
      `将以下 JSON 转换为 TypeScript interface，名称为 ${interfaceName}：\n${json}`
    );
  }

  // 功能：JSON 路径查询建议
  async suggestJsonPath(json, description) {
    return await this.session.prompt(
      `给定以下 JSON 结构，写出能获取"${description}"的 JSONPath 表达式：\n${json}`
    );
  }
}

// 使用
const assistant = new JSONAIAssistant();
if (await assistant.init()) {
  // 修复损坏的 JSON
  const fixed = await assistant.jsonToTypeScript(
    '{"name":"Alice","scores":[95,87,92],"address":{"city":"Beijing","zip":"100000"}}',
    'UserProfile'
  );
  console.log(fixed);
}

这个例子展示了 Chrome 内置 AI API 最适合的场景：低延迟、隐私敏感、零成本的客户端智能辅助。不需要 API Key，不需要服务器，用户打开浏览器就能用。

🎯 总结

Chrome 内置 AI API 代表了浏览器 AI 的新范式——从「开发者自己加载模型」到「浏览器原生提供 AI 能力」。虽然当前 Gemini Nano 的推理能力还无法与 GPT-4 级别的大模型相比，但它在开发体验、部署成本和隐私保护上的优势是其他方案无法比拟的。

选型建议：

• 🔵 选 Chrome 内置 AI API：简单 NLP 任务、隐私敏感场景、零服务器预算、开发者工具
• 🟢 选 Transformers.js：需要特定模型、需要跨浏览器支持、需要更高质量输出
• 🟡 选远程 API：需要最强推理能力、多模态输入、长文本生成

随着 Chrome 内置 AI API 的持续迭代（2026 年底预计支持多模态输入和更长上下文窗口），它将成为 Web 开发者工具箱中的标配能力。建议现在就开始实验，积累 Prompt 工程经验，等 API 全面铺开时你就能领先一步。

⚡ **关键结论：**Chrome 内置 AI API 不是要替代 OpenAI/Anthropic 的云端大模型，而是在「够用就好」的场景下提供零成本、零延迟、零隐私风险的本地 AI 能力。作为开发者工具的增强层，它是最具性价比的选择。