web-ai-sdk

What it is

web-ai-sdk ships building blocks for the Web AI surface. One package per browser capability (Prompt, WebMCP, Summarizer, Translator, Detector, Writer, Rewriter, Proofreader). Zero runtime dependencies. Written in TypeScript. See Architecture for the model.

You can always use the raw browser APIs directly; the SDK doesn’t replace or hide them. It just owns the lifecycle layer around them (session reuse, streaming, AbortSignals, feature-detected fallbacks) and is built to get thinner as the platform matures.

Compositions that bond multiple primitives (block-level DOM translation, article-aware summarization, detect-then-summarize chains) are deliberately out of scope — the SDK wraps one capability per package; composition is your code.

One capability per package, on purpose

A single text-generation model abstraction reaches exactly one of these built-ins, LanguageModel (Prompt). The other seven carry options it cannot express (target language, tone, length, confidence thresholds, per-issue offsets), and one of them, WebMCP, is an agent surface rather than a model. That breadth is why the SDK is per-capability rather than one provider adapter. The model abstraction is one surface among eight, not the whole product. See Why web-ai-sdk for the full argument.

Why not just use the APIs directly?

You can, and nothing here stops you. The Web AI surface is the foundation; web-ai-sdk owns the thin, repetitive lifecycle layer you’d otherwise rewrite in every component, and nothing more.

• It’s the same APIs. Drop down to LanguageModel, Summarizer, Writer, and friends whenever you want. No lock-in, no wrapper objects you can’t escape.
• What you’d otherwise rebuild. Feature detection, session reuse, delta-vs-cumulative stream smoothing, AbortSignal cleanup, and feature-detected no-op fallbacks when the API is missing.
• It’s built to shrink. As the platform absorbs more, this layer gets thinner, not fatter. The goal is to do less over time, not more.

Why this layer is designed to get thinner over time →

Composable wrappers. One philosophy.

@web-ai-sdk/all

Meta-package: install once, get all eight wrappers under a single dependency. Read the guide →

@web-ai-sdk/prompt

Talk to the on-device language model. Sessions, streaming, AbortSignals. Read the guide →

@web-ai-sdk/webmcp

Register tools the browser’s model context can call. Real agents, real cleanup, no boilerplate. Read the guide →

@web-ai-sdk/summarizer

Key-points, TL;DR, headlines. Configurable type and length, streaming. Read the guide →

@web-ai-sdk/translator

String-mode translation with pair-cached sessions. Source → target in one call. Read the guide →

@web-ai-sdk/detector

Detect the language of any text on-device. Confidence scores plus a sorted list of alternates. Read the guide →

@web-ai-sdk/writer

Draft new content from a task description. Tone, format, length, streaming. Read the guide →

@web-ai-sdk/rewriter

Tone-shift and reshape text you already have. Shorter, longer, more formal. Read the guide →

@web-ai-sdk/proofreader

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

Install

Pick a building block, or grab the whole suite under a single install:

pnpm add @web-ai-sdk/prompt        # one block
pnpm add @web-ai-sdk/all           # all eight blocks

See the meta-package guide for the two import shapes (@web-ai-sdk/all/prompt subpath vs { prompt } from "@web-ai-sdk/all" namespaced root).

Each package ships:

• Vanilla (@web-ai-sdk/<pkg>); TypeScript / DOM only, zero framework deps.
• React (@web-ai-sdk/<pkg>/react); small hook adapter that wraps the vanilla core. react is an optional peer dependency.

Why composable

Browsers are shipping Web AI APIs behind flags. The shape changes; the lifecycle is similar across them: feature-detect, lazily create a session, stream chunks, cache results, clean up. Those concerns are framework-agnostic and worth sharing.

We ship that lifecycle layer. Framework adapters, polyfills, UI primitives stay optional subpaths so they don’t constrain your design system, framework, or styling stack. Pick the layers you need; skip the rest.