use-builtin-ai

Translate text on-device with Chrome's built-in Translator API.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useLanguageDetector, useSummarizer, useTranslator } from "@vizejs/composable/use-builtin-ai";

Try it

Detect a comment's language on the device

Use the browser's built-in language detector so text never leaves the device.

Open the interactive example

What to observe: Where built-in AI is available, Detect language reports the language and confidence; the first call may download a model.

The same entry provides useTranslator and useSummarizer. status and downloadProgress describe model downloads. Every example renders a neutral message until it mounts, so server and client markup match, and then explains what to do when the browser lacks the API.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { ref } from "vue";
import { useLanguageDetector } from "@vizejs/composable/use-builtin-ai";
import { useMounted } from "@vizejs/composable/use-mounted";

const mounted = useMounted();
const detector = useLanguageDetector({ expectedInputLanguages: ["en", "ja", "fr"] });
const comment = ref("この発表はとても良かったです");
const language = ref<string>();

async function detect() {
  const [best] = await detector.detect(comment.value);
  language.value = best
    ? `${best.detectedLanguage} (${Math.round(best.confidence * 100)}%)`
    : "unknown";
}
</script>

<template>
  <div class="composable-example">
    <p>Detect the language of a comment on the device, without sending it to a server.</p>
    <label>
      Comment
      <input v-model="comment" />
    </label>
    <button type="button" :disabled="!mounted || !detector.supported.value" @click="detect">
      Detect language
    </button>
    <output aria-live="polite">{{
      !mounted
        ? "Checking browser support…"
        : !detector.supported.value
          ? "Built-in AI is not available in this browser; detect the language on your server instead."
          : (language ?? `Model status: ${detector.status.value}`)
    }}</output>
  </div>
</template>

Runtime contract

API

useTranslator

Translate text on-device with Chrome's built-in Translator API. The session is created lazily by the first translate (or explicitly by create(), which browsers require inside a user gesture when the model must be downloaded); downloadProgress follows the download. Changing a language destroys the session. The session is destroyed and a pending creation aborted when the owning reactive scope stops; outside a scope call destroy(). Server rendering: nothing is created, supported is false and status is "unsupported". Inside a component supported turns true only after mounting, so hydration renders this server state first.

function useTranslator(options: UseTranslatorOptions): TranslatorControls

const translator = useTranslator({ sourceLanguage: "en", targetLanguage: "ja" });
const japanese = await translator.translate("Hello");

useLanguageDetector

Detect the language of text on-device with Chrome's built-in LanguageDetector API. Shares the lifecycle of useTranslator: lazy creation, download progress, destruction with the owning reactive scope. Server rendering: nothing is created, supported is false and status is "unsupported". Inside a component supported turns true only after mounting, so hydration renders this server state first.

function useLanguageDetector( options: UseLanguageDetectorOptions = {}, ): LanguageDetectorControls

const detector = useLanguageDetector();
const [best] = await detector.detect(input.value);

useSummarizer

Summarize text on-device with Chrome's built-in Summarizer API. Shares the lifecycle of useTranslator: lazy creation, download progress, destruction with the owning reactive scope; changing type, format, length or sharedContext destroys the session. Server rendering: nothing is created, supported is false and status is "unsupported". Inside a component supported turns true only after mounting, so hydration renders this server state first.

function useSummarizer(options: UseSummarizerOptions = {}): SummarizerControls

const summarizer = useSummarizer({ type: "tldr", length: "medium" });
for await (const chunk of summarizer.summarizeStreaming(article.value)) output.value += chunk;

Types

BuiltinAiDownloadProgressEvent

downloadprogress event: loaded is a fraction of total (usually 1).

BuiltinAiMonitorLike

Monitor handed to the monitor callback of create().

BuiltinAiCreateMonitorOptions

Options added by the composables to every create() call.

BuiltinAiSessionControls

Common state and actions of every built-in AI composable.

TranslatorLike

Minimal Translator instance.

TranslatorLanguages

Language pair of a translator.

TranslatorHost

Minimal global Translator class (static methods).

UseTranslatorOptions

Options for useTranslator.

TranslatorControls

State and actions returned by useTranslator.

LanguageDetectionResult

One candidate returned by LanguageDetector.detect.

LanguageDetectorLike

Minimal LanguageDetector instance.

LanguageDetectorCreateOptions

Creation options of a language detector.

LanguageDetectorHost

Minimal global LanguageDetector class (static methods).

UseLanguageDetectorOptions

Options for useLanguageDetector.

LanguageDetectorControls

State and actions returned by useLanguageDetector.

SummarizerCreateOptions

Creation options of a summarizer.

SummarizeCallOptions

Per-call options of summarize.

SummarizerLike

Minimal Summarizer instance.

SummarizerHost

Minimal global Summarizer class (static methods).

UseSummarizerOptions

Options for useSummarizer.

SummarizerControls

State and actions returned by useSummarizer.