useProofreader

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

Live demo

Edit the text; the corrected version and the number of corrections appear once the model resolves.

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.