@tanstack/ai-solid 0.13.14 → 0.14.0

package/dist/use-generation.js

@@ -0,0 +1,94 @@
+import { createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount } from "solid-js";
+import { GenerationClient } from "@tanstack/ai-client";
+import { createGenerationDevtoolsBridge } from "@tanstack/ai-client/devtools";
+
+//#region src/use-generation.ts
+/**
+* Generic Solid hook for one-shot generation tasks.
+*
+* This is the base hook used by `useGenerateImage`, `useGenerateSpeech`,
+* `useTranscription`, and `useSummarize`. You can also use it directly
+* for custom generation types.
+*
+* @template TInput - The input type for the generation request
+* @template TResult - The result type returned by the generation
+* @template TOutput - The transformed output type (defaults to TResult)
+*
+* @example
+* ```tsx
+* const { generate, result, isLoading } = useGeneration<MyInput, MyResult>({
+*   connection: fetchServerSentEvents('/api/generate/custom'),
+* })
+*
+* await generate({ prompt: 'Hello' })
+* ```
+*/
+function useGeneration(options) {
+	const hookId = createUniqueId();
+	const clientId = options.id || hookId;
+	const [result, setResult] = createSignal(null);
+	const [isLoading, setIsLoading] = createSignal(false);
+	const [error, setError] = createSignal(void 0);
+	const [status, setStatus] = createSignal("idle");
+	const client = createMemo(() => {
+		const clientOptions = {
+			id: clientId,
+			body: options.body,
+			devtoolsBridgeFactory: createGenerationDevtoolsBridge,
+			devtools: {
+				...options.devtools,
+				framework: "solid",
+				hookName: "useGeneration"
+			},
+			onResult: ((r) => options.onResult?.(r)),
+			onError: (e) => options.onError?.(e),
+			onProgress: (p, m) => options.onProgress?.(p, m),
+			onChunk: (c) => options.onChunk?.(c),
+			onResultChange: setResult,
+			onLoadingChange: setIsLoading,
+			onErrorChange: setError,
+			onStatusChange: setStatus
+		};
+		if (options.connection) return new GenerationClient({
+			...clientOptions,
+			connection: options.connection
+		});
+		if (options.fetcher) return new GenerationClient({
+			...clientOptions,
+			fetcher: options.fetcher
+		});
+		throw new Error("useGeneration requires either a connection or fetcher option");
+	}, [clientId]);
+	createEffect(() => {
+		const currentBody = options.body;
+		client().updateOptions({ ...currentBody !== void 0 && { body: currentBody } });
+	});
+	onMount(() => {
+		client().mountDevtools();
+	});
+	onCleanup(() => {
+		client().dispose();
+	});
+	const generate = async (input) => {
+		await client().generate(input);
+	};
+	const stop = () => {
+		client().stop();
+	};
+	const reset = () => {
+		client().reset();
+	};
+	return {
+		generate,
+		result,
+		isLoading,
+		error,
+		status,
+		stop,
+		reset
+	};
+}
+
+//#endregion
+export { useGeneration };
+//# sourceMappingURL=use-generation.js.map

