Browser AI Summarizer

Production-grade package for Browser's built-in Summarizer API.

• Zero dependencies – ships as a single JS bundle.
• On-device summaries – uses the Browser Summarizer API.
• Drop-in UX – smart defaults for common article/blog layouts.

Browser Compatibility

The Summarizer API is an experimental feature available only in Chrome 138 and later on desktop platforms (Windows, macOS, Linux, and ChromeOS). It is not supported on mobile devices. Before using this package, ensure your environment meets the hardware and browser requirements outlined in the official Chrome documentation.

Install (npm)

npm install browser-ai-summarizer

Usage (ESM / bundlers)

import { AISummarizer } from "browser-ai-summarizer";

const summarizer = new AISummarizer({
  theme: { accentColor: "#0066cc" },
});

summarizer.mount();

Usage (CommonJS)

const { AISummarizer } = require("browser-ai-summarizer");

const summarizer = new AISummarizer({
  buttonLabel: "Summarize",
});

summarizer.mount();

Usage via CDN (UMD)

<script src="https://cdn.jsdelivr.net/npm/browser-ai-summarizer/dist/browser-ai-summarizer.umd.js"></script>
<script>
  // AISummarizer is exposed as a global
  const widget = new AISummarizer.AISummarizer({
    theme: { accentColor: "#111111" },
  });
  widget.mount();
</script>

Zero-JS auto-init (data attribute)

Add a placeholder element with data-browser-ai-summarizer. When the script runs in the browser, it will automatically mount a widget:

<div data-browser-ai-summarizer></div>

You can also pass JSON options via the attribute:

<div
  data-browser-ai-summarizer='{"theme":{"accentColor":"#0066cc"},"buttonLabel":"Summarize with AI"}'
></div>

Options

All options are optional; these are the most important ones:

• contentSelector (string): CSS selector(s) for the article/content element. First match wins.
• anchorSelector (string): CSS selector(s) for the element after which the button is inserted.
• defaultType ('key-points' | 'tldr' | 'teaser' | 'headline'): Initial summary style.
• defaultLength ('short' | 'medium' | 'long'): Summary length hint for the API.
• format ('markdown' | 'plain-text'): Output format requested from the API.
• preference ('auto' | 'speed' | 'capability'): Preference hint for model quality vs speed.
• sharedContext (string): Extra context string passed to the summarizer.
• outputLanguage (string): Preferred language for generated summaries. The Summarizer API attempts to match this language, but it is not guaranteed.
• expectedInputLanguages (string[]): Expected language(s) of the page/article text.
• expectedContextLanguages (string[]): Expected language(s) of your sharedContext.
• buttonLabel (string): Label text for the trigger button.
• showTypeSwitcher (boolean): Whether to show style-switcher pills.
• requireDownloadConsent (boolean): Whether to ask before downloading the model.
• dbName (string): Name of the IndexedDB database for user prefs.
• theme (AISummarizerTheme): Theme overrides mapped to CSS custom properties.

Availability behavior

Before showing unsupported/download states, the widget checks Summarizer.availability(...) with the same creation profile it intends to use (type, length, format, preference, sharedContext, and language settings). Chrome may report different availability results depending on the option profile, so this avoids false positives/negatives between preflight checks and Summarizer.create(...). The availability probe is side-effect free and does not pass monitor or signal.

Multilingual configuration examples

Use language tags when your source text and desired output language differ:

import { AISummarizer } from "browser-ai-summarizer";

new AISummarizer({
  // Spanish article -> English summary
  expectedInputLanguages: ["es"],
  outputLanguage: "en",
}).mount();

import { AISummarizer } from "browser-ai-summarizer";

new AISummarizer({
  // Japanese article + English context -> Japanese summary
  expectedInputLanguages: ["ja"],
  expectedContextLanguages: ["en"],
  sharedContext: "Summarize for product managers and keep key metrics.",
  outputLanguage: "ja",
}).mount();

For best predictability, evaluate Summarizer.availability(...) and Summarizer.create(...) with the same option profile (type/length/context/language settings).

Theme tokens (AISummarizerTheme)

All theme values are optional:

• buttonBg: Button background color.
• buttonColor: Button text color.
• buttonRadius: Button border-radius.
• buttonFont: Button font-family.
• accentColor: Card accent / border color.
• cardBg: Card background color.
• cardHeaderBg: Card header background.
• cardBorder: Card border color.
• cardFont: Summary text font-family.
• zIndex: z-index for all plugin elements.