chrome-web-ai-types

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