@tanstack/ai-react 0.15.14 → 0.16.0

package/dist/esm/use-chat.js

@@ -0,0 +1,258 @@
+import { ChatClient } from "@tanstack/ai-client";
+import { createChatDevtoolsBridge } from "@tanstack/ai-client/devtools";
+import { useId, useState, useRef, useMemo, useEffect, useCallback } from "react";
+function useChat(options) {
+  const hookId = useId();
+  const clientId = options.id || hookId;
+  const [messages, setMessages] = useState(
+    options.initialMessages || []
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(void 0);
+  const [status, setStatus] = useState("ready");
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState("disconnected");
+  const [sessionGenerating, setSessionGenerating] = useState(false);
+  const messagesRef = useRef(
+    options.initialMessages || []
+  );
+  const isFirstMountRef = useRef(true);
+  const activeClientRef = useRef(null);
+  const cleanupInvalidationRef = useRef(
+    null
+  );
+  messagesRef.current = messages;
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const client = useMemo(() => {
+    const messagesToUse = options.initialMessages || [];
+    isFirstMountRef.current = false;
+    const initialOptions = optionsRef.current;
+    const transport = initialOptions.connection ? { connection: initialOptions.connection } : { fetcher: initialOptions.fetcher };
+    const instance = new ChatClient({
+      devtoolsBridgeFactory: createChatDevtoolsBridge,
+      ...transport,
+      id: clientId,
+      initialMessages: messagesToUse,
+      ...initialOptions.body !== void 0 && { body: initialOptions.body },
+      ...initialOptions.threadId !== void 0 && {
+        threadId: initialOptions.threadId
+      },
+      ...initialOptions.forwardedProps !== void 0 && {
+        forwardedProps: initialOptions.forwardedProps
+      },
+      ...initialOptions.persistence !== void 0 && {
+        persistence: initialOptions.persistence
+      },
+      ...initialOptions.context !== void 0 && {
+        context: initialOptions.context
+      },
+      devtools: {
+        ...initialOptions.devtools,
+        framework: "react",
+        hookName: "useChat",
+        outputKind: initialOptions.outputSchema ? "structured" : "chat"
+      },
+      onResponse: (response) => {
+        if (activeClientRef.current !== instance) return;
+        void optionsRef.current.onResponse?.(response);
+      },
+      onChunk: (chunk) => {
+        if (activeClientRef.current !== instance) return;
+        optionsRef.current.onChunk?.(chunk);
+      },
+      onFinish: (message) => {
+        if (activeClientRef.current !== instance) return;
+        optionsRef.current.onFinish?.(message);
+      },
+      onError: (error2) => {
+        if (activeClientRef.current !== instance) return;
+        optionsRef.current.onError?.(error2);
+      },
+      ...initialOptions.tools !== void 0 && {
+        tools: initialOptions.tools
+      },
+      onCustomEvent: (eventType, data, context) => {
+        if (activeClientRef.current !== instance) return;
+        optionsRef.current.onCustomEvent?.(eventType, data, context);
+      },
+      ...options.streamProcessor !== void 0 && {
+        streamProcessor: options.streamProcessor
+      },
+      onMessagesChange: (newMessages) => {
+        if (activeClientRef.current !== instance) return;
+        setMessages(newMessages);
+      },
+      onLoadingChange: (newIsLoading) => {
+        if (activeClientRef.current !== instance) return;
+        setIsLoading(newIsLoading);
+      },
+      onErrorChange: (newError) => {
+        if (activeClientRef.current !== instance) return;
+        setError(newError);
+      },
+      onStatusChange: (status2) => {
+        if (activeClientRef.current !== instance) return;
+        setStatus(status2);
+      },
+      onSubscriptionChange: (nextIsSubscribed) => {
+        if (activeClientRef.current !== instance) return;
+        setIsSubscribed(nextIsSubscribed);
+      },
+      onConnectionStatusChange: (nextStatus) => {
+        if (activeClientRef.current !== instance) return;
+        setConnectionStatus(nextStatus);
+      },
+      onSessionGeneratingChange: (isGenerating) => {
+        if (activeClientRef.current !== instance) return;
+        setSessionGenerating(isGenerating);
+      }
+    });
+    activeClientRef.current = instance;
+    return instance;
+  }, [clientId]);
+  useEffect(() => {
+    const clientMessages = client.getMessages();
+    if (clientMessages !== messagesRef.current) {
+      setMessages(clientMessages);
+    }
+  }, [client]);
+  useEffect(() => {
+    client.updateOptions({ body: options.body });
+  }, [client, options.body]);
+  useEffect(() => {
+    if (options.forwardedProps !== void 0) {
+      client.updateOptions({ forwardedProps: options.forwardedProps });
+    }
+  }, [client, options.forwardedProps]);
+  useEffect(() => {
+    if (options.tools !== void 0) {
+      client.updateOptions({ tools: options.tools });
+    }
+  }, [client, options.tools]);
+  useEffect(() => {
+    client.updateOptions({ context: options.context });
+  }, [client, options.context]);
+  useEffect(() => {
+    if (options.live) {
+      client.subscribe();
+    } else {
+      client.unsubscribe();
+    }
+  }, [client, options.live]);
+  useEffect(() => {
+    if (cleanupInvalidationRef.current) {
+      clearTimeout(cleanupInvalidationRef.current);
+      cleanupInvalidationRef.current = null;
+    }
+    activeClientRef.current = client;
+    client.mountDevtools();
+    return () => {
+      cleanupInvalidationRef.current = setTimeout(() => {
+        if (activeClientRef.current === client) {
+          activeClientRef.current = null;
+        }
+        cleanupInvalidationRef.current = null;
+      }, 0);
+      if (optionsRef.current.live) {
+        client.unsubscribe();
+      } else {
+        client.stop();
+      }
+      client.dispose();
+    };
+  }, [client]);
+  const sendMessage = useCallback(
+    async (content) => {
+      await client.sendMessage(content);
+    },
+    [client]
+  );
+  const append = useCallback(
+    async (message) => {
+      await client.append(message);
+    },
+    [client]
+  );
+  const reload = useCallback(async () => {
+    await client.reload();
+  }, [client]);
+  const stop = useCallback(() => {
+    client.stop();
+  }, [client]);
+  const clear = useCallback(() => {
+    client.clear();
+  }, [client]);
+  const setMessagesManually = useCallback(
+    (newMessages) => {
+      client.setMessagesManually(newMessages);
+    },
+    [client]
+  );
+  const addToolResult = useCallback(
+    async (result) => {
+      await client.addToolResult(result);
+    },
+    [client]
+  );
+  const addToolApprovalResponse = useCallback(
+    async (response) => {
+      await client.addToolApprovalResponse(response);
+    },
+    [client]
+  );
+  const renderedMessages = client.getMessages();
+  const activeStructuredPart = useMemo(() => {
+    let lastUserIndex = -1;
+    for (let i = renderedMessages.length - 1; i >= 0; i--) {
+      if (renderedMessages[i]?.role === "user") {
+        lastUserIndex = i;
+        break;
+      }
+    }
+    if (lastUserIndex === -1) return null;
+    for (let i = renderedMessages.length - 1; i > lastUserIndex; i--) {
+      const m = renderedMessages[i];
+      if (m?.role !== "assistant") continue;
+      const part = m.parts.find(
+        (p) => p.type === "structured-output"
+      );
+      if (part) return part;
+    }
+    return null;
+  }, [renderedMessages]);
+  const partial = useMemo(() => {
+    if (!activeStructuredPart) return {};
+    const v = activeStructuredPart.partial ?? activeStructuredPart.data;
+    return v ?? {};
+  }, [activeStructuredPart]);
+  const final = useMemo(() => {
+    if (!activeStructuredPart || activeStructuredPart.status !== "complete") {
+      return null;
+    }
+    return activeStructuredPart.data;
+  }, [activeStructuredPart]);
+  return {
+    messages: renderedMessages,
+    sendMessage,
+    append,
+    reload,
+    stop,
+    isLoading,
+    error,
+    status,
+    isSubscribed,
+    connectionStatus,
+    sessionGenerating,
+    setMessages: setMessagesManually,
+    clear,
+    addToolResult,
+    addToolApprovalResponse,
+    partial,
+    final
+  };
+}
+export {
+  useChat
+};
+//# sourceMappingURL=use-chat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-chat.js","sources":["../../src/use-chat.ts"],"sourcesContent":["import { ChatClient } from '@tanstack/ai-client'\nimport { createChatDevtoolsBridge } from '@tanstack/ai-client/devtools'\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'\nimport type {\n  AnyClientTool,\n  InferSchemaType,\n  ModelMessage,\n  SchemaInput,\n  StreamChunk,\n} from '@tanstack/ai/client'\nimport type {\n  ChatClientState,\n  ConnectionStatus,\n  InferredClientContext,\n  StructuredOutputPart,\n} from '@tanstack/ai-client'\n\nimport type {\n  DeepPartial,\n  MultimodalContent,\n  UIMessage,\n  UseChatOptions,\n  UseChatReturn,\n} from './types'\n\nexport function useChat<\n  TTools extends ReadonlyArray<AnyClientTool> = any,\n  TSchema extends SchemaInput | undefined = undefined,\n  TContext = InferredClientContext<TTools>,\n>(\n  options: UseChatOptions<TTools, TSchema, TContext>,\n): UseChatReturn<TTools, TSchema> {\n  const hookId = useId()\n  const clientId = options.id || hookId\n\n  const [messages, setMessages] = useState<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const [isLoading, setIsLoading] = useState(false)\n  const [error, setError] = useState<Error | undefined>(undefined)\n  const [status, setStatus] = useState<ChatClientState>('ready')\n  const [isSubscribed, setIsSubscribed] = useState(false)\n  const [connectionStatus, setConnectionStatus] =\n    useState<ConnectionStatus>('disconnected')\n  const [sessionGenerating, setSessionGenerating] = useState(false)\n\n  type Partial = DeepPartial<InferSchemaType<NonNullable<TSchema>>>\n  type Final = InferSchemaType<NonNullable<TSchema>>\n\n  // Track current messages in a ref to preserve them when client is recreated\n  const messagesRef = useRef<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const isFirstMountRef = useRef(true)\n  const activeClientRef = useRef<ChatClient | null>(null)\n  const cleanupInvalidationRef = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  )\n\n  // Update ref synchronously during render so it's always current when useMemo runs.\n  messagesRef.current = messages\n\n  // Track current options in a ref to avoid recreating client when options change\n  const optionsRef = useRef<UseChatOptions<TTools, TSchema, TContext>>(options)\n  optionsRef.current = options\n\n  // Create ChatClient instance with callbacks to sync state\n  const client = useMemo(() => {\n    const messagesToUse = options.initialMessages || []\n    isFirstMountRef.current = false\n\n    // Build options with conditional spreads for fields whose source\n    // type is `T | undefined` but the ChatClient target uses a strict\n    // optional (`field?: T`) — `exactOptionalPropertyTypes` rejects\n    // assigning `undefined` to those, so we omit the key when absent.\n    const initialOptions = optionsRef.current\n    const transport = initialOptions.connection\n      ? { connection: initialOptions.connection }\n      : { fetcher: initialOptions.fetcher }\n\n    const instance = new ChatClient<TTools, TContext>({\n      devtoolsBridgeFactory: createChatDevtoolsBridge,\n      ...transport,\n      id: clientId,\n      initialMessages: messagesToUse,\n      ...(initialOptions.body !== undefined && { body: initialOptions.body }),\n      ...(initialOptions.threadId !== undefined && {\n        threadId: initialOptions.threadId,\n      }),\n      ...(initialOptions.forwardedProps !== undefined && {\n        forwardedProps: initialOptions.forwardedProps,\n      }),\n      ...(initialOptions.persistence !== undefined && {\n        persistence: initialOptions.persistence,\n      }),\n      ...(initialOptions.context !== undefined && {\n        context: initialOptions.context,\n      }),\n      devtools: {\n        ...initialOptions.devtools,\n        framework: 'react',\n        hookName: 'useChat',\n        outputKind: initialOptions.outputSchema ? 'structured' : 'chat',\n      },\n      onResponse: (response) => {\n        if (activeClientRef.current !== instance) return\n        void optionsRef.current.onResponse?.(response)\n      },\n      onChunk: (chunk: StreamChunk) => {\n        if (activeClientRef.current !== instance) return\n        optionsRef.current.onChunk?.(chunk)\n      },\n      onFinish: (message: UIMessage<TTools>) => {\n        if (activeClientRef.current !== instance) return\n        optionsRef.current.onFinish?.(message)\n      },\n      onError: (error: Error) => {\n        if (activeClientRef.current !== instance) return\n        optionsRef.current.onError?.(error)\n      },\n      ...(initialOptions.tools !== undefined && {\n        tools: initialOptions.tools,\n      }),\n      onCustomEvent: (eventType, data, context) => {\n        if (activeClientRef.current !== instance) return\n        optionsRef.current.onCustomEvent?.(eventType, data, context)\n      },\n      ...(options.streamProcessor !== undefined && {\n        streamProcessor: options.streamProcessor,\n      }),\n      onMessagesChange: (newMessages: Array<UIMessage<TTools>>) => {\n        if (activeClientRef.current !== instance) return\n        setMessages(newMessages)\n      },\n      onLoadingChange: (newIsLoading: boolean) => {\n        if (activeClientRef.current !== instance) return\n        setIsLoading(newIsLoading)\n      },\n      onErrorChange: (newError: Error | undefined) => {\n        if (activeClientRef.current !== instance) return\n        setError(newError)\n      },\n      onStatusChange: (status: ChatClientState) => {\n        if (activeClientRef.current !== instance) return\n        setStatus(status)\n      },\n      onSubscriptionChange: (nextIsSubscribed: boolean) => {\n        if (activeClientRef.current !== instance) return\n        setIsSubscribed(nextIsSubscribed)\n      },\n      onConnectionStatusChange: (nextStatus: ConnectionStatus) => {\n        if (activeClientRef.current !== instance) return\n        setConnectionStatus(nextStatus)\n      },\n      onSessionGeneratingChange: (isGenerating: boolean) => {\n        if (activeClientRef.current !== instance) return\n        setSessionGenerating(isGenerating)\n      },\n    })\n    activeClientRef.current = instance\n    return instance\n  }, [clientId])\n\n  useEffect(() => {\n    const clientMessages = client.getMessages()\n    if (clientMessages !== messagesRef.current) {\n      setMessages(clientMessages)\n    }\n  }, [client])\n\n  // Sync each wire-payload slot in its own effect so an unrelated option\n  // changing doesn't re-run the others. `updateOptions` declares strict-optional\n  // fields and rejects explicit `undefined` under EOPT, so guard the optional\n  // slots before passing them.\n  useEffect(() => {\n    client.updateOptions({ body: options.body })\n  }, [client, options.body])\n\n  useEffect(() => {\n    if (options.forwardedProps !== undefined) {\n      client.updateOptions({ forwardedProps: options.forwardedProps })\n    }\n  }, [client, options.forwardedProps])\n\n  useEffect(() => {\n    if (options.tools !== undefined) {\n      client.updateOptions({ tools: options.tools })\n    }\n  }, [client, options.tools])\n\n  useEffect(() => {\n    client.updateOptions({ context: options.context })\n  }, [client, options.context])\n\n  useEffect(() => {\n    if (options.live) {\n      client.subscribe()\n    } else {\n      client.unsubscribe()\n    }\n  }, [client, options.live])\n\n  useEffect(() => {\n    if (cleanupInvalidationRef.current) {\n      clearTimeout(cleanupInvalidationRef.current)\n      cleanupInvalidationRef.current = null\n    }\n    activeClientRef.current = client\n    client.mountDevtools()\n\n    return () => {\n      cleanupInvalidationRef.current = setTimeout(() => {\n        if (activeClientRef.current === client) {\n          activeClientRef.current = null\n        }\n        cleanupInvalidationRef.current = null\n      }, 0)\n      // Subscribe/unsubscribe on `options.live` is owned by the dedicated\n      // effect above. This cleanup only fires on unmount or client swap,\n      // so read `live` through the ref to avoid disposing the client every\n      // time `live` toggles.\n      if (optionsRef.current.live) {\n        client.unsubscribe()\n      } else {\n        client.stop()\n      }\n      client.dispose()\n    }\n  }, [client])\n\n  const sendMessage = useCallback(\n    async (content: string | MultimodalContent) => {\n      await client.sendMessage(content)\n    },\n    [client],\n  )\n\n  const append = useCallback(\n    async (message: ModelMessage | UIMessage) => {\n      await client.append(message)\n    },\n    [client],\n  )\n\n  const reload = useCallback(async () => {\n    await client.reload()\n  }, [client])\n\n  const stop = useCallback(() => {\n    client.stop()\n  }, [client])\n\n  const clear = useCallback(() => {\n    client.clear()\n  }, [client])\n\n  const setMessagesManually = useCallback(\n    (newMessages: Array<UIMessage<TTools>>) => {\n      client.setMessagesManually(newMessages)\n    },\n    [client],\n  )\n\n  const addToolResult = useCallback(\n    async (result: {\n      toolCallId: string\n      tool: string\n      output: any\n      state?: 'output-available' | 'output-error'\n      errorText?: string\n    }) => {\n      await client.addToolResult(result)\n    },\n    [client],\n  )\n\n  const addToolApprovalResponse = useCallback(\n    async (response: { id: string; approved: boolean }) => {\n      await client.addToolApprovalResponse(response)\n    },\n    [client],\n  )\n\n  // The \"active\" structured-output part is the one on the assistant message\n  // that follows the latest user message. No such message exists between\n  // sendMessage() and the first chunk, so partial/final naturally read as\n  // cleared. Historical parts on earlier assistant messages remain available\n  // via `messages` directly.\n  //\n  // When there is NO user message yet (e.g. `initialMessages` contains only\n  // a stale assistant turn or a system prompt) we deliberately return null\n  // rather than scanning historical assistants — otherwise a `final` from a\n  // previous session would leak into the hook value on first render.\n  const renderedMessages = client.getMessages()\n\n  const activeStructuredPart = useMemo<StructuredOutputPart | null>(() => {\n    let lastUserIndex = -1\n    for (let i = renderedMessages.length - 1; i >= 0; i--) {\n      if (renderedMessages[i]?.role === 'user') {\n        lastUserIndex = i\n        break\n      }\n    }\n    if (lastUserIndex === -1) return null\n    for (let i = renderedMessages.length - 1; i > lastUserIndex; i--) {\n      const m = renderedMessages[i]\n      if (m?.role !== 'assistant') continue\n      const part = m.parts.find(\n        (p): p is StructuredOutputPart => p.type === 'structured-output',\n      )\n      if (part) return part\n    }\n    return null\n  }, [renderedMessages])\n\n  const partial = useMemo<Partial>(() => {\n    if (!activeStructuredPart) return {} as Partial\n    const v = activeStructuredPart.partial ?? activeStructuredPart.data\n    return (v ?? {}) as Partial\n  }, [activeStructuredPart])\n\n  const final = useMemo<Final | null>(() => {\n    if (!activeStructuredPart || activeStructuredPart.status !== 'complete') {\n      return null\n    }\n    return activeStructuredPart.data as Final\n  }, [activeStructuredPart])\n\n  // The runtime shape unconditionally exposes partial/final; the public\n  // return type hides them when no outputSchema was supplied. TS can't\n  // structurally narrow across that conditional, so the `as` is the seam.\n  // eslint-disable-next-line no-restricted-syntax -- hook return shape diverges from generic UseChatReturn<TTools, TSchema> due to conditional type on TSchema; TS can't structurally narrow\n  return {\n    messages: renderedMessages,\n    sendMessage,\n    append,\n    reload,\n    stop,\n    isLoading,\n    error,\n    status,\n    isSubscribed,\n    connectionStatus,\n    sessionGenerating,\n    setMessages: setMessagesManually,\n    clear,\n    addToolResult,\n    addToolApprovalResponse,\n    partial,\n    final,\n  } as unknown as UseChatReturn<TTools, TSchema>\n}\n"],"names":["error","status"],"mappings":"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"}

package/dist/esm/use-generate-audio.d.ts

@@ -0,0 +1,87 @@
+import { AudioGenerationResult, StreamChunk } from '@tanstack/ai';
+import { AIDevtoolsDisplayOptions, AudioGenerateInput, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutputFromReturn } from '@tanstack/ai-client';
+/**
+ * Options for the useGenerateAudio hook.
+ *
+ * @template TOutput - The output type after optional transform (defaults to AudioGenerationResult)
+ */
+export interface UseGenerateAudioOptions<TOutput = AudioGenerationResult> {
+    /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */
+    connection?: ConnectConnectionAdapter;
+    /** Direct async function for audio generation */
+    fetcher?: GenerationFetcher<AudioGenerateInput, AudioGenerationResult>;
+    /** 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 audio 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: AudioGenerationResult) => 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 useGenerateAudio hook.
+ *
+ * @template TOutput - The output type (after optional transform)
+ */
+export interface UseGenerateAudioReturn<TOutput = AudioGenerationResult> {
+    /** Trigger audio generation */
+    generate: (input: AudioGenerateInput) => Promise<void>;
+    /** The generation result containing audio, 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 audio (music, sound effects) using AI models.
+ *
+ * Supports two transport modes:
+ * - **ConnectConnectionAdapter** — Streaming transport (SSE, HTTP stream, custom)
+ * - **Fetcher** — Direct async function call
+ *
+ * @example
+ * ```tsx
+ * import { useGenerateAudio } from '@tanstack/ai-react'
+ * import { fetchServerSentEvents } from '@tanstack/ai-client'
+ *
+ * function AudioGenerator() {
+ *   const { generate, result, isLoading, error, reset } = useGenerateAudio({
+ *     connection: fetchServerSentEvents('/api/generate/audio'),
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => generate({ prompt: 'An upbeat electronic track', duration: 10 })}>
+ *         Generate
+ *       </button>
+ *       {isLoading && <p>Generating...</p>}
+ *       {error && <p>Error: {error.message}</p>}
+ *       {result?.audio.url && <audio src={result.audio.url} controls />}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function useGenerateAudio<TTransformed = void>(options: Omit<UseGenerateAudioOptions, 'onResult'> & {
+    onResult?: (result: AudioGenerationResult) => TTransformed;
+}): UseGenerateAudioReturn<InferGenerationOutputFromReturn<AudioGenerationResult, TTransformed>>;

package/dist/esm/use-generate-audio.js

@@ -0,0 +1,26 @@
+import { useGeneration } from "./use-generation.js";
+function useGenerateAudio(options) {
+  const devtools = {
+    ...options.devtools,
+    framework: "react",
+    hookName: "useGenerateAudio",
+    outputKind: "audio"
+  };
+  const { generate, result, isLoading, error, status, stop, reset } = useGeneration({
+    ...options,
+    devtools
+  });
+  return {
+    generate,
+    result,
+    isLoading,
+    error,
+    status,
+    stop,
+    reset
+  };
+}
+export {
+  useGenerateAudio
+};
+//# sourceMappingURL=use-generate-audio.js.map

package/dist/esm/use-generate-audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-generate-audio.js","sources":["../../src/use-generate-audio.ts"],"sourcesContent":["import { useGeneration } from './use-generation'\nimport type { AudioGenerationResult, StreamChunk } from '@tanstack/ai'\nimport type {\n  AIDevtoolsDisplayOptions,\n  AudioGenerateInput,\n  ConnectConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutputFromReturn,\n} from '@tanstack/ai-client'\n\n/**\n * Options for the useGenerateAudio hook.\n *\n * @template TOutput - The output type after optional transform (defaults to AudioGenerationResult)\n */\nexport interface UseGenerateAudioOptions<TOutput = AudioGenerationResult> {\n  /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */\n  connection?: ConnectConnectionAdapter\n  /** Direct async function for audio generation */\n  fetcher?: GenerationFetcher<AudioGenerateInput, AudioGenerationResult>\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 audio is generated. 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: AudioGenerationResult) => 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 useGenerateAudio hook.\n *\n * @template TOutput - The output type (after optional transform)\n */\nexport interface UseGenerateAudioReturn<TOutput = AudioGenerationResult> {\n  /** Trigger audio generation */\n  generate: (input: AudioGenerateInput) => Promise<void>\n  /** The generation result containing audio, or null */\n  result: TOutput | null\n  /** Whether generation 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 generation */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * React hook for generating audio (music, sound effects) using AI models.\n *\n * Supports two transport modes:\n * - **ConnectConnectionAdapter** — Streaming transport (SSE, HTTP stream, custom)\n * - **Fetcher** — Direct async function call\n *\n * @example\n * ```tsx\n * import { useGenerateAudio } from '@tanstack/ai-react'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function AudioGenerator() {\n *   const { generate, result, isLoading, error, reset } = useGenerateAudio({\n *     connection: fetchServerSentEvents('/api/generate/audio'),\n *   })\n *\n *   return (\n *     <div>\n *       <button onClick={() => generate({ prompt: 'An upbeat electronic track', duration: 10 })}>\n *         Generate\n *       </button>\n *       {isLoading && <p>Generating...</p>}\n *       {error && <p>Error: {error.message}</p>}\n *       {result?.audio.url && <audio src={result.audio.url} controls />}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useGenerateAudio<TTransformed = void>(\n  options: Omit<UseGenerateAudioOptions, 'onResult'> & {\n    onResult?: (result: AudioGenerationResult) => TTransformed\n  },\n): UseGenerateAudioReturn<\n  InferGenerationOutputFromReturn<AudioGenerationResult, TTransformed>\n> {\n  const devtools = {\n    ...options.devtools,\n    framework: 'react',\n    hookName: 'useGenerateAudio',\n    outputKind: 'audio' as const,\n  }\n  const { generate, result, isLoading, error, status, stop, reset } =\n    useGeneration<AudioGenerateInput, AudioGenerationResult, TTransformed>({\n      ...options,\n      devtools,\n    })\n\n  return {\n    generate: generate as (input: AudioGenerateInput) => Promise<void>,\n    result,\n    isLoading,\n    error,\n    status,\n    stop,\n    reset,\n  }\n}\n"],"names":[],"mappings":";AA+FO,SAAS,iBACd,SAKA;AACA,QAAM,WAAW;AAAA,IACf,GAAG,QAAQ;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAEd,QAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,MAAA,IACxD,cAAuE;AAAA,IACrE,GAAG;AAAA,IACH;AAAA,EAAA,CACD;AAEH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/esm/use-generate-image.d.ts

@@ -0,0 +1,89 @@
+import { ImageGenerationResult, StreamChunk } from '@tanstack/ai';
+import { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, ImageGenerateInput, InferGenerationOutputFromReturn } 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> {
+    /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */
+    connection?: ConnectConnectionAdapter;
+    /** Direct async function for image generation */
+    fetcher?: GenerationFetcher<ImageGenerateInput, ImageGenerationResult>;
+    /** 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 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 (connect-based adapter 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:
+ * - **ConnectConnectionAdapter** — 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 declare function useGenerateImage<TTransformed = void>(options: Omit<UseGenerateImageOptions, 'onResult'> & {
+    onResult?: (result: ImageGenerationResult) => TTransformed;
+}): UseGenerateImageReturn<InferGenerationOutputFromReturn<ImageGenerationResult, TTransformed>>;

package/dist/esm/use-generate-image.js

@@ -0,0 +1,26 @@
+import { useGeneration } from "./use-generation.js";
+function useGenerateImage(options) {
+  const devtools = {
+    ...options.devtools,
+    framework: "react",
+    hookName: "useGenerateImage",
+    outputKind: "image"
+  };
+  const { generate, result, isLoading, error, status, stop, reset } = useGeneration({
+    ...options,
+    devtools
+  });
+  return {
+    generate,
+    result,
+    isLoading,
+    error,
+    status,
+    stop,
+    reset
+  };
+}
+export {
+  useGenerateImage
+};
+//# sourceMappingURL=use-generate-image.js.map

package/dist/esm/use-generate-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-generate-image.js","sources":["../../src/use-generate-image.ts"],"sourcesContent":["import { useGeneration } from './use-generation'\nimport type { ImageGenerationResult, StreamChunk } from '@tanstack/ai'\nimport type {\n  AIDevtoolsDisplayOptions,\n  ConnectConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  ImageGenerateInput,\n  InferGenerationOutputFromReturn,\n} from '@tanstack/ai-client'\n\n/**\n * Options for the useGenerateImage hook.\n *\n * @template TOutput - The output type after optional transform (defaults to ImageGenerationResult)\n */\nexport interface UseGenerateImageOptions<TOutput = ImageGenerationResult> {\n  /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */\n  connection?: ConnectConnectionAdapter\n  /** Direct async function for image generation */\n  fetcher?: GenerationFetcher<ImageGenerateInput, ImageGenerationResult>\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 images are generated. 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: ImageGenerationResult) => 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 useGenerateImage hook.\n *\n * @template TOutput - The output type (after optional transform)\n */\nexport interface UseGenerateImageReturn<TOutput = ImageGenerationResult> {\n  /** Trigger image generation */\n  generate: (input: ImageGenerateInput) => Promise<void>\n  /** The generation result containing images, or null */\n  result: TOutput | null\n  /** Whether generation 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 generation */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * React hook for generating images using AI models.\n *\n * Supports two transport modes:\n * - **ConnectConnectionAdapter** — Streaming transport (SSE, HTTP stream, custom)\n * - **Fetcher** — Direct async function call\n *\n * @example\n * ```tsx\n * import { useGenerateImage } from '@tanstack/ai-react'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function ImageGenerator() {\n *   const { generate, result, isLoading, error, reset } = useGenerateImage({\n *     connection: fetchServerSentEvents('/api/generate/image'),\n *   })\n *\n *   return (\n *     <div>\n *       <button onClick={() => generate({ prompt: 'A sunset over mountains' })}>\n *         Generate\n *       </button>\n *       {isLoading && <p>Generating...</p>}\n *       {error && <p>Error: {error.message}</p>}\n *       {result?.images.map((img, i) => (\n *         <img key={i} src={img.url || `data:image/png;base64,${img.b64Json}`} />\n *       ))}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useGenerateImage<TTransformed = void>(\n  options: Omit<UseGenerateImageOptions, 'onResult'> & {\n    onResult?: (result: ImageGenerationResult) => TTransformed\n  },\n): UseGenerateImageReturn<\n  InferGenerationOutputFromReturn<ImageGenerationResult, TTransformed>\n> {\n  const devtools = {\n    ...options.devtools,\n    framework: 'react',\n    hookName: 'useGenerateImage',\n    outputKind: 'image' as const,\n  }\n  const { generate, result, isLoading, error, status, stop, reset } =\n    useGeneration<ImageGenerateInput, ImageGenerationResult, TTransformed>({\n      ...options,\n      devtools,\n    })\n\n  return {\n    generate: generate as (input: ImageGenerateInput) => Promise<void>,\n    result,\n    isLoading,\n    error,\n    status,\n    stop,\n    reset,\n  }\n}\n"],"names":[],"mappings":";AAiGO,SAAS,iBACd,SAKA;AACA,QAAM,WAAW;AAAA,IACf,GAAG,QAAQ;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAEd,QAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,MAAA,IACxD,cAAuE;AAAA,IACrE,GAAG;AAAA,IACH;AAAA,EAAA,CACD;AAEH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/esm/use-generate-speech.d.ts

@@ -0,0 +1,83 @@
+import { StreamChunk, TTSResult } from '@tanstack/ai';
+import { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutputFromReturn, 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> {
+    /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */
+    connection?: ConnectConnectionAdapter;
+    /** Direct async function for speech generation */
+    fetcher?: GenerationFetcher<SpeechGenerateInput, TTSResult>;
+    /** 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 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 (connect-based adapter 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 declare function useGenerateSpeech<TTransformed = void>(options: Omit<UseGenerateSpeechOptions, 'onResult'> & {
+    onResult?: (result: TTSResult) => TTransformed;
+}): UseGenerateSpeechReturn<InferGenerationOutputFromReturn<TTSResult, TTransformed>>;

package/dist/esm/use-generate-speech.js

@@ -0,0 +1,26 @@
+import { useGeneration } from "./use-generation.js";
+function useGenerateSpeech(options) {
+  const devtools = {
+    ...options.devtools,
+    framework: "react",
+    hookName: "useGenerateSpeech",
+    outputKind: "audio"
+  };
+  const { generate, result, isLoading, error, status, stop, reset } = useGeneration({
+    ...options,
+    devtools
+  });
+  return {
+    generate,
+    result,
+    isLoading,
+    error,
+    status,
+    stop,
+    reset
+  };
+}
+export {
+  useGenerateSpeech
+};
+//# sourceMappingURL=use-generate-speech.js.map