LocalMode
Chrome AI

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' })    // Detailed

Shared 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:

SituationHint
self.Summarizer is undefinedRequires Chrome 138+ stable on desktop
availability() reports unavailableThis device or Chrome build cannot run the model
Model not downloaded and allowDownload unsetSet 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

BlockDescriptionLinks
Text SummarizerChrome AI summarization with automatic Transformers.js fallbackLive · Install: npx shadcn add @localmode/ui/blocks/writing-tools/summarize

On this page