LocalMode
Chrome AI

Fallback Patterns

Graceful degradation from Chrome AI to Transformers.js

Fallback Patterns

Chrome AI is only available in Chrome 138+. For broader browser support, pair it with @localmode/transformers as a fallback.

See it in action

Try Smart Writer for a working demo.

The Provider Cascade

User's Browser

  ├─ Chrome 138+ with AI?  ──→  @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',
});

For showcase apps and 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;

  if (typeof self !== 'undefined' && 'ai' in self && 'summarizer' in (self as any).ai) {
    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 (instant, no download)</span>
      ) : (
        <span>📦 Transformers.js (model download required)</span>
      )}
    </div>
  );
}

The Smart Writer showcase app at localmode.ai/smart-writer demonstrates this fallback pattern in action.

Showcase Apps

AppDescriptionLinks
Smart WriterChrome AI with transformers fallback for writing assistanceDemo · Source

On this page