What does web-ai-sdk wrap?

web-ai-sdk wraps the Web AI surface: Prompt, Summarizer, Translator, Language Detector, Writer, Rewriter, Proofreader, and WebMCP.

Does web-ai-sdk require React?

No. Each package ships a vanilla TypeScript core by default and an optional React hook adapter under its /react subpath.

What happens when a browser does not support a Web AI API?

The wrappers feature-detect the browser APIs and fall back to no-op cleanup functions, undefined availability, or typed unavailable errors so apps can ship without browser-specific branches.

Web AI + agents, the right way

web-ai-sdk

The TypeScript SDK for the Web AI surface.Composable building blocks, no runtime deps, just lifecycle, streaming, and AbortSignals.

See the same task: 15 lines with the SDK vs 37+ with the raw APIs →

Get started → View on GitHub

runs100% on-device typesTypeScript native streamAsyncIterable licenseMIT deps0

the question

Why not just use the APIs directly?

Link to the why-not-the-raw-APIs section

You can, and nothing here stops you. The Web AI surface is the foundation.

web-ai-sdk owns the thin, repetitive lifecycle layer you would otherwise rewrite in every app: capability checks, model downloads, session reuse, streaming with chunk smoothing, AbortSignal cleanup, opt-in result caching, and feature-detected fallbacks. Drop down to the raw APIs whenever you want.

See why it's composable →

coverage

Why one package per capability.

Link to the why one package per capability section

01 One model surface.

A single text-generation model abstraction reaches exactly one of these built-ins, LanguageModel (Prompt). Useful, but one surface, not the whole product.

Prompt / LanguageModel only
Text, tools, structured output

02 Seven surfaces beyond it.

The rest carry options a text-out contract cannot hold, so each gets its own thin package.

Translator (source + target language, pair-cached sessions)
Summarizer (type and length)
Writer (tone, format, length)
Rewriter (relative tone/length shifts)
Proofreader (per-issue offsets)
Detector (confidence scores, alternates)
WebMCP (an agent surface, not a model)

packages

Composable wrappers. One philosophy.

Link to Packages section

@web-ai-sdk/prompt

Talk to the on-device language model. Sessions, streaming, and AbortSignals; done.

Session reuse. Cached by config so re-renders do not churn the model.
Streaming first. AsyncIterable out of the box; React hook gives you a string.
Clean lifecycle. AbortController on unmount, retry on session-lost.

$ npm install @web-ai-sdk/prompt web-ai-sdk Prompt API →

ask() · streamingsession: cached · balanced

prompt

Output will stream here…

statusidletok0ms0tok/s0

model: on-device LM

@web-ai-sdk/webmcp

Declarative tools. Register from React; AbortSignal cleanup on unmount.
Last writer wins. Re-registers on hot reload without duplicate errors.
Spec aligned. Wraps document.modelContext verbatim.

$ npm install @web-ai-sdk/webmcp web-ai-sdk WebMCP →

registerTool() · agentic2 tools registered

registered tools

user intent

Agent trace will appear here.

statusidletok0ms0tok/s0

protocol: WebMCP/0.1

@web-ai-sdk/summarizer

Key-points, TL;DR, headlines. Configurable type and length.

Four shapes. key-points, tl;dr, teaser, headline.
Three lengths. short, medium, long. Deterministic with the same seed.
Streaming summaries. Pipe chunks straight into your UI.

$ npm install @web-ai-sdk/summarizer web-ai-sdk Summarizer API →

summarize() · local101 words in

input

Run to summarize the article above.

statusidletok0ms0tok/s0

type: key-points · preference: auto

@web-ai-sdk/translator

Pair-based translation with block-level round-trip. Walks the DOM, swaps text, keeps markup intact.

Pair caching. Sessions cached per source to target pair. Switching is instant.
Block round-trip. Walks the DOM, swaps text, keeps the markup intact.
Graceful fallback. No-op fallback when the API is missing.

$ npm install @web-ai-sdk/translator web-ai-sdk Translator API →

translate() · pair cacheden → ja

from

source

Translation (ja) will appear here.

statusidletok0ms0tok/s0

pair: en→ja

@web-ai-sdk/detector

Detect the language of any text on-device. Returns BCP-47 codes with confidence scores.

Top candidate or full list. Use the best guess, or inspect every alternate above your threshold.
Bias hints. Pass expectedInputLanguages to break ties between similar languages.
Wire the others. Detect first, then summarize, translate, or prompt with the result.

$ npm install @web-ai-sdk/detector web-ai-sdk Language Detector API →

detect() · live-

input

No confident match.

statusidletok0ms0tok/s0

model: on-device LM

@web-ai-sdk/writer

Draft new content from a task description. Tone, format, length; streamed straight into your UI.

Task in, prose out. Give it a prompt; get back a paragraph, email, or post.
Tone and length. formal, neutral, casual, across short, medium, and long.
Markdown safe. Trims edges only, so formatting and line breaks survive.

