@tanstack/ai-react 0.6.3 → 0.6.4

package/dist/esm/use-summarize.d.ts

@@ -0,0 +1,84 @@
+import { StreamChunk, SummarizationResult } from '@tanstack/ai';
+import { ConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, SummarizeGenerateInput } from '@tanstack/ai-client';
+/**
+ * Options for the useSummarize hook.
+ *
+ * @template TOutput - The output type after optional transform (defaults to SummarizationResult)
+ */
+export interface UseSummarizeOptions<TOutput = SummarizationResult> {
+    /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */
+    connection?: ConnectionAdapter;
+    /** Direct async function for summarization */
+    fetcher?: GenerationFetcher<SummarizeGenerateInput, SummarizationResult>;
+    /** Unique identifier for this generation instance */
+    id?: string;
+    /** Additional body parameters to send with ConnectionAdapter requests */
+    body?: Record<string, any>;
+    /**
+     * Callback when summarization is complete. Can optionally return a transformed value.
+     *
+     * - Return a non-null value to transform and store it as the result
+     * - Return `null` to keep the previous result unchanged
+     * - Return nothing (`void`) to store the raw result as-is
+     */
+    onResult?: (result: SummarizationResult) => TOutput | null | void;
+    /** Callback when an error occurs */
+    onError?: (error: Error) => void;
+    /** Callback when progress is reported (0-100) */
+    onProgress?: (progress: number, message?: string) => void;
+    /** Callback for each stream chunk (ConnectionAdapter mode only) */
+    onChunk?: (chunk: StreamChunk) => void;
+}
+/**
+ * Return type for the useSummarize hook.
+ *
+ * @template TOutput - The output type (after optional transform)
+ */
+export interface UseSummarizeReturn<TOutput = SummarizationResult> {
+    /** Trigger summarization */
+    generate: (input: SummarizeGenerateInput) => Promise<void>;
+    /** The summarization result, or null */
+    result: TOutput | null;
+    /** Whether summarization is in progress */
+    isLoading: boolean;
+    /** Current error, if any */
+    error: Error | undefined;
+    /** Current state of the generation */
+    status: GenerationClientState;
+    /** Abort the current summarization */
+    stop: () => void;
+    /** Clear result, error, and return to idle */
+    reset: () => void;
+}
+/**
+ * React hook for summarizing text using AI models.
+ *
+ * @example
+ * ```tsx
+ * import { useSummarize } from '@tanstack/ai-react'
+ * import { fetchServerSentEvents } from '@tanstack/ai-client'
+ *
+ * function Summarizer() {
+ *   const { generate, result, isLoading } = useSummarize({
+ *     connection: fetchServerSentEvents('/api/summarize'),
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => generate({
+ *         text: 'Long article text...',
+ *         style: 'bullet-points',
+ *         maxLength: 200,
+ *       })}>
+ *         Summarize
+ *       </button>
+ *       {isLoading && <p>Summarizing...</p>}
+ *       {result && <p>{result.summary}</p>}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function useSummarize<TOnResult extends ((result: SummarizationResult) => any) | undefined = undefined>(options: Omit<UseSummarizeOptions, 'onResult'> & {
+    onResult?: TOnResult;
+}): UseSummarizeReturn<InferGenerationOutput<SummarizationResult, TOnResult>>;

package/dist/esm/use-summarize.js

@@ -0,0 +1,19 @@
+import { useGeneration } from "./use-generation.js";
+function useSummarize(options) {
+  const { generate, result, isLoading, error, status, stop, reset } = useGeneration(
+    options
+  );
+  return {
+    generate,
+    result,
+    isLoading,
+    error,
+    status,
+    stop,
+    reset
+  };
+}
+export {
+  useSummarize
+};
+//# sourceMappingURL=use-summarize.js.map

package/dist/esm/use-summarize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-summarize.js","sources":["../../src/use-summarize.ts"],"sourcesContent":["import { useGeneration } from './use-generation'\nimport type { StreamChunk, SummarizationResult } from '@tanstack/ai'\nimport type {\n  ConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutput,\n  SummarizeGenerateInput,\n} from '@tanstack/ai-client'\n\n/**\n * Options for the useSummarize hook.\n *\n * @template TOutput - The output type after optional transform (defaults to SummarizationResult)\n */\nexport interface UseSummarizeOptions<TOutput = SummarizationResult> {\n  /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */\n  connection?: ConnectionAdapter\n  /** Direct async function for summarization */\n  fetcher?: GenerationFetcher<SummarizeGenerateInput, SummarizationResult>\n  /** Unique identifier for this generation instance */\n  id?: string\n  /** Additional body parameters to send with ConnectionAdapter requests */\n  body?: Record<string, any>\n  /**\n   * Callback when summarization is complete. Can optionally return a transformed value.\n   *\n   * - Return a non-null value to transform and store it as the result\n   * - Return `null` to keep the previous result unchanged\n   * - Return nothing (`void`) to store the raw result as-is\n   */\n  onResult?: (result: SummarizationResult) => TOutput | null | void\n  /** Callback when an error occurs */\n  onError?: (error: Error) => void\n  /** Callback when progress is reported (0-100) */\n  onProgress?: (progress: number, message?: string) => void\n  /** Callback for each stream chunk (ConnectionAdapter mode only) */\n  onChunk?: (chunk: StreamChunk) => void\n}\n\n/**\n * Return type for the useSummarize hook.\n *\n * @template TOutput - The output type (after optional transform)\n */\nexport interface UseSummarizeReturn<TOutput = SummarizationResult> {\n  /** Trigger summarization */\n  generate: (input: SummarizeGenerateInput) => Promise<void>\n  /** The summarization result, or null */\n  result: TOutput | null\n  /** Whether summarization is in progress */\n  isLoading: boolean\n  /** Current error, if any */\n  error: Error | undefined\n  /** Current state of the generation */\n  status: GenerationClientState\n  /** Abort the current summarization */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * React hook for summarizing text using AI models.\n *\n * @example\n * ```tsx\n * import { useSummarize } from '@tanstack/ai-react'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function Summarizer() {\n *   const { generate, result, isLoading } = useSummarize({\n *     connection: fetchServerSentEvents('/api/summarize'),\n *   })\n *\n *   return (\n *     <div>\n *       <button onClick={() => generate({\n *         text: 'Long article text...',\n *         style: 'bullet-points',\n *         maxLength: 200,\n *       })}>\n *         Summarize\n *       </button>\n *       {isLoading && <p>Summarizing...</p>}\n *       {result && <p>{result.summary}</p>}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useSummarize<\n  TOnResult extends ((result: SummarizationResult) => any) | undefined =\n    undefined,\n>(\n  options: Omit<UseSummarizeOptions, 'onResult'> & {\n    onResult?: TOnResult\n  },\n): UseSummarizeReturn<InferGenerationOutput<SummarizationResult, TOnResult>> {\n  const { generate, result, isLoading, error, status, stop, reset } =\n    useGeneration<SummarizeGenerateInput, SummarizationResult, TOnResult>(\n      options,\n    )\n\n  return {\n    generate: generate as (input: SummarizeGenerateInput) => Promise<void>,\n    result,\n    isLoading,\n    error,\n    status,\n    stop,\n    reset,\n  }\n}\n"],"names":[],"mappings":";AA2FO,SAAS,aAId,SAG2E;AAC3E,QAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD;AAAA,IACE;AAAA,EAAA;AAGJ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/esm/use-transcription.d.ts

@@ -0,0 +1,89 @@
+import { StreamChunk, TranscriptionResult } from '@tanstack/ai';
+import { ConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, TranscriptionGenerateInput } from '@tanstack/ai-client';
+/**
+ * Options for the useTranscription hook.
+ *
+ * @template TOutput - The output type after optional transform (defaults to TranscriptionResult)
+ */
+export interface UseTranscriptionOptions<TOutput = TranscriptionResult> {
+    /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */
+    connection?: ConnectionAdapter;
+    /** Direct async function for transcription */
+    fetcher?: GenerationFetcher<TranscriptionGenerateInput, TranscriptionResult>;
+    /** Unique identifier for this generation instance */
+    id?: string;
+    /** Additional body parameters to send with ConnectionAdapter requests */
+    body?: Record<string, any>;
+    /**
+     * Callback when transcription is complete. Can optionally return a transformed value.
+     *
+     * - Return a non-null value to transform and store it as the result
+     * - Return `null` to keep the previous result unchanged
+     * - Return nothing (`void`) to store the raw result as-is
+     */
+    onResult?: (result: TranscriptionResult) => TOutput | null | void;
+    /** Callback when an error occurs */
+    onError?: (error: Error) => void;
+    /** Callback when progress is reported (0-100) */
+    onProgress?: (progress: number, message?: string) => void;
+    /** Callback for each stream chunk (ConnectionAdapter mode only) */
+    onChunk?: (chunk: StreamChunk) => void;
+}
+/**
+ * Return type for the useTranscription hook.
+ *
+ * @template TOutput - The output type (after optional transform)
+ */
+export interface UseTranscriptionReturn<TOutput = TranscriptionResult> {
+    /** Trigger transcription */
+    generate: (input: TranscriptionGenerateInput) => Promise<void>;
+    /** The transcription result, or null */
+    result: TOutput | null;
+    /** Whether transcription is in progress */
+    isLoading: boolean;
+    /** Current error, if any */
+    error: Error | undefined;
+    /** Current state of the generation */
+    status: GenerationClientState;
+    /** Abort the current transcription */
+    stop: () => void;
+    /** Clear result, error, and return to idle */
+    reset: () => void;
+}
+/**
+ * React hook for transcribing audio to text using AI models.
+ *
+ * @example
+ * ```tsx
+ * import { useTranscription } from '@tanstack/ai-react'
+ * import { fetchServerSentEvents } from '@tanstack/ai-client'
+ *
+ * function Transcriber() {
+ *   const { generate, result, isLoading } = useTranscription({
+ *     connection: fetchServerSentEvents('/api/transcribe'),
+ *   })
+ *
+ *   const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+ *     const file = e.target.files?.[0]
+ *     if (file) {
+ *       const reader = new FileReader()
+ *       reader.onload = () => {
+ *         generate({ audio: reader.result as string, language: 'en' })
+ *       }
+ *       reader.readAsDataURL(file)
+ *     }
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <input type="file" accept="audio/*" onChange={handleFile} />
+ *       {isLoading && <p>Transcribing...</p>}
+ *       {result && <p>{result.text}</p>}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function useTranscription<TOnResult extends ((result: TranscriptionResult) => any) | undefined = undefined>(options: Omit<UseTranscriptionOptions, 'onResult'> & {
+    onResult?: TOnResult;
+}): UseTranscriptionReturn<InferGenerationOutput<TranscriptionResult, TOnResult>>;

package/dist/esm/use-transcription.js

@@ -0,0 +1,19 @@
+import { useGeneration } from "./use-generation.js";
+function useTranscription(options) {
+  const { generate, result, isLoading, error, status, stop, reset } = useGeneration(
+    options
+  );
+  return {
+    generate,
+    result,
+    isLoading,
+    error,
+    status,
+    stop,
+    reset
+  };
+}
+export {
+  useTranscription
+};
+//# sourceMappingURL=use-transcription.js.map

package/dist/esm/use-transcription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-transcription.js","sources":["../../src/use-transcription.ts"],"sourcesContent":["import { useGeneration } from './use-generation'\nimport type { StreamChunk, TranscriptionResult } from '@tanstack/ai'\nimport type {\n  ConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutput,\n  TranscriptionGenerateInput,\n} from '@tanstack/ai-client'\n\n/**\n * Options for the useTranscription hook.\n *\n * @template TOutput - The output type after optional transform (defaults to TranscriptionResult)\n */\nexport interface UseTranscriptionOptions<TOutput = TranscriptionResult> {\n  /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */\n  connection?: ConnectionAdapter\n  /** Direct async function for transcription */\n  fetcher?: GenerationFetcher<TranscriptionGenerateInput, TranscriptionResult>\n  /** Unique identifier for this generation instance */\n  id?: string\n  /** Additional body parameters to send with ConnectionAdapter requests */\n  body?: Record<string, any>\n  /**\n   * Callback when transcription is complete. Can optionally return a transformed value.\n   *\n   * - Return a non-null value to transform and store it as the result\n   * - Return `null` to keep the previous result unchanged\n   * - Return nothing (`void`) to store the raw result as-is\n   */\n  onResult?: (result: TranscriptionResult) => TOutput | null | void\n  /** Callback when an error occurs */\n  onError?: (error: Error) => void\n  /** Callback when progress is reported (0-100) */\n  onProgress?: (progress: number, message?: string) => void\n  /** Callback for each stream chunk (ConnectionAdapter mode only) */\n  onChunk?: (chunk: StreamChunk) => void\n}\n\n/**\n * Return type for the useTranscription hook.\n *\n * @template TOutput - The output type (after optional transform)\n */\nexport interface UseTranscriptionReturn<TOutput = TranscriptionResult> {\n  /** Trigger transcription */\n  generate: (input: TranscriptionGenerateInput) => Promise<void>\n  /** The transcription result, or null */\n  result: TOutput | null\n  /** Whether transcription is in progress */\n  isLoading: boolean\n  /** Current error, if any */\n  error: Error | undefined\n  /** Current state of the generation */\n  status: GenerationClientState\n  /** Abort the current transcription */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * React hook for transcribing audio to text using AI models.\n *\n * @example\n * ```tsx\n * import { useTranscription } from '@tanstack/ai-react'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function Transcriber() {\n *   const { generate, result, isLoading } = useTranscription({\n *     connection: fetchServerSentEvents('/api/transcribe'),\n *   })\n *\n *   const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {\n *     const file = e.target.files?.[0]\n *     if (file) {\n *       const reader = new FileReader()\n *       reader.onload = () => {\n *         generate({ audio: reader.result as string, language: 'en' })\n *       }\n *       reader.readAsDataURL(file)\n *     }\n *   }\n *\n *   return (\n *     <div>\n *       <input type=\"file\" accept=\"audio/*\" onChange={handleFile} />\n *       {isLoading && <p>Transcribing...</p>}\n *       {result && <p>{result.text}</p>}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useTranscription<\n  TOnResult extends ((result: TranscriptionResult) => any) | undefined =\n    undefined,\n>(\n  options: Omit<UseTranscriptionOptions, 'onResult'> & {\n    onResult?: TOnResult\n  },\n): UseTranscriptionReturn<\n  InferGenerationOutput<TranscriptionResult, TOnResult>\n> {\n  const { generate, result, isLoading, error, status, stop, reset } =\n    useGeneration<TranscriptionGenerateInput, TranscriptionResult, TOnResult>(\n      options,\n    )\n\n  return {\n    generate: generate as (input: TranscriptionGenerateInput) => Promise<void>,\n    result,\n    isLoading,\n    error,\n    status,\n    stop,\n    reset,\n  }\n}\n"],"names":[],"mappings":";AAgGO,SAAS,iBAId,SAKA;AACA,QAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD;AAAA,IACE;AAAA,EAAA;AAGJ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-react",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "React hooks for TanStack AI",
   "author": "",
   "license": "MIT",
@@ -31,12 +31,12 @@
     "streaming"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "0.5.3"
+    "@tanstack/ai-client": "0.6.0"
   },
   "peerDependencies": {
     "@types/react": ">=18.0.0",
     "react": ">=18.0.0",
-    "@tanstack/ai": "^0.6.2"
+    "@tanstack/ai": "^0.6.3"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -45,7 +45,7 @@
     "jsdom": "^27.2.0",
     "react": "^19.2.3",
     "vite": "^7.2.7",
-    "@tanstack/ai": "0.6.2"
+    "@tanstack/ai": "0.6.3"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/index.ts

@@ -6,6 +6,40 @@ export type {
   ChatRequestBody,
 } from './types'
 
+// Generation hooks
+export { useGeneration } from './use-generation'
+export type {
+  UseGenerationOptions,
+  UseGenerationReturn,
+} from './use-generation'
+
+export { useGenerateImage } from './use-generate-image'
+export type {
+  UseGenerateImageOptions,
+  UseGenerateImageReturn,
+} from './use-generate-image'
+
+export { useGenerateSpeech } from './use-generate-speech'
+export type {
+  UseGenerateSpeechOptions,
+  UseGenerateSpeechReturn,
+} from './use-generate-speech'
+
+export { useTranscription } from './use-transcription'
+export type {
+  UseTranscriptionOptions,
+  UseTranscriptionReturn,
+} from './use-transcription'
+
+export { useSummarize } from './use-summarize'
+export type { UseSummarizeOptions, UseSummarizeReturn } from './use-summarize'
+
+export { useGenerateVideo } from './use-generate-video'
+export type {
+  UseGenerateVideoOptions,
+  UseGenerateVideoReturn,
+} from './use-generate-video'
+
 // Re-export from ai-client for convenience
 export {
   fetchServerSentEvents,
@@ -15,4 +49,12 @@ export {
   type ConnectionAdapter,
   type FetchConnectionOptions,
   type InferChatMessages,
+  type GenerationClientState,
+  type ImageGenerateInput,
+  type SpeechGenerateInput,
+  type TranscriptionGenerateInput,
+  type SummarizeGenerateInput,
+  type VideoGenerateInput,
+  type VideoGenerateResult,
+  type VideoStatusInfo,
 } from '@tanstack/ai-client'

package/src/use-generate-image.ts

@@ -0,0 +1,117 @@
+import { useGeneration } from './use-generation'
+import type { ImageGenerationResult, StreamChunk } from '@tanstack/ai'
+import type {
+  ConnectionAdapter,
+  GenerationClientState,
+  GenerationFetcher,
+  ImageGenerateInput,
+  InferGenerationOutput,
+} from '@tanstack/ai-client'
+
+/**
+ * Options for the useGenerateImage hook.
+ *
+ * @template TOutput - The output type after optional transform (defaults to ImageGenerationResult)
+ */
+export interface UseGenerateImageOptions<TOutput = ImageGenerationResult> {
+  /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */
+  connection?: ConnectionAdapter
+  /** Direct async function for image generation */
+  fetcher?: GenerationFetcher<ImageGenerateInput, ImageGenerationResult>
+  /** Unique identifier for this generation instance */
+  id?: string
+  /** Additional body parameters to send with ConnectionAdapter requests */
+  body?: Record<string, any>
+  /**
+   * Callback when images are generated. Can optionally return a transformed value.
+   *
+   * - Return a non-null value to transform and store it as the result
+   * - Return `null` to keep the previous result unchanged
+   * - Return nothing (`void`) to store the raw result as-is
+   */
+  onResult?: (result: ImageGenerationResult) => TOutput | null | void
+  /** Callback when an error occurs */
+  onError?: (error: Error) => void
+  /** Callback when progress is reported (0-100) */
+  onProgress?: (progress: number, message?: string) => void
+  /** Callback for each stream chunk (ConnectionAdapter mode only) */
+  onChunk?: (chunk: StreamChunk) => void
+}
+
+/**
+ * Return type for the useGenerateImage hook.
+ *
+ * @template TOutput - The output type (after optional transform)
+ */
+export interface UseGenerateImageReturn<TOutput = ImageGenerationResult> {
+  /** Trigger image generation */
+  generate: (input: ImageGenerateInput) => Promise<void>
+  /** The generation result containing images, or null */
+  result: TOutput | null
+  /** Whether generation is in progress */
+  isLoading: boolean
+  /** Current error, if any */
+  error: Error | undefined
+  /** Current state of the generation */
+  status: GenerationClientState
+  /** Abort the current generation */
+  stop: () => void
+  /** Clear result, error, and return to idle */
+  reset: () => void
+}
+
+/**
+ * React hook for generating images using AI models.
+ *
+ * Supports two transport modes:
+ * - **ConnectionAdapter** — Streaming transport (SSE, HTTP stream, custom)
+ * - **Fetcher** — Direct async function call
+ *
+ * @example
+ * ```tsx
+ * import { useGenerateImage } from '@tanstack/ai-react'
+ * import { fetchServerSentEvents } from '@tanstack/ai-client'
+ *
+ * function ImageGenerator() {
+ *   const { generate, result, isLoading, error, reset } = useGenerateImage({
+ *     connection: fetchServerSentEvents('/api/generate/image'),
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => generate({ prompt: 'A sunset over mountains' })}>
+ *         Generate
+ *       </button>
+ *       {isLoading && <p>Generating...</p>}
+ *       {error && <p>Error: {error.message}</p>}
+ *       {result?.images.map((img, i) => (
+ *         <img key={i} src={img.url || `data:image/png;base64,${img.b64Json}`} />
+ *       ))}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export function useGenerateImage<
+  TOnResult extends ((result: ImageGenerationResult) => any) | undefined =
+    undefined,
+>(
+  options: Omit<UseGenerateImageOptions, 'onResult'> & {
+    onResult?: TOnResult
+  },
+): UseGenerateImageReturn<
+  InferGenerationOutput<ImageGenerationResult, TOnResult>
+> {
+  const { generate, result, isLoading, error, status, stop, reset } =
+    useGeneration<ImageGenerateInput, ImageGenerationResult, TOnResult>(options)
+
+  return {
+    generate: generate as (input: ImageGenerateInput) => Promise<void>,
+    result,
+    isLoading,
+    error,
+    status,
+    stop,
+    reset,
+  }
+}

package/src/use-generate-speech.ts

@@ -0,0 +1,108 @@
+import { useGeneration } from './use-generation'
+import type { StreamChunk, TTSResult } from '@tanstack/ai'
+import type {
+  ConnectionAdapter,
+  GenerationClientState,
+  GenerationFetcher,
+  InferGenerationOutput,
+  SpeechGenerateInput,
+} from '@tanstack/ai-client'
+
+/**
+ * Options for the useGenerateSpeech hook.
+ *
+ * @template TOutput - The output type after optional transform (defaults to TTSResult)
+ */
+export interface UseGenerateSpeechOptions<TOutput = TTSResult> {
+  /** Connection adapter for streaming transport (SSE, HTTP stream, custom) */
+  connection?: ConnectionAdapter
+  /** Direct async function for speech generation */
+  fetcher?: GenerationFetcher<SpeechGenerateInput, TTSResult>
+  /** Unique identifier for this generation instance */
+  id?: string
+  /** Additional body parameters to send with ConnectionAdapter requests */
+  body?: Record<string, any>
+  /**
+   * Callback when speech is generated. Can optionally return a transformed value.
+   *
+   * - Return a non-null value to transform and store it as the result
+   * - Return `null` to keep the previous result unchanged
+   * - Return nothing (`void`) to store the raw result as-is
+   */
+  onResult?: (result: TTSResult) => TOutput | null | void
+  /** Callback when an error occurs */
+  onError?: (error: Error) => void
+  /** Callback when progress is reported (0-100) */
+  onProgress?: (progress: number, message?: string) => void
+  /** Callback for each stream chunk (ConnectionAdapter mode only) */
+  onChunk?: (chunk: StreamChunk) => void
+}
+
+/**
+ * Return type for the useGenerateSpeech hook.
+ *
+ * @template TOutput - The output type (after optional transform)
+ */
+export interface UseGenerateSpeechReturn<TOutput = TTSResult> {
+  /** Trigger speech generation */
+  generate: (input: SpeechGenerateInput) => Promise<void>
+  /** The TTS result containing audio data, or null */
+  result: TOutput | null
+  /** Whether generation is in progress */
+  isLoading: boolean
+  /** Current error, if any */
+  error: Error | undefined
+  /** Current state of the generation */
+  status: GenerationClientState
+  /** Abort the current generation */
+  stop: () => void
+  /** Clear result, error, and return to idle */
+  reset: () => void
+}
+
+/**
+ * React hook for generating speech (text-to-speech) using AI models.
+ *
+ * @example
+ * ```tsx
+ * import { useGenerateSpeech } from '@tanstack/ai-react'
+ * import { fetchServerSentEvents } from '@tanstack/ai-client'
+ *
+ * function SpeechGenerator() {
+ *   const { generate, result, isLoading } = useGenerateSpeech({
+ *     connection: fetchServerSentEvents('/api/generate/speech'),
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => generate({ text: 'Hello world', voice: 'alloy' })}>
+ *         Generate Speech
+ *       </button>
+ *       {result && (
+ *         <audio src={`data:audio/${result.format};base64,${result.audio}`} controls />
+ *       )}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export function useGenerateSpeech<
+  TOnResult extends ((result: TTSResult) => any) | undefined = undefined,
+>(
+  options: Omit<UseGenerateSpeechOptions, 'onResult'> & {
+    onResult?: TOnResult
+  },
+): UseGenerateSpeechReturn<InferGenerationOutput<TTSResult, TOnResult>> {
+  const { generate, result, isLoading, error, status, stop, reset } =
+    useGeneration<SpeechGenerateInput, TTSResult, TOnResult>(options)
+
+  return {
+    generate: generate as (input: SpeechGenerateInput) => Promise<void>,
+    result,
+    isLoading,
+    error,
+    status,
+    stop,
+    reset,
+  }
+}