package/dist/use-generation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-generation.js","names":["clientOptions: GenerationClientOptions<TInput, TResult, TOutput>"],"sources":["../src/use-generation.ts"],"sourcesContent":["import { GenerationClient } from '@tanstack/ai-client'\nimport { createGenerationDevtoolsBridge } from '@tanstack/ai-client/devtools'\nimport {\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  onCleanup,\n  onMount,\n} from 'solid-js'\nimport type { StreamChunk } from '@tanstack/ai'\nimport type {\n  AIDevtoolsDisplayOptions,\n  ConnectConnectionAdapter,\n  GenerationClientOptions,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutputFromReturn,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useGeneration hook.\n *\n * Accepts either a `connection` (streaming transport) or a `fetcher` (direct async call).\n *\n * @template TInput - The input type for the generation request\n * @template TResult - The result type returned by the generation\n * @template TOutput - The transformed output type (defaults to TResult)\n */\nexport interface UseGenerationOptions<TInput, TResult, TOutput = TResult> {\n  /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */\n  connection?: ConnectConnectionAdapter\n  /** Direct async function for one-shot generation (no streaming protocol needed) */\n  fetcher?: GenerationFetcher<TInput, TResult>\n  /** Unique identifier for this generation instance */\n  id?: string\n  /** Additional body parameters to send with connect-based adapter requests */\n  body?: Record<string, any>\n  /** Display options for TanStack AI Devtools. */\n  devtools?: AIDevtoolsDisplayOptions\n  /**\n   * Callback when a result is received. 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: TResult) => 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 (connect-based adapter mode only) */\n  onChunk?: (chunk: StreamChunk) => void\n}\n\n/**\n * Return type for the useGeneration hook.\n *\n * @template TOutput - The output type (possibly transformed from the raw result)\n */\nexport interface UseGenerationReturn<TOutput> {\n  /** Trigger a generation request */\n  generate: (input: Record<string, any>) => Promise<void>\n  /** The generation result, or null if not yet generated */\n  result: Accessor<TOutput | null>\n  /** Whether a generation is currently in progress */\n  isLoading: Accessor<boolean>\n  /** Current error, if any */\n  error: Accessor<Error | undefined>\n  /** Current state of the generation client */\n  status: Accessor<GenerationClientState>\n  /** Abort the current generation */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * Generic Solid hook for one-shot generation tasks.\n *\n * This is the base hook used by `useGenerateImage`, `useGenerateSpeech`,\n * `useTranscription`, and `useSummarize`. You can also use it directly\n * for custom generation types.\n *\n * @template TInput - The input type for the generation request\n * @template TResult - The result type returned by the generation\n * @template TOutput - The transformed output type (defaults to TResult)\n *\n * @example\n * ```tsx\n * const { generate, result, isLoading } = useGeneration<MyInput, MyResult>({\n *   connection: fetchServerSentEvents('/api/generate/custom'),\n * })\n *\n * await generate({ prompt: 'Hello' })\n * ```\n */\n// `TTransformed` infers from the `onResult` return position (a covariant\n// inference site that works even for an optional nested property), which types\n// the callback parameter as `TResult` and narrows `result`. Inferring the\n// whole callback as a defaulted type parameter instead collapses to the\n// default, leaving the parameter `any` — a hard error under `strict`. See\n// issue #848.\nexport function useGeneration<\n  TInput extends Record<string, any>,\n  TResult,\n  TTransformed = void,\n>(\n  options: Omit<UseGenerationOptions<TInput, TResult>, 'onResult'> & {\n    onResult?: (result: TResult) => TTransformed\n  },\n): UseGenerationReturn<InferGenerationOutputFromReturn<TResult, TTransformed>> {\n  type TOutput = InferGenerationOutputFromReturn<TResult, TTransformed>\n  const hookId = createUniqueId()\n  const clientId = options.id || hookId\n\n  const [result, setResult] = createSignal<TOutput | null>(null)\n  const [isLoading, setIsLoading] = createSignal(false)\n  const [error, setError] = createSignal<Error | undefined>(undefined)\n  const [status, setStatus] = createSignal<GenerationClientState>('idle')\n\n  const client = createMemo(() => {\n    // Conditional spread on `body`: `GenerationClientOptions.body` is a\n    // strict optional (`body?: Record<string, any>`) and EOPT forbids\n    // assigning the source `T | undefined` directly.\n    const clientOptions: GenerationClientOptions<TInput, TResult, TOutput> = {\n      id: clientId,\n      body: options.body,\n      devtoolsBridgeFactory: createGenerationDevtoolsBridge,\n      devtools: {\n        ...options.devtools,\n        framework: 'solid',\n        hookName: 'useGeneration',\n      },\n      // The transform's raw return type (`TTransformed`) and the stored output\n      // (`TOutput`, with null/void/undefined stripped) are identical at runtime;\n      // the cast bridges the relationship that the conditional type hides.\n      onResult: ((r: TResult) => options.onResult?.(r)) as (\n        result: TResult,\n      ) => TOutput | null | void,\n      onError: (e: Error) => options.onError?.(e),\n      onProgress: (p: number, m?: string) => options.onProgress?.(p, m),\n      onChunk: (c: StreamChunk) => options.onChunk?.(c),\n      onResultChange: setResult,\n      onLoadingChange: setIsLoading,\n      onErrorChange: setError,\n      onStatusChange: setStatus,\n    }\n\n    if (options.connection) {\n      return new GenerationClient<TInput, TResult, TOutput>({\n        ...clientOptions,\n        connection: options.connection,\n      })\n    }\n\n    if (options.fetcher) {\n      return new GenerationClient<TInput, TResult, TOutput>({\n        ...clientOptions,\n        fetcher: options.fetcher,\n      })\n    }\n\n    throw new Error(\n      'useGeneration requires either a connection or fetcher option',\n    )\n  }, [clientId])\n\n  // Sync body changes without recreating client\n  createEffect(() => {\n    const currentBody = options.body\n    client().updateOptions({\n      ...(currentBody !== undefined && { body: currentBody }),\n    })\n  })\n\n  onMount(() => {\n    client().mountDevtools()\n  })\n\n  // Cleanup on unmount: stop any in-flight requests and unregister devtools\n  onCleanup(() => {\n    client().dispose()\n  })\n\n  const generate = async (input: TInput) => {\n    await client().generate(input)\n  }\n\n  const stop = () => {\n    client().stop()\n  }\n\n  const reset = () => {\n    client().reset()\n  }\n\n  return {\n    generate: generate as (input: Record<string, any>) => Promise<void>,\n    result,\n    isLoading,\n    error,\n    status,\n    stop,\n    reset,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyGA,SAAgB,cAKd,SAG6E;CAE7E,MAAM,SAAS,gBAAgB;CAC/B,MAAM,WAAW,QAAQ,MAAM;CAE/B,MAAM,CAAC,QAAQ,aAAa,aAA6B,KAAK;CAC9D,MAAM,CAAC,WAAW,gBAAgB,aAAa,MAAM;CACrD,MAAM,CAAC,OAAO,YAAY,aAAgC,OAAU;CACpE,MAAM,CAAC,QAAQ,aAAa,aAAoC,OAAO;CAEvE,MAAM,SAAS,iBAAiB;EAI9B,MAAMA,gBAAmE;GACvE,IAAI;GACJ,MAAM,QAAQ;GACd,uBAAuB;GACvB,UAAU;IACR,GAAG,QAAQ;IACX,WAAW;IACX,UAAU;IACX;GAID,YAAY,MAAe,QAAQ,WAAW,EAAE;GAGhD,UAAU,MAAa,QAAQ,UAAU,EAAE;GAC3C,aAAa,GAAW,MAAe,QAAQ,aAAa,GAAG,EAAE;GACjE,UAAU,MAAmB,QAAQ,UAAU,EAAE;GACjD,gBAAgB;GAChB,iBAAiB;GACjB,eAAe;GACf,gBAAgB;GACjB;AAED,MAAI,QAAQ,WACV,QAAO,IAAI,iBAA2C;GACpD,GAAG;GACH,YAAY,QAAQ;GACrB,CAAC;AAGJ,MAAI,QAAQ,QACV,QAAO,IAAI,iBAA2C;GACpD,GAAG;GACH,SAAS,QAAQ;GAClB,CAAC;AAGJ,QAAM,IAAI,MACR,+DACD;IACA,CAAC,SAAS,CAAC;AAGd,oBAAmB;EACjB,MAAM,cAAc,QAAQ;AAC5B,UAAQ,CAAC,cAAc,EACrB,GAAI,gBAAgB,UAAa,EAAE,MAAM,aAAa,EACvD,CAAC;GACF;AAEF,eAAc;AACZ,UAAQ,CAAC,eAAe;GACxB;AAGF,iBAAgB;AACd,UAAQ,CAAC,SAAS;GAClB;CAEF,MAAM,WAAW,OAAO,UAAkB;AACxC,QAAM,QAAQ,CAAC,SAAS,MAAM;;CAGhC,MAAM,aAAa;AACjB,UAAQ,CAAC,MAAM;;CAGjB,MAAM,cAAc;AAClB,UAAQ,CAAC,OAAO;;AAGlB,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/use-summarize.d.ts

@@ -0,0 +1,93 @@
+import { Accessor } from "solid-js";
+import { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutputFromReturn, SummarizeGenerateInput } from "@tanstack/ai-client";
+import { StreamChunk, SummarizationResult } from "@tanstack/ai";
+
+//#region src/use-summarize.d.ts
+
+/**
+ * Options for the useSummarize hook.
+ *
+ * @template TOutput - The transformed output type (defaults to SummarizationResult)
+ */
+interface UseSummarizeOptions<TOutput = SummarizationResult> {
+  /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */
+  connection?: ConnectConnectionAdapter;
+  /** Direct async function for summarization */
+  fetcher?: GenerationFetcher<SummarizeGenerateInput, SummarizationResult>;
+  /** Unique identifier for this generation instance */
+  id?: string;
+  /** Additional body parameters to send with connect-based adapter requests */
+  body?: Record<string, any>;
+  /** Display options for TanStack AI Devtools. */
+  devtools?: AIDevtoolsDisplayOptions;
+  /**
+   * 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 (connect-based adapter mode only) */
+  onChunk?: (chunk: StreamChunk) => void;
+}
+/**
+ * Return type for the useSummarize hook.
+ *
+ * @template TOutput - The transformed output type (defaults to SummarizationResult)
+ */
+interface UseSummarizeReturn<TOutput = SummarizationResult> {
+  /** Trigger summarization */
+  generate: (input: SummarizeGenerateInput) => Promise<void>;
+  /** The summarization result, or null */
+  result: Accessor<TOutput | null>;
+  /** Whether summarization is in progress */
+  isLoading: Accessor<boolean>;
+  /** Current error, if any */
+  error: Accessor<Error | undefined>;
+  /** Current state of the generation */
+  status: Accessor<GenerationClientState>;
+  /** Abort the current summarization */
+  stop: () => void;
+  /** Clear result, error, and return to idle */
+  reset: () => void;
+}
+/**
+ * Solid hook for summarizing text using AI models.
+ *
+ * @example
+ * ```tsx
+ * import { useSummarize } from '@tanstack/ai-solid'
+ * 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>
+ *   )
+ * }
+ * ```
+ */
+declare function useSummarize<TTransformed = void>(options: Omit<UseSummarizeOptions, 'onResult'> & {
+  onResult?: (result: SummarizationResult) => TTransformed;
+}): UseSummarizeReturn<InferGenerationOutputFromReturn<SummarizationResult, TTransformed>>;
+//#endregion
+export { UseSummarizeOptions, UseSummarizeReturn, useSummarize };
+//# sourceMappingURL=use-summarize.d.ts.map

package/dist/use-summarize.js

@@ -0,0 +1,57 @@
+import { useGeneration } from "./use-generation.js";
+
+//#region src/use-summarize.ts
+/**
+* Solid hook for summarizing text using AI models.
+*
+* @example
+* ```tsx
+* import { useSummarize } from '@tanstack/ai-solid'
+* 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>
+*   )
+* }
+* ```
+*/
+function useSummarize(options) {
+	const devtools = {
+		...options.devtools,
+		framework: "solid",
+		hookName: "useSummarize",
+		outputKind: "text"
+	};
+	const { generate, result, isLoading, error, status, stop, reset } = useGeneration({
+		...options,
+		devtools
+	});
+	return {
+		generate,
+		result,
+		isLoading,
+		error,
+		status,
+		stop,
+		reset
+	};
+}
+
+//#endregion
+export { useSummarize };
+//# sourceMappingURL=use-summarize.js.map

package/dist/use-summarize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-summarize.js","names":[],"sources":["../src/use-summarize.ts"],"sourcesContent":["import { useGeneration } from './use-generation'\nimport type { StreamChunk, SummarizationResult } from '@tanstack/ai'\nimport type {\n  AIDevtoolsDisplayOptions,\n  ConnectConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutputFromReturn,\n  SummarizeGenerateInput,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useSummarize hook.\n *\n * @template TOutput - The transformed output type (defaults to SummarizationResult)\n */\nexport interface UseSummarizeOptions<TOutput = SummarizationResult> {\n  /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */\n  connection?: ConnectConnectionAdapter\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 connect-based adapter requests */\n  body?: Record<string, any>\n  /** Display options for TanStack AI Devtools. */\n  devtools?: AIDevtoolsDisplayOptions\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 (connect-based adapter mode only) */\n  onChunk?: (chunk: StreamChunk) => void\n}\n\n/**\n * Return type for the useSummarize hook.\n *\n * @template TOutput - The transformed output type (defaults to SummarizationResult)\n */\nexport interface UseSummarizeReturn<TOutput = SummarizationResult> {\n  /** Trigger summarization */\n  generate: (input: SummarizeGenerateInput) => Promise<void>\n  /** The summarization result, or null */\n  result: Accessor<TOutput | null>\n  /** Whether summarization is in progress */\n  isLoading: Accessor<boolean>\n  /** Current error, if any */\n  error: Accessor<Error | undefined>\n  /** Current state of the generation */\n  status: Accessor<GenerationClientState>\n  /** Abort the current summarization */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * Solid hook for summarizing text using AI models.\n *\n * @example\n * ```tsx\n * import { useSummarize } from '@tanstack/ai-solid'\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<TTransformed = void>(\n  options: Omit<UseSummarizeOptions, 'onResult'> & {\n    onResult?: (result: SummarizationResult) => TTransformed\n  },\n): UseSummarizeReturn<\n  InferGenerationOutputFromReturn<SummarizationResult, TTransformed>\n> {\n  const devtools = {\n    ...options.devtools,\n    framework: 'solid',\n    hookName: 'useSummarize',\n    outputKind: 'text' as const,\n  }\n  const { generate, result, isLoading, error, status, stop, reset } =\n    useGeneration<SummarizeGenerateInput, SummarizationResult, TTransformed>({\n      ...options,\n      devtools,\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA,SAAgB,aACd,SAKA;CACA,MAAM,WAAW;EACf,GAAG,QAAQ;EACX,WAAW;EACX,UAAU;EACV,YAAY;EACb;CACD,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cAAyE;EACvE,GAAG;EACH;EACD,CAAC;AAEJ,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/use-transcription.d.ts

@@ -0,0 +1,99 @@
+import { Accessor } from "solid-js";
+import { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutputFromReturn, TranscriptionGenerateInput } from "@tanstack/ai-client";
+import { StreamChunk, TranscriptionResult } from "@tanstack/ai";
+
+//#region src/use-transcription.d.ts
+
+/**
+ * Options for the useTranscription hook.
+ *
+ * @template TOutput - The transformed output type (defaults to TranscriptionResult)
+ */
+interface UseTranscriptionOptions<TOutput = TranscriptionResult> {
+  /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */
+  connection?: ConnectConnectionAdapter;
+  /** Direct async function for transcription */
+  fetcher?: GenerationFetcher<TranscriptionGenerateInput, TranscriptionResult>;
+  /** Unique identifier for this generation instance */
+  id?: string;
+  /** Additional body parameters to send with connect-based adapter requests */
+  body?: Record<string, any>;
+  /** Display options for TanStack AI Devtools. */
+  devtools?: AIDevtoolsDisplayOptions;
+  /**
+   * 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 (connect-based adapter mode only) */
+  onChunk?: (chunk: StreamChunk) => void;
+}
+/**
+ * Return type for the useTranscription hook.
+ *
+ * @template TOutput - The transformed output type (defaults to TranscriptionResult)
+ */
+interface UseTranscriptionReturn<TOutput = TranscriptionResult> {
+  /** Trigger transcription */
+  generate: (input: TranscriptionGenerateInput) => Promise<void>;
+  /** The transcription result, or null */
+  result: Accessor<TOutput | null>;
+  /** Whether transcription is in progress */
+  isLoading: Accessor<boolean>;
+  /** Current error, if any */
+  error: Accessor<Error | undefined>;
+  /** Current state of the generation */
+  status: Accessor<GenerationClientState>;
+  /** Abort the current transcription */
+  stop: () => void;
+  /** Clear result, error, and return to idle */
+  reset: () => void;
+}
+/**
+ * Solid hook for transcribing audio to text using AI models.
+ *
+ * @example
+ * ```tsx
+ * import { useTranscription } from '@tanstack/ai-solid'
+ * import { fetchServerSentEvents } from '@tanstack/ai-client'
+ *
+ * function Transcriber() {
+ *   const { generate, result, isLoading } = useTranscription({
+ *     connection: fetchServerSentEvents('/api/transcribe'),
+ *   })
+ *
+ *   const handleFile = (e: Event) => {
+ *     const input = e.target as HTMLInputElement
+ *     const file = input.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>
+ *   )
+ * }
+ * ```
+ */
+declare function useTranscription<TTransformed = void>(options: Omit<UseTranscriptionOptions, 'onResult'> & {
+  onResult?: (result: TranscriptionResult) => TTransformed;
+}): UseTranscriptionReturn<InferGenerationOutputFromReturn<TranscriptionResult, TTransformed>>;
+//#endregion
+export { UseTranscriptionOptions, UseTranscriptionReturn, useTranscription };
+//# sourceMappingURL=use-transcription.d.ts.map

package/dist/use-transcription.js

@@ -0,0 +1,63 @@
+import { useGeneration } from "./use-generation.js";
+
+//#region src/use-transcription.ts
+/**
+* Solid hook for transcribing audio to text using AI models.
+*
+* @example
+* ```tsx
+* import { useTranscription } from '@tanstack/ai-solid'
+* import { fetchServerSentEvents } from '@tanstack/ai-client'
+*
+* function Transcriber() {
+*   const { generate, result, isLoading } = useTranscription({
+*     connection: fetchServerSentEvents('/api/transcribe'),
+*   })
+*
+*   const handleFile = (e: Event) => {
+*     const input = e.target as HTMLInputElement
+*     const file = input.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>
+*   )
+* }
+* ```
+*/
+function useTranscription(options) {
+	const devtools = {
+		...options.devtools,
+		framework: "solid",
+		hookName: "useTranscription",
+		outputKind: "text"
+	};
+	const { generate, result, isLoading, error, status, stop, reset } = useGeneration({
+		...options,
+		devtools
+	});
+	return {
+		generate,
+		result,
+		isLoading,
+		error,
+		status,
+		stop,
+		reset
+	};
+}
+
+//#endregion
+export { useTranscription };
+//# sourceMappingURL=use-transcription.js.map

package/dist/use-transcription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-transcription.js","names":[],"sources":["../src/use-transcription.ts"],"sourcesContent":["import { useGeneration } from './use-generation'\nimport type { StreamChunk, TranscriptionResult } from '@tanstack/ai'\nimport type {\n  AIDevtoolsDisplayOptions,\n  ConnectConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutputFromReturn,\n  TranscriptionGenerateInput,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useTranscription hook.\n *\n * @template TOutput - The transformed output type (defaults to TranscriptionResult)\n */\nexport interface UseTranscriptionOptions<TOutput = TranscriptionResult> {\n  /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */\n  connection?: ConnectConnectionAdapter\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 connect-based adapter requests */\n  body?: Record<string, any>\n  /** Display options for TanStack AI Devtools. */\n  devtools?: AIDevtoolsDisplayOptions\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 (connect-based adapter mode only) */\n  onChunk?: (chunk: StreamChunk) => void\n}\n\n/**\n * Return type for the useTranscription hook.\n *\n * @template TOutput - The transformed output type (defaults to TranscriptionResult)\n */\nexport interface UseTranscriptionReturn<TOutput = TranscriptionResult> {\n  /** Trigger transcription */\n  generate: (input: TranscriptionGenerateInput) => Promise<void>\n  /** The transcription result, or null */\n  result: Accessor<TOutput | null>\n  /** Whether transcription is in progress */\n  isLoading: Accessor<boolean>\n  /** Current error, if any */\n  error: Accessor<Error | undefined>\n  /** Current state of the generation */\n  status: Accessor<GenerationClientState>\n  /** Abort the current transcription */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * Solid hook for transcribing audio to text using AI models.\n *\n * @example\n * ```tsx\n * import { useTranscription } from '@tanstack/ai-solid'\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: Event) => {\n *     const input = e.target as HTMLInputElement\n *     const file = input.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<TTransformed = void>(\n  options: Omit<UseTranscriptionOptions, 'onResult'> & {\n    onResult?: (result: TranscriptionResult) => TTransformed\n  },\n): UseTranscriptionReturn<\n  InferGenerationOutputFromReturn<TranscriptionResult, TTransformed>\n> {\n  const devtools = {\n    ...options.devtools,\n    framework: 'solid',\n    hookName: 'useTranscription',\n    outputKind: 'text' as const,\n  }\n  const { generate, result, isLoading, error, status, stop, reset } =\n    useGeneration<\n      TranscriptionGenerateInput,\n      TranscriptionResult,\n      TTransformed\n    >({ ...options, devtools })\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqGA,SAAgB,iBACd,SAKA;CACA,MAAM,WAAW;EACf,GAAG,QAAQ;EACX,WAAW;EACX,UAAU;EACV,YAAY;EACb;CACD,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cAIE;EAAE,GAAG;EAAS;EAAU,CAAC;AAE7B,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-solid",
-  "version": "0.13.14",
+  "version": "0.14.0",
   "description": "Solid hooks for TanStack AI streaming chat, structured outputs, and media generation.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -45,11 +45,11 @@
     "media-generation"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "0.18.5"
+    "@tanstack/ai-client": "0.19.0"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.10",
-    "@tanstack/ai": "^0.36.0"
+    "@tanstack/ai": "^0.38.0"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",
@@ -61,7 +61,7 @@
     "tsdown": "^0.17.0-beta.6",
     "typescript": "5.9.3",
     "vitest": "^4.0.14",
-    "@tanstack/ai": "0.36.0"
+    "@tanstack/ai": "0.38.0"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/index.ts

@@ -47,6 +47,12 @@ export type {
   UseGenerateVideoReturn,
 } from './use-generate-video'
 
+export { useAudioRecorder } from './use-audio-recorder'
+export type {
+  UseAudioRecorderOptions,
+  UseAudioRecorderReturn,
+} from './use-audio-recorder'
+
 // Re-export from ai-client for convenience
 export {
   fetchServerSentEvents,

package/src/use-audio-recorder.ts

@@ -0,0 +1,87 @@
+import { createSignal, onCleanup } from 'solid-js'
+import { AudioRecorder } from '@tanstack/ai-client'
+import type {
+  AudioRecorderOptions,
+  AudioRecording,
+  InferAudioRecordingOutput,
+} from '@tanstack/ai-client'
+
+export type UseAudioRecorderOptions<TOnComplete> = AudioRecorderOptions & {
+  /**
+   * Optional transform applied to the recording when `stop()` resolves. Its
+   * (awaited) return value becomes `recording` and the resolved value of
+   * `stop()`. Return nothing to keep the raw `AudioRecording`.
+   */
+  onComplete?: TOnComplete
+}
+
+export interface UseAudioRecorderReturn<TOutput> {
+  /** Solid accessor: latest recording (transformed if `onComplete` provided), or null. */
+  recording: () => TOutput | null
+  /** Solid accessor: true while actively capturing audio. */
+  isRecording: () => boolean
+  /** Whether the browser supports recording. */
+  isSupported: boolean
+  start: () => Promise<void>
+  /** Stop and resolve with the completed recording (transformed if `onComplete` provided). */
+  stop: () => Promise<TOutput>
+  /** Discard the in-progress recording and release the mic. */
+  cancel: () => void
+}
+
+/**
+ * Solid hook for recording an audio message. The resolved recording carries
+ * `.part` (for `useChat.sendMessage`) and `.base64` (for generation hooks).
+ *
+ * Errors are delivered via `onError`. `start()` and `stop()` also reject on
+ * failure (and `stop()` rejects with `Recording cancelled` if `cancel()` runs
+ * while a stop is in flight, e.g. on unmount) — handle one channel, not both.
+ */
+export function useAudioRecorder<
+  TOnComplete extends (recording: AudioRecording) => unknown,
+>(
+  options: UseAudioRecorderOptions<TOnComplete>,
+): UseAudioRecorderReturn<InferAudioRecordingOutput<TOnComplete>>
+export function useAudioRecorder(
+  options?: UseAudioRecorderOptions<undefined>,
+): UseAudioRecorderReturn<AudioRecording>
+export function useAudioRecorder(
+  options: UseAudioRecorderOptions<(recording: AudioRecording) => unknown> = {},
+): UseAudioRecorderReturn<unknown> {
+  const recorder = new AudioRecorder({
+    ...(options.audio !== undefined && { audio: options.audio }),
+    ...(options.mimeType !== undefined && { mimeType: options.mimeType }),
+    ...(options.onError !== undefined && { onError: options.onError }),
+  })
+  const [isRecording, setIsRecording] = createSignal(false)
+  const [recording, setRecording] = createSignal<unknown>(null)
+
+  const unsubscribe = recorder.subscribe((state) => {
+    setIsRecording(state === 'recording')
+  })
+
+  onCleanup(() => {
+    unsubscribe()
+    recorder.cancel()
+  })
+
+  const stop = async (): Promise<unknown> => {
+    const rawRecording = await recorder.stop()
+    const transformed = await options.onComplete?.(rawRecording)
+    // Only `undefined` (returning nothing) keeps the raw recording; a returned
+    // null is a real value, matching the inferred output type.
+    const output = transformed === undefined ? rawRecording : transformed
+    // Store via updater so a function-valued transform result isn't invoked.
+    setRecording(() => output)
+    return output
+  }
+
+  return {
+    recording,
+    isRecording,
+    isSupported: AudioRecorder.isSupported(),
+    start: () => recorder.start(),
+    stop,
+    cancel: () => recorder.cancel(),
+  }
+}

package/src/use-generate-audio.ts

@@ -6,7 +6,7 @@ import type {
   ConnectConnectionAdapter,
   GenerationClientState,
   GenerationFetcher,
-  InferGenerationOutput,
+  InferGenerationOutputFromReturn,
 } from '@tanstack/ai-client'
 import type { Accessor } from 'solid-js'
 
@@ -88,15 +88,12 @@ export interface UseGenerateAudioReturn<TOutput = AudioGenerationResult> {
  * }
  * ```
  */
-export function useGenerateAudio<
-  TOnResult extends ((result: AudioGenerationResult) => any) | undefined =
-    undefined,
->(
+export function useGenerateAudio<TTransformed = void>(
   options: Omit<UseGenerateAudioOptions, 'onResult'> & {
-    onResult?: TOnResult
+    onResult?: (result: AudioGenerationResult) => TTransformed
   },
 ): UseGenerateAudioReturn<
-  InferGenerationOutput<AudioGenerationResult, TOnResult>
+  InferGenerationOutputFromReturn<AudioGenerationResult, TTransformed>
 > {
   const devtools = {
     ...options.devtools,
@@ -105,7 +102,7 @@ export function useGenerateAudio<
     outputKind: 'audio' as const,
   }
   const { generate, result, isLoading, error, status, stop, reset } =
-    useGeneration<AudioGenerateInput, AudioGenerationResult, TOnResult>({
+    useGeneration<AudioGenerateInput, AudioGenerationResult, TTransformed>({
       ...options,
       devtools,
     })

package/src/use-generate-image.ts

@@ -6,7 +6,7 @@ import type {
   GenerationClientState,
   GenerationFetcher,
   ImageGenerateInput,
-  InferGenerationOutput,
+  InferGenerationOutputFromReturn,
 } from '@tanstack/ai-client'
 import type { Accessor } from 'solid-js'
 
@@ -96,15 +96,12 @@ export interface UseGenerateImageReturn<TOutput = ImageGenerationResult> {
  * }
  * ```
  */
-export function useGenerateImage<
-  TOnResult extends ((result: ImageGenerationResult) => any) | undefined =
-    undefined,
->(
+export function useGenerateImage<TTransformed = void>(
   options: Omit<UseGenerateImageOptions, 'onResult'> & {
-    onResult?: TOnResult
+    onResult?: (result: ImageGenerationResult) => TTransformed
   },
 ): UseGenerateImageReturn<
-  InferGenerationOutput<ImageGenerationResult, TOnResult>
+  InferGenerationOutputFromReturn<ImageGenerationResult, TTransformed>
 > {
   const devtools = {
     ...options.devtools,
@@ -113,7 +110,7 @@ export function useGenerateImage<
     outputKind: 'image' as const,
   }
   const { generate, result, isLoading, error, status, stop, reset } =
-    useGeneration<ImageGenerateInput, ImageGenerationResult, TOnResult>({
+    useGeneration<ImageGenerateInput, ImageGenerationResult, TTransformed>({
       ...options,
       devtools,
     })