$ npm install @web-ai-sdk/writer web-ai-sdk Writer API →

write() · localcasual · short

writing task

Run to draft content from the task above.

statusidletok0ms0tok/s0

tone: casual

@web-ai-sdk/rewriter

Tone-shift and reshape text you already have. More formal, shorter, or longer; one call.

Relative adjustments. more-formal, more-casual, shorter, longer, as-is.
Streaming first. Pipe the revised text in as the model produces it.
Same lifecycle. Session reuse, AbortSignals, opt-in caching; shared with Writer.

$ npm install @web-ai-sdk/rewriter web-ai-sdk Rewriter API →

rewrite() · localmore-formal · as-is

text to rewrite

Run to rewrite the text above.

statusidletok0ms0tok/s0

tone: more-formal

@web-ai-sdk/proofreader

Grammar, spelling, and punctuation fixes with per-issue offsets you can highlight in place.

Corrected text and diffs. Get the clean string and the list of edits with offsets.
Highlight inline. Offsets index the original input, so you can mark each error in place.
One-shot. No streaming; resolves once with the full result and optional caching.

$ npm install @web-ai-sdk/proofreader web-ai-sdk Proofreader API →

proofread() · local0 fixes

text to proofread

Run to correct grammar, spelling, and punctuation.

statusidletok0ms0tok/s0

0 corrections

philosophy

Why composable.

Link to Philosophy section

01 We handle the rough edges.

The Web AI surface is young. Capability checks, model downloads, abortable streams, session lifetimes, and DOM-rebuild safety are all things you would otherwise re-implement in every component.

Feature detection per package
Session cache keyed by config
AsyncIterable streams plus AbortSignal cleanup
Hot-reload and StrictMode safe
Zero-runtime fallback when API missing

02 You compose the stack.

We ship the lifecycle layer: state machines, streams, abort signals. Framework adapters, polyfills, and UI primitives stay optional so they do not constrain your design system.

Framework-agnostic core
Optional /react subpath
No global state, no providers required
Tree-shakable per package
Pick the layers you need

ArchitectureOwner

Browser Web AI

document.modelContext, Summarizer, Translator, LanguageModel, LanguageDetector, Writer, Rewriter, Proofreader

platform

@web-ai-sdk/X

ask(), createSession(), summarize(), translate(), detect(), write(), rewrite(), proofread(), registerTool(), AbortSignal, session cache

web-ai-sdk

@web-ai-sdk/X/react

usePrompt(), useSession(), useSummarizer(), useTranslator(), useDetector(), useWriter(), useRewriter(), useProofreader(), useWebMCP()

web-ai-sdk

Your application

Card, Button, Spinner, your design system

your code

how it works

Same task. Three levels of abstraction.

All three tabs do the same thing: detect an article's language and summarize it into key-points. Same result, less to wire up.

Link to How it works section

// summarize.ts
import { detect } from "@web-ai-sdk/detector"
import { summarize } from "@web-ai-sdk/summarizer"
const article = document.querySelector("article")
const text = article?.innerText ?? ""
const detection = await detect({ input: text })
const { output: summary } = await summarize({
  input: text,
  language: detection.output?.language ?? "en",
  type: "key-points", length: "short",
  onUpdate: render,
})

support

Browser support.

Web AI support lands engine by engine, and it is desktop-only for now: mobile browsers, including Chrome and Edge on iOS and Android, are not supported yet. Where it is not there yet, you get a feature-detected no-op so your code does not crash.

Link to Browser support section

Package	Chrome	Edge	Safari	Firefox
@web-ai-sdk/prompt	148+ stable	138+ flag, Canary/Dev	no-op fallback	no-op fallback
@web-ai-sdk/summarizer	138+ stable	138+ stable	no-op fallback	no-op fallback
@web-ai-sdk/translator	138+ stable	148+ stable	no-op fallback	no-op fallback
@web-ai-sdk/detector	138+ stable	148+ stable	no-op fallback	no-op fallback
@web-ai-sdk/writer	137+ flag, OT	138+ flag, Canary/Dev	no-op fallback	no-op fallback
@web-ai-sdk/rewriter	137+ flag, OT	138+ flag, Canary/Dev	no-op fallback	no-op fallback
@web-ai-sdk/proofreader	141+ flag, OT	142+ flag, Canary/Dev	no-op fallback	no-op fallback
@web-ai-sdk/webmcp	146+ flag, OT 149+	147+ flag	no-op fallback	no-op fallback

Each version links to its source. stable = on by default; Canary/Dev = preview channel, needs the matching flag; flag = normal channel, behind a flag; OT = origin trial. WebMCP/Edge is empirical (no official page yet).

ship it

Try it in your project.

One install, all eight blocks. Or pick the individual @web-ai-sdk/* packages. Ships ESM, CJS, and types. Tree-shakable.

Read the docs ↗ GitHub repo ↗

Star-