chrome-web-ai-types

TypeScript definitions for Chrome’s built-in AI APIs (Summarizer, Writer, Rewriter, Proofreader, Translator, Language Detector, and Prompt API). Works with TypeScript, React, Angular, Vue, and any project using TypeScript.

Installation

npm install chrome-web-ai-types
# or
yarn add chrome-web-ai-types
# or
pnpm add chrome-web-ai-types

Reference the types in your project

For the global types (Summarizer, Writer, Translator, etc.) to be recognized, add this at the top of a TypeScript file that uses the APIs (or in a global .d.ts in your project):

/// <reference types="chrome-web-ai-types" />

Example: in a React component, Angular service, or Vue component that calls the APIs, put that line before any other code. Alternatively, add it once in a file like src/global.d.ts or types/global.d.ts so all files in the project get the types.

Requirements

• TypeScript 4.5+ (5.x recommended)
• Chrome 138+ (APIs are evolving; see Chrome docs)
• Some APIs may require an origin trial or Chrome flags

APIs covered

| API | Description | | ------------------------------ | --------------------------------------------------- | | Summarizer | Summarize text (key-points, tldr, teaser, headline) | | Writer | Generate text (tone, format, length) | | Rewriter | Rewrite text (tone, format, length) | | Proofreader | Grammar and spelling review | | Translator | Translate between languages | | LanguageDetector | Detect text language | | LanguageModel (Prompt API) | Prompts and sessions with Gemini Nano | | window.ai | createLanguageModel() (legacy) |

All expose availability(), create(options?), streaming where applicable, and language options when documented.

Usage by project type

TypeScript (Node / generic bundler)

The declarations are global. After installing the package, types are picked up automatically.

// No import needed
async function main() {
  if (typeof Summarizer === "undefined") {
    console.log("Summarizer not available in this environment.");
    return;
  }

  const availability = await Summarizer.availability();
  if (availability === "unavailable") return;

  const summarizer = await Summarizer.create({
    type: "key-points",
    format: "markdown",
    length: "short",
  });

  const summary = await summarizer.summarize("Your long text here...");
  console.log(summary);
}

Ensure your tsconfig.json includes the right lib (usually automatic after install):

{
  "compilerOptions": {
    "lib": ["ES2020", "DOM"]
  }
}

React (TypeScript)

Install the package and use the APIs in components or hooks. Global types are available without imports.

// src/hooks/useSummarizer.ts
/// <reference types="chrome-web-ai-types" />
import { useState, useCallback } from "react";

export function useSummarizer() {
  const [summary, setSummary] = useState<string>("");
  const [loading, setLoading] = useState(false);

  const summarize = useCallback(async (text: string) => {
    if (typeof Summarizer === "undefined") {
      throw new Error("Summarizer API not available.");
    }
    setLoading(true);
    try {
      const availability = await Summarizer.availability();
      if (availability === "unavailable") {
        throw new Error("Model unavailable.");
      }
      const summarizer = await Summarizer.create({ type: "key-points" });
      const result = await summarizer.summarize(text);
      setSummary(result);
      return result;
    } finally {
      setLoading(false);
    }
  }, []);

  return { summary, loading, summarize };
}

// src/components/SummarizerDemo.tsx
import { useSummarizer } from "../hooks/useSummarizer";

export function SummarizerDemo() {
  const { summary, loading, summarize } = useSummarizer();

  return (
    <div>
      <button
        disabled={loading}
        onClick={() => summarize("Long text to summarize...")}
      >
        {loading ? "Summarizing..." : "Summarize"}
      </button>
      {summary && <p>{summary}</p>}
    </div>
  );
}

In React + Vite or Create React App, a tsconfig with "lib": ["ES2020", "DOM"] is enough.

--

Install and use in <script setup lang="ts"> or composables; global types are recognized.

<!-- src/components/LanguageDetector.vue -->
<script setup lang="ts">
import { ref } from "vue";

const text = ref("");
const detectedLanguage = ref<string | null>(null);
const loading = ref(false);

async function detect() {
  if (typeof LanguageDetector === "undefined") return;
  loading.value = true;
  try {
    const detector = await LanguageDetector.create();
    const results = await detector.detect(text.value);
    detectedLanguage.value = results[0]?.detectedLanguage ?? null;
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <div>
    <textarea v-model="text" placeholder="Enter some text" />
    <button :disabled="loading" @click="detect">Detect language</button>
    <p v-if="detectedLanguage">Language: {{ detectedLanguage }}</p>
  </div>
</template>

Checking availability

APIs may be missing (older browser) or not ready (model not downloaded). Always check at runtime:

if (typeof Summarizer === "undefined") {
  // API does not exist in this environment
  return;
}

const availability = await Summarizer.availability();
// "available" | "unavailable" | "downloadable"

if (availability === "unavailable") {
  // Cannot use
  return;
}

if (availability === "downloadable") {
  // Can call create(); model will download (may take a while)
  const summarizer = await Summarizer.create({
    monitor(m) {
      m.addEventListener("downloadprogress", (e) => {
        console.log(`Download: ${e.loaded * 100}%`);
      });
    },
  });
  // ...
}

Type tests (this repo)

npm install
npm run typecheck
# or
npm test

Files under tests/ assert that the definitions accept valid usage and reject invalid usage.

Official documentation

• Chrome AI APIs overview
• Summarizer
• Writer
• Rewriter
• Proofreader
• Translator
• Language Detector
• Prompt API

License

MIT