BROWSER-NATIVE AI · 0 RUNTIME DEPS · Open Source OSS
web-ai-sdk
The TypeScript SDK for the Web AI surface.
purpose
Why use a wrapper?
You can use the browser APIs directly.
web-ai-sdk handles capability checks, session reuse, stream normalization, abort signals, cleanup, and optional result caching.
See package boundariescoverage
Why one package per capability.
Prompt.
Prompt wraps the general LanguageModel API.
- Prompt / LanguageModel only
- Text, tools, structured output
Other capabilities.
The other APIs use different options and result types. Each has its own 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)
capability matrix
Lifecycle features by package.
Each package implements only the lifecycle features supported by its browser API.
| Package | Streaming | Session reuse | Result cache | AbortSignal |
|---|---|---|---|---|
| @web-ai-sdk/prompt | ✓ | ✓ | ✓ | ✓ |
| @web-ai-sdk/webmcp | – | – | – | ✓ |
| @web-ai-sdk/summarizer | ✓ | ✓ | ✓ | ✓ |
| @web-ai-sdk/translator | – | ✓ | ✓ | ✓ |
| @web-ai-sdk/detector | – | ✓ | ✓ | ✓ |
| @web-ai-sdk/writer | ✓ | ✓ | ✓ | ✓ |
| @web-ai-sdk/rewriter | ✓ | ✓ | ✓ | ✓ |
| @web-ai-sdk/proofreader | – | ✓ | ✓ | ✓ |
Streaming = AsyncIterable output. Session reuse = sessions cached by config so repeat calls skip model setup (conversation turns, language pairs, task options). Result cache = opt-in memoized results. AbortSignal = cleanup wiring on unmount and abort.
SDK catalog
Packages.
@web-ai-sdk/prompt
Send prompts and manage independent sessions, streams, and abort signals.
- Session reuse. Compatible calls reuse a cached base session.
- Streaming first. Sessions yield deltas. ask() exposes cumulative text.
- Clean lifecycle. Abort signals cancel runs. Leases release prepared sessions.
ask() · streamingsession: on-demand · balanced
Output will stream here…
statusidletok0ms0tok/s0
runtime: browser-provided model
@web-ai-sdk/webmcp
Register tools for the browser's model context and clean them up safely.
- Declarative tools. Register typed tools and clean up with an AbortSignal.
- Last writer wins. Re-registers on hot reload without duplicate errors.
- SDK-first surface. Register, discover, and execute through typed functions.
web-ai-sdk WebMCP docs
This demo detects the page's native WebMCP API and routes tools in this page. It cannot show whether an external agent will discover or invoke a tool.
@web-ai-sdk/summarizer
Key-points, TL;DR, headlines. Configurable type and length.
- Four shapes. key-points, tl;dr, teaser, headline.
- Three lengths. Choose short, medium, or long output.
- Streaming summaries. Receive cumulative text as the model responds.
@web-ai-sdk/translator
Translate a string between a source and target language.
- Pair caching. Sessions are cached by source and target language.
- Streaming first. Receive cumulative text as the model responds.
- String input. The SDK does not walk or mutate the DOM.
@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 top result or inspect all results above a threshold.
- Bias hints. Pass expectedInputLanguages when you know the likely languages.
- Wire the others. Application code can pass the result to another capability.
@web-ai-sdk/writer
Draft text from a task description. Configure tone, format, and length.
- Task in, prose out. Pass a writing task and receive generated text.
- Tone and length. Choose a tone and output length.
- Output cleanup. The wrapper trims outer whitespace and preserves internal formatting.
@web-ai-sdk/rewriter
Change the tone or length of existing text.
- Relative adjustments. more-formal, more-casual, shorter, longer, as-is.
- Streaming first. Receive cumulative text as the model responds.
- Same lifecycle. Reuse sessions, abort work, and opt in to result caching.
@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.
support
Browser support.
Support differs by capability and browser. Each status links to a vendor source. The wrappers expose an unavailable state for fallback UI.
| Package | Chrome | Edge | Safari / Firefox |
|---|---|---|---|
| @web-ai-sdk/prompt | 148+ stable | 138+ Canary/Dev flag; OT 150 | no-op fallback |
| @web-ai-sdk/summarizer | 138+ stable | 138+ stable | no-op fallback |
| @web-ai-sdk/translator | 138+ stable | 148+ stable | no-op fallback |
| @web-ai-sdk/detector | 138+ stable | 148+ stable | no-op fallback |
| @web-ai-sdk/writer | Developer trial, local flag | 138+ Canary/Dev flag | no-op fallback |
| @web-ai-sdk/rewriter | Developer trial, local flag | 138+ Canary/Dev flag | no-op fallback |
| @web-ai-sdk/proofreader | Developer trial, local flag | 142+ Canary/Dev flag | no-op fallback |
| @web-ai-sdk/webmcp | OT 149+, local flag | OT 150 | no-op fallback |
Each status links to its vendor source. stable = documented as on by default; Canary/Dev = Edge preview channel with the documented flag; Developer trial = Chrome's current status label, not an active public token program; OT = origin trial. Historical Writer/Rewriter (137–148) and Proofreader (141–145) Chrome origin-trial windows have ended.
Agent consumer signal, not browser support. ChatGPT Desktop Site tools are an implemented WebMCP consumer in the built-in browser only. Availability depends on the account, model, current page, and user permission. Tools do not carry after navigation. Closing the page makes them unavailable. This does not establish Chrome support or follow from engine lineage.
how it works
Compare three API levels.
Each tab detects an article's language and creates a key-point summary. Compare the raw API, vanilla SDK, and React code.
// summarize.tsimport { 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,})
scope
Responsibilities.
SDK responsibilities.
The SDK handles browser API lifecycles. This includes support checks, sessions, streams, abort signals, and cleanup.
- 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
Application responsibilities.
Application code owns UI, persistence, DOM traversal, fallbacks, and cross-capability workflows.
- Framework-agnostic core
- Optional
/reactsubpath - 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
@web-ai-sdk/X
ask(), createSession(), summarize(), translate(), detect(), write(), rewrite(), proofread(), registerTool(), AbortSignal, session cache
@web-ai-sdk/X/react
usePrompt(), useSession(), useSummarizer(), useTranslator(), useDetector(), useWriter(), useRewriter(), useProofreader(), useWebMCP()
Your application
Card, Button, Spinner, the design system