Summarization
Summarize text using Chrome built-in Gemini Nano
Summarization
Chrome AI provides on-device text summarization via the built-in Summarizer API. Your app ships and fetches no model files — Chrome supplies the model, downloading it once browser-wide on first use.
See it in action
The Text Summarizer block runs Chrome AI summarization (with Transformers.js fallback) live in the browser.
Basic Usage
import { summarize } from '@localmode/core';
import { chromeAI } from '@localmode/chrome-ai';
const { summary, usage } = await summarize({
model: chromeAI.summarizer(),
text: 'Long article text that needs summarizing...',
});
console.log(summary);
console.log(`Completed in ${usage.durationMs}ms`);Summary Types
Chrome AI supports four summary types:
// TL;DR — concise summary (default). Chrome's enum value is `tldr`, with no
// punctuation; passing 'tl;dr' throws a TypeError from the browser.
chromeAI.summarizer({ type: 'tldr' })
// Key Points — bullet-style key points
chromeAI.summarizer({ type: 'key-points' })
// Teaser — engaging preview
chromeAI.summarizer({ type: 'teaser' })
// Headline — single-line headline
chromeAI.summarizer({ type: 'headline' })Output Format
// Plain text (default)
chromeAI.summarizer({ format: 'plain-text' })
// Markdown
chromeAI.summarizer({ format: 'markdown' })Summary Length
chromeAI.summarizer({ length: 'short' }) // Brief
chromeAI.summarizer({ length: 'medium' }) // Balanced (default)
chromeAI.summarizer({ length: 'long' }) // DetailedShared Context
Provide context that applies to all summarizations in a session:
const medicalSummarizer = chromeAI.summarizer({
type: 'key-points',
sharedContext: 'These are medical research papers. Focus on methodology and findings.',
});
const { summary } = await summarize({
model: medicalSummarizer,
text: researchPaper,
});Model Availability & Download
The Summarizer API can be present while its on-device model is not yet downloaded. Ask Chrome first:
// 'available' | 'downloadable' | 'downloading' | 'unavailable'
const state = await Summarizer.availability({ type: 'tldr', length: 'medium' });When the state is downloadable or downloading, chromeAI.summarizer() throws a
SummarizationError rather than silently starting a large, browser-wide download. Opt in
explicitly, and call it from a user activation (a click) — Chrome refuses to start the
download otherwise:
import { summarize } from '@localmode/core';
import { chromeAI } from '@localmode/chrome-ai';
const model = chromeAI.summarizer({
type: 'tldr',
allowDownload: true,
onProgress: ({ loaded, total }) => {
console.log(`Downloading model: ${Math.round((loaded / total) * 100)}%`);
},
});
// Call this from a click handler.
const { summary } = await summarize({ model, text: article });Building this UI? useProviderFallback from @localmode/react exposes chromeAvailability
and requestChromeDownload, and the ui/local-first/chrome-ai-download-gate primitive renders
the button, progress, and terminal states for you.
Errors
ChromeAISummarizer throws a typed SummarizationError from @localmode/core:
| Situation | Hint |
|---|---|
self.Summarizer is undefined | Requires Chrome 138+ stable on desktop |
availability() reports unavailable | This device or Chrome build cannot run the model |
Model not downloaded and allowDownload unset | Set allowDownload: true and call from a user activation |
With AbortSignal
const controller = new AbortController();
const { summary } = await summarize({
model: chromeAI.summarizer(),
text: longArticle,
abortSignal: controller.signal,
});
// Cancel if needed
controller.abort();For full API reference, options, and result types, see the Core Summarization guide.
Composed Block
| Block | Description | Links |
|---|---|---|
| Text Summarizer | Chrome AI summarization with automatic Transformers.js fallback | Live · Install: npx shadcn add @localmode/ui/blocks/writing-tools/summarize |