useWriter

React adapter for @web-ai-sdk/writer. Auto-runs on mount, re-runs when input / config options change, and streams chunks through state updates. For the conceptual overview see Writer.

Before shipping, review the Production checklist for safe streaming, progress, reversible suggestions, and cache freshness.

To warm the session before the hook first runs, call prepareWriter from the core package on user intent. See the Session lifecycle guide.

Live demo

Edit the writing task, then click Write. The draft streams in as the model produces it. Click Stop to cancel a run. If you edit the task after a draft, the draft stays visible and is marked stale until you run again or dismiss it.

Usage

import { useWriter } from "@web-ai-sdk/writer/react";

export function Draft({ task }: { task: string }) {
  const { status, output } = useWriter({
    input: task,
    tone: "casual",
    length: "short",
  });

  if (status === "unavailable") return null;
  return <article>{output}</article>;
}

The hook auto-runs whenever its meaningful inputs change. Empty / whitespace-only input keeps the hook in "idle" without invoking the model.

State machine

idle ───► loading ───► streaming ───► done
                                        │
unavailable ◄─── (no API)               │
                                        ▼
                          dismiss()

• idle: hook mounted, waiting for input to be non-empty.
• loading: warming the Writer.create() session.
• streaming: chunks arriving. output grows as they land.
• done: final text in output. fromCache is true if the response came from the opt-in result cache.
• unavailable: API missing. Render nothing.

Reference

import type { UseWriterOptions, UseWriterReturn, WriterStatus } from "@web-ai-sdk/writer/react";

type WriterStatus = "idle" | "loading" | "streaming" | "done" | "unavailable";

interface UseWriterOptions extends Omit<WriteOptions, "onUpdate" | "signal"> {
  enabled?: boolean; // default: true
}

interface UseWriterReturn {
  status: WriterStatus;
  output: string | null;
  error: Error | null;
  fromCache: boolean;
  dismiss(): void;
}

declare const useWriter: (options: UseWriterOptions) => UseWriterReturn;

Source: packages/writer/src/react/index.ts.