【Chrome Writer API】ブラウザで動くAI文章生成。ストリーミング対応でリアルタイムにテキストを作成

Writer APIで「何ができる」か

Writer APIは、指定したライティングタスクに沿って新しい文章を生成します。公式では、レビュー/ブログ/メールなど“書く作業”の支援が想定されています。公式

ここからは、公式に載っているサンプルを元に「実装するときの型」をまとめます。

実装の型1：ストリーミングで“書けていくUI”を作る

writeStreaming()は、文章が少しずつ到着するストリームを返します。公式サンプルでは、その断片を順にUIへ追記しています。公式

// Streaming (公式サンプルを要約)
const writer = await Writer.create({
  expectedInputLanguages: ["en"],
  expectedContextLanguages: ["en"],
  outputLanguage: "en",
});

const stream = writer.writeStreaming(
  "An inquiry to my bank about how to enable wire transfers on my account.",
  { context: "I'm a longstanding customer" },
);

for await (const chunk of stream) {
  composeTextbox.append(chunk);
}

ポイント： 完成を待つのではなく“生成中”を見せられるので、停止・修正・再生成がしやすいUIになります。

実装の型2：sharedContextで“同じ前提”を複数タスクに使い回す

公式には、複数のタスクに共通の背景情報をsharedContextで渡す例があります。媒体・ルール・口調などを固定したい時に便利です。公式

// Shared context and per-task context (公式サンプルを要約)
const writer = await Writer.create({
  expectedInputLanguages: ["en"],
  expectedContextLanguages: ["en"],
  outputLanguage: "en",
  sharedContext:
    "This is for publishing on [popular website name], a business" +
    " and employment-focused social media platform.",
});

const stream = writer.writeStreaming(
  "Write a blog post about ...",
  { context: "The request comes from someone working at a startup ..." },
);

for await (const chunk of stream) {
  composeTextbox.append(chunk);
}

ポイント： sharedContextは“固定”、contextは“可変”として分離すると、UIがシンプルなまま運用できます。

実装の型3：writerの再利用（同じトーンで大量処理）

同じwriterは再利用できます。公式は、複数レビューをまとめて処理する例を示しています。公式

// Reuse a writer (公式サンプルを要約)
const writer = await Writer.create({ tone: "formal" });

const reviews = await Promise.all(
  Array.from(
    document.querySelectorAll("#reviews > .review"),
    (reviewEl) => writer.write(reviewEl.textContent)
  ),
);

実装の型4：中断(abort)と破棄(destroy)で、UIを安全に

生成を止めたいときはAbortControllerで中断し、不要になったwriterはdestroy()で破棄します。停止ボタンを置ける設計が公式にあります。公式

// Aborting / Destroying (公式サンプルを要約)
const controller = new AbortController();
stopButton.onclick = () => controller.abort();

const writer = await Writer.create({ signal: controller.signal });
await writer.write(reviewEl.textContent, { signal: controller.signal });

writer.destroy();

制限と権限：iframe / Permission Policy / Web Worker

Writer APIはトップレベルウィンドウと同一オリジンiframeで利用できます。クロスオリジンiframeに委任する場合は、ホスト側でallow="writer"を設定します。公式

<iframe src="https://cross-origin.example.com/" allow="writer"></iframe>

また、Writer APIはWeb Workerでは利用できないと明記されています。公式

重要：仕様は変わる可能性がある（実験段階）

Writer APIは活発に議論されている段階で、今後変更される可能性があります。導入時は、公式ドキュメントの更新とステータス確認、フィードバック導線を前提に設計しておくのが安全です。公式

すぐ使える「導入チェックリスト」

• UI： ストリーミング追記＋停止ボタン(abort)
• 入力： sharedContext(固定)＋context(可変)で分離
• 埋め込み： iframeならallow="writer"（必要な時だけ）
• 運用： 実験段階なので、公式リンクを必ず残す