useProofreader

React adapter for @web-ai-sdk/proofreader. Auto-runs on mount and re-runs when input changes. For the conceptual overview see Proofreader.

Before shipping, review the Production checklist for preserving originals, Accept/Reject/Undo flows, safe rendering, and cache freshness.

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

Live demo

Edit the text, then click Proofread. The corrected version and the number of corrections appear once the model resolves; your original text stays unchanged. Results are cached for ten minutes; use “Fresh run” to bypass the cache.

Usage

import { useProofreader } from "@web-ai-sdk/proofreader/react";

export function GrammarCheck({ text }: { text: string }) {
  const { status, output } = useProofreader({ input: text });

  if (status === "unavailable") return null;
  if (status === "loading") return <p>Checking…</p>;
  return <p>{output?.correctedInput}</p>;
}

The hook auto-runs whenever input changes. Empty / whitespace-only input keeps the hook in "idle" without invoking the model. There is no streaming; status goes straight to "done".

State machine

idle ───► loading ───► done
              │
unavailable ◄─┘ (no API)

• idle: hook mounted, waiting for input to be non-empty.
• loading: warming the session and proofreading.
• done: result in output (correctedInput + corrections). fromCache is true if it came from the opt-in result cache.
• unavailable: API missing. Render nothing.

Reference

import type { UseProofreaderOptions, UseProofreaderReturn, ProofreaderStatus } from "@web-ai-sdk/proofreader/react";

type ProofreaderStatus = "idle" | "loading" | "done" | "unavailable";

interface UseProofreaderOptions extends Omit<ProofreadOptions, "input" | "signal"> {
  input: string;
  enabled?: boolean; // default: true
}

interface UseProofreaderReturn {
  status: ProofreaderStatus;
  output: ProofreadOutput | null;
  error: Error | null;
  fromCache: boolean;
}

declare const useProofreader: (options: UseProofreaderOptions) => UseProofreaderReturn;

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