Fallback Patterns

Chrome AI is Chrome-only: Summarizer and Translator need Chrome 138+, and the Prompt API needs Chrome 148+. For broader browser support, pair it with @localmode/transformers as a fallback.

See it in action

The Writing Tools blocks are the canonical real-app example of this pattern — four single-purpose blocks (Write, Translate, Summarize, Complete) that each run Chrome AI with automatic Transformers.js fallback.

The Provider Cascade

User's Browser
  │
  ├─ Chrome AI available?  ──→  @localmode/chrome-ai    (instant, 0 bytes)
  │
  └─ Other browser?        ──→  @localmode/transformers  (model download, then cached)

Basic Fallback

import { summarize } from '@localmode/core';
import { chromeAI, isSummarizerAPISupported } from '@localmode/chrome-ai';
import { transformers } from '@localmode/transformers';

// Pick the best available provider
const model = isSummarizerAPISupported()
  ? chromeAI.summarizer()
  : transformers.summarizer('Xenova/distilbart-cnn-6-6');

// Same API regardless of provider
const { summary } = await summarize({ model, text: longArticle });

Translation Fallback

import { translate } from '@localmode/core';
import { chromeAI, isTranslatorAPISupported } from '@localmode/chrome-ai';
import { transformers } from '@localmode/transformers';

const model = isTranslatorAPISupported()
  ? chromeAI.translator({ targetLanguage: 'de' })
  : transformers.translator('Xenova/opus-mt-en-de');

const { translation } = await translate({
  model,
  text: 'Hello world',
  targetLanguage: 'de',
});

Service Pattern (Recommended)

For production code, encapsulate provider selection in a service:

// _services/summarizer.service.ts
import type { SummarizationModel } from '@localmode/core';

let cachedModel: SummarizationModel | null = null;

export async function getSummarizerModel(): Promise<SummarizationModel> {
  if (cachedModel) return cachedModel;

  // Chrome removed the `self.ai.*` namespace; the Summarizer is a top-level
  // global now. `isSummarizerAPISupported()` checks both surfaces for you.
  const { isSummarizerAPISupported } = await import('@localmode/chrome-ai');
  if (isSummarizerAPISupported()) {
    const { chromeAI } = await import('@localmode/chrome-ai');
    cachedModel = chromeAI.summarizer();
  } else {
    const { transformers } = await import('@localmode/transformers');
    cachedModel = transformers.summarizer('Xenova/distilbart-cnn-6-6');
  }

  return cachedModel;
}

React Hook Pattern

import { useSummarize } from '@localmode/react';
import { getSummarizerModel } from '../_services/summarizer.service';

function useSummarizer() {
  const [model, setModel] = useState(null);

  useEffect(() => {
    getSummarizerModel().then(setModel);
  }, []);

  const { data, isLoading, execute } = useSummarize({ model: model! });

  return { summary: data?.summary, isLoading, summarize: execute };
}

Showing Provider Status

Display which provider is active to help users understand what's happening:

import { isSummarizerAPISupported } from '@localmode/chrome-ai';

function ProviderStatus() {
  const isChrome = isSummarizerAPISupported();

  return (
    <div>
      {isChrome ? (
        <span>⚡ Chrome AI (built-in; Chrome supplies the model)</span>
      ) : (
        <span>📦 Transformers.js (model download required)</span>
      )}
    </div>
  );
}

The Writing Tools blocks demonstrate this fallback pattern in action — install any of them, e.g. npx shadcn add @localmode/ui/blocks/writing-tools/write.

Composed Blocks

The four writing capabilities — writing assistance, translation, summarization, and fill-mask completion — ship as four installable blocks that share this exact fallback wiring:

Block	Description	Links
Write	Chrome AI writing assistance with automatic Transformers.js fallback	Live · Install: `npx shadcn add @localmode/ui/blocks/writing-tools/write`
Translate	Chrome AI translation with automatic Transformers.js fallback	Live · Install: `npx shadcn add @localmode/ui/blocks/writing-tools/translate`
Summarize	Chrome AI summarization with automatic Transformers.js fallback	Live · Install: `npx shadcn add @localmode/ui/blocks/writing-tools/summarize`
Complete	Transformers.js ModernBERT fill-mask completion	Live · Install: `npx shadcn add @localmode/ui/blocks/writing-tools/complete`

Fallback Patterns

On this page