浏览器原生 AI 来了：Web-AI-SDK 让开发者轻松上手

浏览器里的 AI 正在悄然改变开发方式

以前要在网页里加 AI 功能，基本离不开调用外部接口、处理 API Key，或者扔到云服务器上跑。现在情况变了。

Chrome、Edge 等浏览器已经开始内置 AI 能力，开发者可以直接在用户设备上跑模型，不用再把数据传来传去。但这些原生接口用起来并不简单，容易写出一堆重复代码。

Web-AI-SDK 就是为了解决这个问题。它把浏览器自带的 AI 能力包装成几块简单好用的工具，让你不用写那么多样板代码，就能直接调用。

为什么值得关注

现在的 JavaScript 项目，依赖包太多是个大问题。每个包都增加体积、引入安全隐患，还让代码更难维护。

Web-AI-SDK 采取了极简策略：零运行时依赖。它只用原生 TypeScript 写成，类型安全，但不增加任何第三方包。

目前提供五个独立的小包，你可以按需选用：

• Prompt：直接调用生成式 AI
• WebMCP：支持 Web Model Context Protocol
• Summarizer：把长内容压缩成要点
• Translator：浏览器内多语言翻译
• Detector：内容检测和分类

用哪个装哪个，不用全装。

实际开发中会遇到的几个问题

Web-AI-SDK 专门针对生产环境做了优化：

支持流式响应：AI 生成内容时，你可以一边生成一边更新界面，不用等全部结果出来。

自动管理生命周期：组件切换、页面跳转时，SDK 会自动清理资源，避免内存泄漏。

支持 AbortSignal：用户想取消操作时，可以随时中断正在进行的 AI 请求。

React 友好，但不绑定

如果你用 React，SDK 提供了对应 Hook：usePrompt、useSession、useWebMCP、useSummarizer、useTranslator、useDetector。这些 Hooks 遵循 React 规则，可以直接塞进你的组件。

但如果你用 Vue、Svelte 或纯 JavaScript，核心 API 一样可以工作。SDK 没有强制你绑定某个框架。

当前支持情况

Web-AI-SDK 目前主要支持 Chrome 和 Edge 138 及以上版本，且需要开启实验性 AI 标志。属于早期阶段，但随着浏览器标准逐步成熟，支持范围会越来越广。

项目有详细的支持矩阵，你可以随时查看哪些功能在哪些浏览器可用。

如何开始

装一个全量包就行：

npm i @web-ai-sdk/all

或者只装你需要的功能：

npm i @web-ai-sdk/prompt @web-ai-sdk/translator

不需要额外配置，也不用管理 API Key。

为什么这很重要

Web-AI-SDK 真正意义在于把 AI 能力交给浏览器本地处理。以前只能靠云端 API 或本地部署模型，现在可以直接在用户设备上跑，既省钱又保护隐私。

对小团队来说，这意味着不用花大钱就能做智能功能。对大团队来说，也能开发出实时、隐私友好的 AI 特性。

更重要的是，它证明了好的工具不一定复杂。有时候最简单的抽象，反而最实用。

值得一试

如果你想做智能摘要、实时翻译或 AI 辅助工具，Web-AI-SDK 能帮你快速起步。建议去看看官方文档和演示案例，动手试试浏览器原生 AI 能带来什么新玩法。

未来方向很清楚：AI 不再只靠云端，而是走向本地、轻量、直接可用。