@tanstack/ai-solid 0.10.9 → 0.11.0

package/dist/index.d.ts

@@ -7,5 +7,5 @@ import { UseGenerateSpeechOptions, UseGenerateSpeechReturn, useGenerateSpeech }
 import { UseTranscriptionOptions, UseTranscriptionReturn, useTranscription } from "./use-transcription.js";
 import { UseSummarizeOptions, UseSummarizeReturn, useSummarize } from "./use-summarize.js";
 import { UseGenerateVideoOptions, UseGenerateVideoReturn, useGenerateVideo } from "./use-generate-video.js";
-import { AudioGenerateInput, ConnectConnectionAdapter, ConnectionAdapter, FetchConnectionOptions, GenerationClientState, ImageGenerateInput, InferChatMessages, RunAgentInputContext, SpeechGenerateInput, SubscribeConnectionAdapter, SummarizeGenerateInput, TranscriptionGenerateInput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, rpcStream, stream } from "@tanstack/ai-client";
-export { type AudioGenerateInput, type ChatRequestBody, type ConnectConnectionAdapter, type ConnectionAdapter, type DeepPartial, type FetchConnectionOptions, type GenerationClientState, type ImageGenerateInput, type InferChatMessages, type RunAgentInputContext, type SpeechGenerateInput, type SubscribeConnectionAdapter, type SummarizeGenerateInput, type TranscriptionGenerateInput, type UIMessage, type UseChatOptions, type UseChatReturn, type UseGenerateAudioOptions, type UseGenerateAudioReturn, type UseGenerateImageOptions, type UseGenerateImageReturn, type UseGenerateSpeechOptions, type UseGenerateSpeechReturn, type UseGenerateVideoOptions, type UseGenerateVideoReturn, type UseGenerationOptions, type UseGenerationReturn, type UseSummarizeOptions, type UseSummarizeReturn, type UseTranscriptionOptions, type UseTranscriptionReturn, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, rpcStream, stream, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription };
+import { AudioGenerateInput, ConnectConnectionAdapter, ConnectionAdapter, FetchConnectionOptions, GenerationClientState, ImageGenerateInput, InferChatMessages, RunAgentInputContext, SpeechGenerateInput, SubscribeConnectionAdapter, SummarizeGenerateInput, TranscriptionGenerateInput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo, XhrConnectionOptions, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, rpcStream, stream, xhrHttpStream, xhrServerSentEvents } from "@tanstack/ai-client";
+export { type AudioGenerateInput, type ChatRequestBody, type ConnectConnectionAdapter, type ConnectionAdapter, type DeepPartial, type FetchConnectionOptions, type GenerationClientState, type ImageGenerateInput, type InferChatMessages, type RunAgentInputContext, type SpeechGenerateInput, type SubscribeConnectionAdapter, type SummarizeGenerateInput, type TranscriptionGenerateInput, type UIMessage, type UseChatOptions, type UseChatReturn, type UseGenerateAudioOptions, type UseGenerateAudioReturn, type UseGenerateImageOptions, type UseGenerateImageReturn, type UseGenerateSpeechOptions, type UseGenerateSpeechReturn, type UseGenerateVideoOptions, type UseGenerateVideoReturn, type UseGenerationOptions, type UseGenerationReturn, type UseSummarizeOptions, type UseSummarizeReturn, type UseTranscriptionOptions, type UseTranscriptionReturn, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, type XhrConnectionOptions, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, rpcStream, stream, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription, xhrHttpStream, xhrServerSentEvents };

package/dist/index.js

@@ -6,6 +6,6 @@ import { useGenerateSpeech } from "./use-generate-speech.js";
 import { useTranscription } from "./use-transcription.js";
 import { useSummarize } from "./use-summarize.js";
 import { useGenerateVideo } from "./use-generate-video.js";
-import { createChatClientOptions, fetchHttpStream, fetchServerSentEvents, rpcStream, stream } from "@tanstack/ai-client";
+import { createChatClientOptions, fetchHttpStream, fetchServerSentEvents, rpcStream, stream, xhrHttpStream, xhrServerSentEvents } from "@tanstack/ai-client";
 
-export { createChatClientOptions, fetchHttpStream, fetchServerSentEvents, rpcStream, stream, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription };
+export { createChatClientOptions, fetchHttpStream, fetchServerSentEvents, rpcStream, stream, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription, xhrHttpStream, xhrServerSentEvents };

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import { Accessor } from "solid-js";
-import { ChatClientOptions, ChatClientState, ChatRequestBody, ConnectionStatus, DistributedOmit, MultimodalContent, UIMessage } from "@tanstack/ai-client";
+import { AIDevtoolsDisplayOptions, ChatClientOptions, ChatClientState, ChatRequestBody, ConnectionStatus, DistributedOmit, MultimodalContent, UIMessage } from "@tanstack/ai-client";
 import { AnyClientTool, InferSchemaType, ModelMessage, SchemaInput } from "@tanstack/ai";
 
 //#region src/types.d.ts
@@ -31,7 +31,9 @@ type DeepPartial<T> = T extends ReadonlyArray<infer U> ? Array<DeepPartial<U>> :
  * Note: Connection and body changes will recreate the ChatClient instance.
  * To update these options, remount the component or use a key prop.
  */
-type UseChatOptions<TTools extends ReadonlyArray<AnyClientTool> = any, TSchema extends SchemaInput | undefined = undefined> = DistributedOmit<ChatClientOptions<TTools>, 'onMessagesChange' | 'onLoadingChange' | 'onErrorChange' | 'onStatusChange' | 'onSubscriptionChange' | 'onConnectionStatusChange' | 'onSessionGeneratingChange'> & {
+type UseChatOptions<TTools extends ReadonlyArray<AnyClientTool> = any, TSchema extends SchemaInput | undefined = undefined> = DistributedOmit<ChatClientOptions<TTools>, 'onMessagesChange' | 'onLoadingChange' | 'onErrorChange' | 'onStatusChange' | 'onSubscriptionChange' | 'onConnectionStatusChange' | 'onSessionGeneratingChange' | 'devtools'> & {
+  /** Display options for TanStack AI Devtools. */
+  devtools?: AIDevtoolsDisplayOptions;
   live?: boolean;
   /**
    * Standard-schema-compatible schema (Zod, Valibot, ArkType, or plain JSON

package/dist/use-chat.js

@@ -1,5 +1,6 @@
-import { createEffect, createMemo, createSignal, createUniqueId, onCleanup } from "solid-js";
+import { createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount } from "solid-js";
 import { ChatClient } from "@tanstack/ai-client";
+import { createChatDevtoolsBridge } from "@tanstack/ai-client/devtools";
 
 //#region src/use-chat.ts
 function useChat(options = {}) {
@@ -14,11 +15,18 @@ function useChat(options = {}) {
 	const [sessionGenerating, setSessionGenerating] = createSignal(false);
 	const client = createMemo(() => {
 		return new ChatClient({
+			devtoolsBridgeFactory: createChatDevtoolsBridge,
 			...options.connection ? { connection: options.connection } : { fetcher: options.fetcher },
 			id: clientId,
 			...options.initialMessages !== void 0 && { initialMessages: options.initialMessages },
 			body: options.body,
 			...options.forwardedProps !== void 0 && { forwardedProps: options.forwardedProps },
+			devtools: {
+				...options.devtools,
+				framework: "solid",
+				hookName: "useChat",
+				outputKind: options.outputSchema ? "structured" : "chat"
+			},
 			onResponse: (response) => options.onResponse?.(response),
 			onChunk: (chunk) => {
 				options.onChunk?.(chunk);
@@ -72,9 +80,13 @@ function useChat(options = {}) {
 		if (options.live) client().subscribe();
 		else client().unsubscribe();
 	});
+	onMount(() => {
+		client().mountDevtools();
+	});
 	onCleanup(() => {
 		if (options.live) client().unsubscribe();
 		else client().stop();
+		client().dispose();
 	});
 	const sendMessage = async (content) => {
 		await client().sendMessage(content);

package/dist/use-chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-chat.js","names":[],"sources":["../src/use-chat.ts"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  onCleanup,\n} from 'solid-js'\n\nimport { ChatClient } from '@tanstack/ai-client'\nimport type {\n  ChatClientState,\n  ConnectionStatus,\n  StructuredOutputPart,\n} from '@tanstack/ai-client'\nimport type {\n  AnyClientTool,\n  InferSchemaType,\n  ModelMessage,\n  SchemaInput,\n  StreamChunk,\n} from '@tanstack/ai'\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>(\n  options: UseChatOptions<TTools, TSchema> = {} as UseChatOptions<\n    TTools,\n    TSchema\n  >,\n): UseChatReturn<TTools, TSchema> {\n  const hookId = createUniqueId()\n  const clientId = options.id || hookId\n\n  const [messages, setMessages] = createSignal<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const [isLoading, setIsLoading] = createSignal(false)\n  const [error, setError] = createSignal<Error | undefined>(undefined)\n  const [status, setStatus] = createSignal<ChatClientState>('ready')\n  const [isSubscribed, setIsSubscribed] = createSignal(false)\n  const [connectionStatus, setConnectionStatus] =\n    createSignal<ConnectionStatus>('disconnected')\n  const [sessionGenerating, setSessionGenerating] = createSignal(false)\n\n  // Structured-output `partial` / `final` are derived from `messages` —\n  // specifically from the structured-output part on the latest assistant\n  // message (the one after the most recent user message). Per-turn parts\n  // keep history coherent without a separate reset signal.\n  type Partial = DeepPartial<InferSchemaType<NonNullable<TSchema>>>\n  type Final = InferSchemaType<NonNullable<TSchema>>\n\n  // Create ChatClient instance with callbacks to sync state.\n  // Every user-provided callback is wrapped so the LATEST `options.xxx` value\n  // is read at call time. Direct assignment would freeze the callback to the\n  // reference we saw at creation; the wrapper lets reactive `options` or\n  // in-place mutations propagate. When the user clears a callback (sets it to\n  // undefined), `?.` no-ops.\n  const client = createMemo(() => {\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 transport = options.connection\n      ? { connection: options.connection }\n      : { fetcher: options.fetcher }\n    return new ChatClient({\n      ...transport,\n      id: clientId,\n      ...(options.initialMessages !== undefined && {\n        initialMessages: options.initialMessages,\n      }),\n      body: options.body,\n      ...(options.forwardedProps !== undefined && {\n        forwardedProps: options.forwardedProps,\n      }),\n      onResponse: (response) => options.onResponse?.(response),\n      onChunk: (chunk: StreamChunk) => {\n        options.onChunk?.(chunk)\n      },\n      onFinish: (message) => {\n        options.onFinish?.(message)\n      },\n      onError: (err) => {\n        options.onError?.(err)\n      },\n      tools: options.tools,\n      onCustomEvent: (eventType, data, context) =>\n        options.onCustomEvent?.(eventType, data, context),\n      ...(options.streamProcessor !== undefined && {\n        streamProcessor: options.streamProcessor,\n      }),\n      onMessagesChange: (newMessages: Array<UIMessage<TTools>>) => {\n        setMessages(newMessages)\n      },\n      onLoadingChange: (newIsLoading: boolean) => {\n        setIsLoading(newIsLoading)\n      },\n      onStatusChange: (newStatus: ChatClientState) => {\n        setStatus(newStatus)\n      },\n      onErrorChange: (newError: Error | undefined) => {\n        setError(newError)\n      },\n      onSubscriptionChange: (nextIsSubscribed: boolean) => {\n        setIsSubscribed(nextIsSubscribed)\n      },\n      onConnectionStatusChange: (nextStatus: ConnectionStatus) => {\n        setConnectionStatus(nextStatus)\n      },\n      onSessionGeneratingChange: (isGenerating: boolean) => {\n        setSessionGenerating(isGenerating)\n      },\n    })\n    // Only recreate when clientId changes\n    // Connection and other options are captured at creation time\n  }, [clientId])\n\n  // Sync body / forwardedProps changes to the client.\n  // Both populate the same wire payload; `forwardedProps` is preferred\n  // and `body` is deprecated but still supported.\n  createEffect(() => {\n    // Conditional spread: `updateOptions` declares strict-optional\n    // fields and rejects explicit `undefined` under EOPT.\n    client().updateOptions({\n      ...(options.body !== undefined && { body: options.body }),\n      ...(options.forwardedProps !== undefined && {\n        forwardedProps: options.forwardedProps,\n      }),\n    })\n  })\n\n  // Sync initial messages on mount only\n  // Note: initialMessages are passed to ChatClient constructor, but we also\n  // set them here to ensure React state is in sync\n  createEffect(() => {\n    if (options.initialMessages && options.initialMessages.length > 0) {\n      // Only set if current messages are empty (initial state)\n      if (messages().length === 0) {\n        client().setMessagesManually(options.initialMessages)\n      }\n    }\n  }) // Only run on mount - initialMessages are handled by ChatClient constructor\n\n  // Apply initial live mode immediately on hook creation.\n  if (options.live) {\n    client().subscribe()\n  } else {\n    client().unsubscribe()\n  }\n\n  createEffect(() => {\n    if (options.live) {\n      client().subscribe()\n    } else {\n      client().unsubscribe()\n    }\n  })\n\n  // Cleanup on unmount: stop any in-flight requests.\n  onCleanup(() => {\n    if (options.live) {\n      client().unsubscribe()\n    } else {\n      client().stop()\n    }\n  })\n\n  // Callback options are read through `options.xxx` at call time, so reactive\n  // or mutated options propagate without recreating the client.\n\n  const sendMessage = async (content: string | MultimodalContent) => {\n    await client().sendMessage(content)\n  }\n\n  const append = async (message: ModelMessage | UIMessage<TTools>) => {\n    await client().append(message)\n  }\n\n  const reload = async () => {\n    await client().reload()\n  }\n\n  const stop = () => {\n    client().stop()\n  }\n\n  const clear = () => {\n    client().clear()\n  }\n\n  const setMessagesManually = (newMessages: Array<UIMessage<TTools>>) => {\n    client().setMessagesManually(newMessages)\n  }\n\n  const addToolResult = 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\n  const addToolApprovalResponse = async (response: {\n    id: string\n    approved: boolean\n  }) => {\n    await client().addToolApprovalResponse(response)\n  }\n\n  // The \"active\" structured-output part is on the assistant message after\n  // the latest user message. When no user message exists yet, return null\n  // rather than scanning history — otherwise a stale `final` from\n  // `initialMessages` would leak into the value on first render.\n  const activeStructuredPart = createMemo<StructuredOutputPart | null>(() => {\n    const list = messages()\n    let lastUserIndex = -1\n    for (let i = list.length - 1; i >= 0; i--) {\n      if (list[i]?.role === 'user') {\n        lastUserIndex = i\n        break\n      }\n    }\n    if (lastUserIndex === -1) return null\n    for (let i = list.length - 1; i > lastUserIndex; i--) {\n      const m = list[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  })\n\n  const partial = createMemo<Partial>(() => {\n    const part = activeStructuredPart()\n    if (!part) return {} as Partial\n    const v = part.partial ?? part.data\n    return (v ?? {}) as Partial\n  })\n\n  const final = createMemo<Final | null>(() => {\n    const part = activeStructuredPart()\n    if (!part || part.status !== 'complete') return null\n    return part.data as Final\n  })\n\n  // partial / final are runtime-tracked unconditionally; the conditional\n  // return type hides them when no `outputSchema` is supplied.\n  // eslint-disable-next-line no-restricted-syntax -- primitive return shape diverges from generic UseChatReturn<TTools, TSchema>; TS can't structurally narrow the conditional partial/final fields\n  return {\n    messages,\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"],"mappings":"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"}
+{"version":3,"file":"use-chat.js","names":[],"sources":["../src/use-chat.ts"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  onCleanup,\n  onMount,\n} from 'solid-js'\n\nimport { ChatClient } from '@tanstack/ai-client'\nimport { createChatDevtoolsBridge } from '@tanstack/ai-client/devtools'\nimport type {\n  ChatClientState,\n  ConnectionStatus,\n  StructuredOutputPart,\n} from '@tanstack/ai-client'\nimport type {\n  AnyClientTool,\n  InferSchemaType,\n  ModelMessage,\n  SchemaInput,\n  StreamChunk,\n} from '@tanstack/ai'\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>(\n  options: UseChatOptions<TTools, TSchema> = {} as UseChatOptions<\n    TTools,\n    TSchema\n  >,\n): UseChatReturn<TTools, TSchema> {\n  const hookId = createUniqueId()\n  const clientId = options.id || hookId\n\n  const [messages, setMessages] = createSignal<Array<UIMessage<TTools>>>(\n    options.initialMessages || [],\n  )\n  const [isLoading, setIsLoading] = createSignal(false)\n  const [error, setError] = createSignal<Error | undefined>(undefined)\n  const [status, setStatus] = createSignal<ChatClientState>('ready')\n  const [isSubscribed, setIsSubscribed] = createSignal(false)\n  const [connectionStatus, setConnectionStatus] =\n    createSignal<ConnectionStatus>('disconnected')\n  const [sessionGenerating, setSessionGenerating] = createSignal(false)\n\n  // Structured-output `partial` / `final` are derived from `messages` —\n  // specifically from the structured-output part on the latest assistant\n  // message (the one after the most recent user message). Per-turn parts\n  // keep history coherent without a separate reset signal.\n  type Partial = DeepPartial<InferSchemaType<NonNullable<TSchema>>>\n  type Final = InferSchemaType<NonNullable<TSchema>>\n\n  // Create ChatClient instance with callbacks to sync state.\n  // Every user-provided callback is wrapped so the LATEST `options.xxx` value\n  // is read at call time. Direct assignment would freeze the callback to the\n  // reference we saw at creation; the wrapper lets reactive `options` or\n  // in-place mutations propagate. When the user clears a callback (sets it to\n  // undefined), `?.` no-ops.\n  const client = createMemo(() => {\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 transport = options.connection\n      ? { connection: options.connection }\n      : { fetcher: options.fetcher }\n    return new ChatClient({\n      devtoolsBridgeFactory: createChatDevtoolsBridge,\n      ...transport,\n      id: clientId,\n      ...(options.initialMessages !== undefined && {\n        initialMessages: options.initialMessages,\n      }),\n      body: options.body,\n      ...(options.forwardedProps !== undefined && {\n        forwardedProps: options.forwardedProps,\n      }),\n      devtools: {\n        ...options.devtools,\n        framework: 'solid',\n        hookName: 'useChat',\n        outputKind: options.outputSchema ? 'structured' : 'chat',\n      },\n      onResponse: (response) => options.onResponse?.(response),\n      onChunk: (chunk: StreamChunk) => {\n        options.onChunk?.(chunk)\n      },\n      onFinish: (message) => {\n        options.onFinish?.(message)\n      },\n      onError: (err) => {\n        options.onError?.(err)\n      },\n      tools: options.tools,\n      onCustomEvent: (eventType, data, context) =>\n        options.onCustomEvent?.(eventType, data, context),\n      ...(options.streamProcessor !== undefined && {\n        streamProcessor: options.streamProcessor,\n      }),\n      onMessagesChange: (newMessages: Array<UIMessage<TTools>>) => {\n        setMessages(newMessages)\n      },\n      onLoadingChange: (newIsLoading: boolean) => {\n        setIsLoading(newIsLoading)\n      },\n      onStatusChange: (newStatus: ChatClientState) => {\n        setStatus(newStatus)\n      },\n      onErrorChange: (newError: Error | undefined) => {\n        setError(newError)\n      },\n      onSubscriptionChange: (nextIsSubscribed: boolean) => {\n        setIsSubscribed(nextIsSubscribed)\n      },\n      onConnectionStatusChange: (nextStatus: ConnectionStatus) => {\n        setConnectionStatus(nextStatus)\n      },\n      onSessionGeneratingChange: (isGenerating: boolean) => {\n        setSessionGenerating(isGenerating)\n      },\n    })\n    // Only recreate when clientId changes\n    // Connection and other options are captured at creation time\n  }, [clientId])\n\n  // Sync body / forwardedProps changes to the client.\n  // Both populate the same wire payload; `forwardedProps` is preferred\n  // and `body` is deprecated but still supported.\n  createEffect(() => {\n    // Conditional spread: `updateOptions` declares strict-optional\n    // fields and rejects explicit `undefined` under EOPT.\n    client().updateOptions({\n      ...(options.body !== undefined && { body: options.body }),\n      ...(options.forwardedProps !== undefined && {\n        forwardedProps: options.forwardedProps,\n      }),\n    })\n  })\n\n  // Sync initial messages on mount only\n  // Note: initialMessages are passed to ChatClient constructor, but we also\n  // set them here to ensure React state is in sync\n  createEffect(() => {\n    if (options.initialMessages && options.initialMessages.length > 0) {\n      // Only set if current messages are empty (initial state)\n      if (messages().length === 0) {\n        client().setMessagesManually(options.initialMessages)\n      }\n    }\n  }) // Only run on mount - initialMessages are handled by ChatClient constructor\n\n  // Apply initial live mode immediately on hook creation.\n  if (options.live) {\n    client().subscribe()\n  } else {\n    client().unsubscribe()\n  }\n\n  createEffect(() => {\n    if (options.live) {\n      client().subscribe()\n    } else {\n      client().unsubscribe()\n    }\n  })\n\n  onMount(() => {\n    client().mountDevtools()\n  })\n\n  // Cleanup on unmount: stop any in-flight requests.\n  onCleanup(() => {\n    if (options.live) {\n      client().unsubscribe()\n    } else {\n      client().stop()\n    }\n    client().dispose()\n  })\n\n  // Callback options are read through `options.xxx` at call time, so reactive\n  // or mutated options propagate without recreating the client.\n\n  const sendMessage = async (content: string | MultimodalContent) => {\n    await client().sendMessage(content)\n  }\n\n  const append = async (message: ModelMessage | UIMessage<TTools>) => {\n    await client().append(message)\n  }\n\n  const reload = async () => {\n    await client().reload()\n  }\n\n  const stop = () => {\n    client().stop()\n  }\n\n  const clear = () => {\n    client().clear()\n  }\n\n  const setMessagesManually = (newMessages: Array<UIMessage<TTools>>) => {\n    client().setMessagesManually(newMessages)\n  }\n\n  const addToolResult = 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\n  const addToolApprovalResponse = async (response: {\n    id: string\n    approved: boolean\n  }) => {\n    await client().addToolApprovalResponse(response)\n  }\n\n  // The \"active\" structured-output part is on the assistant message after\n  // the latest user message. When no user message exists yet, return null\n  // rather than scanning history — otherwise a stale `final` from\n  // `initialMessages` would leak into the value on first render.\n  const activeStructuredPart = createMemo<StructuredOutputPart | null>(() => {\n    const list = messages()\n    let lastUserIndex = -1\n    for (let i = list.length - 1; i >= 0; i--) {\n      if (list[i]?.role === 'user') {\n        lastUserIndex = i\n        break\n      }\n    }\n    if (lastUserIndex === -1) return null\n    for (let i = list.length - 1; i > lastUserIndex; i--) {\n      const m = list[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  })\n\n  const partial = createMemo<Partial>(() => {\n    const part = activeStructuredPart()\n    if (!part) return {} as Partial\n    const v = part.partial ?? part.data\n    return (v ?? {}) as Partial\n  })\n\n  const final = createMemo<Final | null>(() => {\n    const part = activeStructuredPart()\n    if (!part || part.status !== 'complete') return null\n    return part.data as Final\n  })\n\n  // partial / final are runtime-tracked unconditionally; the conditional\n  // return type hides them when no `outputSchema` is supplied.\n  // eslint-disable-next-line no-restricted-syntax -- primitive return shape diverges from generic UseChatReturn<TTools, TSchema>; TS can't structurally narrow the conditional partial/final fields\n  return {\n    messages,\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"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { Accessor } from "solid-js";
-import { AudioGenerateInput, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from "@tanstack/ai-client";
+import { AIDevtoolsDisplayOptions, AudioGenerateInput, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from "@tanstack/ai-client";
 import { AudioGenerationResult, StreamChunk } from "@tanstack/ai";
 
 //#region src/use-generate-audio.d.ts
@@ -18,6 +18,8 @@ interface UseGenerateAudioOptions<TOutput = AudioGenerationResult> {
   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.
    *

package/dist/use-generate-audio.js

@@ -26,7 +26,16 @@ import { useGeneration } from "./use-generation.js";
 * ```
 */
 function useGenerateAudio(options) {
-	const { generate, result, isLoading, error, status, stop, reset } = useGeneration(options);
+	const devtools = {
+		...options.devtools,
+		framework: "solid",
+		hookName: "useGenerateAudio",
+		outputKind: "audio"
+	};
+	const { generate, result, isLoading, error, status, stop, reset } = useGeneration({
+		...options,
+		devtools
+	});
 	return {
 		generate,
 		result,

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

@@ -1 +1 @@
-{"version":3,"file":"use-generate-audio.js","names":[],"sources":["../src/use-generate-audio.ts"],"sourcesContent":["import { useGeneration } from './use-generation'\nimport type { AudioGenerationResult, StreamChunk } from '@tanstack/ai'\nimport type {\n  AudioGenerateInput,\n  ConnectConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutput,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useGenerateAudio hook.\n *\n * @template TOutput - The transformed output type (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  /**\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 transformed output type (defaults to AudioGenerationResult)\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: Accessor<TOutput | null>\n  /** Whether generation 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 generation */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * Solid hook for generating audio (music, sound effects) using AI models.\n *\n * @example\n * ```tsx\n * import { useGenerateAudio } from '@tanstack/ai-solid'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function AudioGenerator() {\n *   const { generate, result, isLoading } = 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 *       {result()?.audio.url && <audio src={result()!.audio.url} controls />}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useGenerateAudio<\n  TOnResult extends ((result: AudioGenerationResult) => any) | undefined =\n    undefined,\n>(\n  options: Omit<UseGenerateAudioOptions, 'onResult'> & {\n    onResult?: TOnResult\n  },\n): UseGenerateAudioReturn<\n  InferGenerationOutput<AudioGenerationResult, TOnResult>\n> {\n  const { generate, result, isLoading, error, status, stop, reset } =\n    useGeneration<AudioGenerateInput, AudioGenerationResult, TOnResult>(options)\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFA,SAAgB,iBAId,SAKA;CACA,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cAAoE,QAAQ;AAE9E,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"use-generate-audio.js","names":[],"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  InferGenerationOutput,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useGenerateAudio hook.\n *\n * @template TOutput - The transformed output type (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 transformed output type (defaults to AudioGenerationResult)\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: Accessor<TOutput | null>\n  /** Whether generation 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 generation */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * Solid hook for generating audio (music, sound effects) using AI models.\n *\n * @example\n * ```tsx\n * import { useGenerateAudio } from '@tanstack/ai-solid'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function AudioGenerator() {\n *   const { generate, result, isLoading } = 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 *       {result()?.audio.url && <audio src={result()!.audio.url} controls />}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useGenerateAudio<\n  TOnResult extends ((result: AudioGenerationResult) => any) | undefined =\n    undefined,\n>(\n  options: Omit<UseGenerateAudioOptions, 'onResult'> & {\n    onResult?: TOnResult\n  },\n): UseGenerateAudioReturn<\n  InferGenerationOutput<AudioGenerationResult, TOnResult>\n> {\n  const devtools = {\n    ...options.devtools,\n    framework: 'solid',\n    hookName: 'useGenerateAudio',\n    outputKind: 'audio' as const,\n  }\n  const { generate, result, isLoading, error, status, stop, reset } =\n    useGeneration<AudioGenerateInput, AudioGenerationResult, TOnResult>({\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,SAAgB,iBAId,SAKA;CACA,MAAM,WAAW;EACf,GAAG,QAAQ;EACX,WAAW;EACX,UAAU;EACV,YAAY;EACb;CACD,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cAAoE;EAClE,GAAG;EACH;EACD,CAAC;AAEJ,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}

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

@@ -1,5 +1,5 @@
 import { Accessor } from "solid-js";
-import { ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, ImageGenerateInput, InferGenerationOutput } from "@tanstack/ai-client";
+import { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, ImageGenerateInput, InferGenerationOutput } from "@tanstack/ai-client";
 import { ImageGenerationResult, StreamChunk } from "@tanstack/ai";
 
 //#region src/use-generate-image.d.ts
@@ -18,6 +18,8 @@ interface UseGenerateImageOptions<TOutput = ImageGenerationResult> {
   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.
    *

package/dist/use-generate-image.js

@@ -34,7 +34,16 @@ import { useGeneration } from "./use-generation.js";
 * ```
 */
 function useGenerateImage(options) {
-	const { generate, result, isLoading, error, status, stop, reset } = useGeneration(options);
+	const devtools = {
+		...options.devtools,
+		framework: "solid",
+		hookName: "useGenerateImage",
+		outputKind: "image"
+	};
+	const { generate, result, isLoading, error, status, stop, reset } = useGeneration({
+		...options,
+		devtools
+	});
 	return {
 		generate,
 		result,

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

@@ -1 +1 @@
-{"version":3,"file":"use-generate-image.js","names":[],"sources":["../src/use-generate-image.ts"],"sourcesContent":["import { useGeneration } from './use-generation'\nimport type { ImageGenerationResult, StreamChunk } from '@tanstack/ai'\nimport type {\n  ConnectConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  ImageGenerateInput,\n  InferGenerationOutput,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useGenerateImage hook.\n *\n * @template TOutput - The transformed output type (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  /**\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 transformed output type (defaults to ImageGenerationResult)\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: Accessor<TOutput | null>\n  /** Whether generation 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 generation */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * Solid 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-solid'\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 src={img.url || `data:image/png;base64,${img.b64Json}`} />\n *       ))}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useGenerateImage<\n  TOnResult extends ((result: ImageGenerationResult) => any) | undefined =\n    undefined,\n>(\n  options: Omit<UseGenerateImageOptions, 'onResult'> & {\n    onResult?: TOnResult\n  },\n): UseGenerateImageReturn<\n  InferGenerationOutput<ImageGenerationResult, TOnResult>\n> {\n  const { generate, result, isLoading, error, status, stop, reset } =\n    useGeneration<ImageGenerateInput, ImageGenerationResult, TOnResult>(options)\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA,SAAgB,iBAId,SAKA;CACA,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cAAoE,QAAQ;AAE9E,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"use-generate-image.js","names":[],"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  InferGenerationOutput,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useGenerateImage hook.\n *\n * @template TOutput - The transformed output type (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 transformed output type (defaults to ImageGenerationResult)\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: Accessor<TOutput | null>\n  /** Whether generation 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 generation */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * Solid 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-solid'\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 src={img.url || `data:image/png;base64,${img.b64Json}`} />\n *       ))}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useGenerateImage<\n  TOnResult extends ((result: ImageGenerationResult) => any) | undefined =\n    undefined,\n>(\n  options: Omit<UseGenerateImageOptions, 'onResult'> & {\n    onResult?: TOnResult\n  },\n): UseGenerateImageReturn<\n  InferGenerationOutput<ImageGenerationResult, TOnResult>\n> {\n  const devtools = {\n    ...options.devtools,\n    framework: 'solid',\n    hookName: 'useGenerateImage',\n    outputKind: 'image' as const,\n  }\n  const { generate, result, isLoading, error, status, stop, reset } =\n    useGeneration<ImageGenerateInput, ImageGenerationResult, TOnResult>({\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGA,SAAgB,iBAId,SAKA;CACA,MAAM,WAAW;EACf,GAAG,QAAQ;EACX,WAAW;EACX,UAAU;EACV,YAAY;EACb;CACD,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cAAoE;EAClE,GAAG;EACH;EACD,CAAC;AAEJ,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}

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

@@ -1,5 +1,5 @@
 import { Accessor } from "solid-js";
-import { ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, SpeechGenerateInput } from "@tanstack/ai-client";
+import { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, SpeechGenerateInput } from "@tanstack/ai-client";
 import { StreamChunk, TTSResult } from "@tanstack/ai";
 
 //#region src/use-generate-speech.d.ts
@@ -18,6 +18,8 @@ interface UseGenerateSpeechOptions<TOutput = TTSResult> {
   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.
    *

package/dist/use-generate-speech.js

@@ -28,7 +28,16 @@ import { useGeneration } from "./use-generation.js";
 * ```
 */
 function useGenerateSpeech(options) {
-	const { generate, result, isLoading, error, status, stop, reset } = useGeneration(options);
+	const devtools = {
+		...options.devtools,
+		framework: "solid",
+		hookName: "useGenerateSpeech",
+		outputKind: "audio"
+	};
+	const { generate, result, isLoading, error, status, stop, reset } = useGeneration({
+		...options,
+		devtools
+	});
 	return {
 		generate,
 		result,

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

@@ -1 +1 @@
-{"version":3,"file":"use-generate-speech.js","names":[],"sources":["../src/use-generate-speech.ts"],"sourcesContent":["import { useGeneration } from './use-generation'\nimport type { StreamChunk, TTSResult } from '@tanstack/ai'\nimport type {\n  ConnectConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutput,\n  SpeechGenerateInput,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useGenerateSpeech hook.\n *\n * @template TOutput - The transformed output type (defaults to TTSResult)\n */\nexport interface UseGenerateSpeechOptions<TOutput = TTSResult> {\n  /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */\n  connection?: ConnectConnectionAdapter\n  /** Direct async function for speech generation */\n  fetcher?: GenerationFetcher<SpeechGenerateInput, TTSResult>\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  /**\n   * Callback when speech 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: TTSResult) => 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 useGenerateSpeech hook.\n *\n * @template TOutput - The transformed output type (defaults to TTSResult)\n */\nexport interface UseGenerateSpeechReturn<TOutput = TTSResult> {\n  /** Trigger speech generation */\n  generate: (input: SpeechGenerateInput) => Promise<void>\n  /** The TTS result containing audio data, or null */\n  result: Accessor<TOutput | null>\n  /** Whether generation 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 generation */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * Solid hook for generating speech (text-to-speech) using AI models.\n *\n * @example\n * ```tsx\n * import { useGenerateSpeech } from '@tanstack/ai-solid'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function SpeechGenerator() {\n *   const { generate, result, isLoading } = useGenerateSpeech({\n *     connection: fetchServerSentEvents('/api/generate/speech'),\n *   })\n *\n *   return (\n *     <div>\n *       <button onClick={() => generate({ text: 'Hello world', voice: 'alloy' })}>\n *         Generate Speech\n *       </button>\n *       {result() && (\n *         <audio src={`data:audio/${result()!.format};base64,${result()!.audio}`} controls />\n *       )}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useGenerateSpeech<\n  TOnResult extends ((result: TTSResult) => any) | undefined = undefined,\n>(\n  options: Omit<UseGenerateSpeechOptions, 'onResult'> & {\n    onResult?: TOnResult\n  },\n): UseGenerateSpeechReturn<InferGenerationOutput<TTSResult, TOnResult>> {\n  const { generate, result, isLoading, error, status, stop, reset } =\n    useGeneration<SpeechGenerateInput, TTSResult, TOnResult>(options)\n\n  return {\n    generate: generate as (input: SpeechGenerateInput) => Promise<void>,\n    result,\n    isLoading,\n    error,\n    status,\n    stop,\n    reset,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,SAAgB,kBAGd,SAGsE;CACtE,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cAAyD,QAAQ;AAEnE,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"use-generate-speech.js","names":[],"sources":["../src/use-generate-speech.ts"],"sourcesContent":["import { useGeneration } from './use-generation'\nimport type { StreamChunk, TTSResult } from '@tanstack/ai'\nimport type {\n  AIDevtoolsDisplayOptions,\n  ConnectConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutput,\n  SpeechGenerateInput,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useGenerateSpeech hook.\n *\n * @template TOutput - The transformed output type (defaults to TTSResult)\n */\nexport interface UseGenerateSpeechOptions<TOutput = TTSResult> {\n  /** Connect-based adapter for streaming transport (SSE, HTTP stream, custom) */\n  connection?: ConnectConnectionAdapter\n  /** Direct async function for speech generation */\n  fetcher?: GenerationFetcher<SpeechGenerateInput, TTSResult>\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 speech 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: TTSResult) => 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 useGenerateSpeech hook.\n *\n * @template TOutput - The transformed output type (defaults to TTSResult)\n */\nexport interface UseGenerateSpeechReturn<TOutput = TTSResult> {\n  /** Trigger speech generation */\n  generate: (input: SpeechGenerateInput) => Promise<void>\n  /** The TTS result containing audio data, or null */\n  result: Accessor<TOutput | null>\n  /** Whether generation 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 generation */\n  stop: () => void\n  /** Clear result, error, and return to idle */\n  reset: () => void\n}\n\n/**\n * Solid hook for generating speech (text-to-speech) using AI models.\n *\n * @example\n * ```tsx\n * import { useGenerateSpeech } from '@tanstack/ai-solid'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function SpeechGenerator() {\n *   const { generate, result, isLoading } = useGenerateSpeech({\n *     connection: fetchServerSentEvents('/api/generate/speech'),\n *   })\n *\n *   return (\n *     <div>\n *       <button onClick={() => generate({ text: 'Hello world', voice: 'alloy' })}>\n *         Generate Speech\n *       </button>\n *       {result() && (\n *         <audio src={`data:audio/${result()!.format};base64,${result()!.audio}`} controls />\n *       )}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useGenerateSpeech<\n  TOnResult extends ((result: TTSResult) => any) | undefined = undefined,\n>(\n  options: Omit<UseGenerateSpeechOptions, 'onResult'> & {\n    onResult?: TOnResult\n  },\n): UseGenerateSpeechReturn<InferGenerationOutput<TTSResult, TOnResult>> {\n  const devtools = {\n    ...options.devtools,\n    framework: 'solid',\n    hookName: 'useGenerateSpeech',\n    outputKind: 'audio' as const,\n  }\n  const { generate, result, isLoading, error, status, stop, reset } =\n    useGeneration<SpeechGenerateInput, TTSResult, TOnResult>({\n      ...options,\n      devtools,\n    })\n\n  return {\n    generate: generate as (input: SpeechGenerateInput) => Promise<void>,\n    result,\n    isLoading,\n    error,\n    status,\n    stop,\n    reset,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA,SAAgB,kBAGd,SAGsE;CACtE,MAAM,WAAW;EACf,GAAG,QAAQ;EACX,WAAW;EACX,UAAU;EACV,YAAY;EACb;CACD,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cAAyD;EACvD,GAAG;EACH;EACD,CAAC;AAEJ,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/use-generate-video.d.ts

@@ -1,5 +1,5 @@
 import { Accessor } from "solid-js";
-import { ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo } from "@tanstack/ai-client";
+import { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo } from "@tanstack/ai-client";
 import { StreamChunk } from "@tanstack/ai";
 
 //#region src/use-generate-video.d.ts
@@ -18,6 +18,8 @@ interface UseGenerateVideoOptions<TOutput = VideoGenerateResult> {
   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 video generation completes. Can optionally return a transformed value.
    *

package/dist/use-generate-video.js

@@ -1,5 +1,6 @@
-import { createEffect, createMemo, createSignal, createUniqueId } from "solid-js";
+import { createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount } from "solid-js";
 import { VideoGenerationClient } from "@tanstack/ai-client";
+import { createVideoDevtoolsBridge } from "@tanstack/ai-client/devtools";
 
 //#region src/use-generate-video.ts
 /**
@@ -46,6 +47,13 @@ function useGenerateVideo(options) {
 		const baseOptions = {
 			id: clientId,
 			body: options.body,
+			devtoolsBridgeFactory: createVideoDevtoolsBridge,
+			devtools: {
+				...options.devtools,
+				framework: "solid",
+				hookName: "useGenerateVideo",
+				outputKind: "video"
+			},
 			onResult: (r) => options.onResult?.(r),
 			onError: (e) => options.onError?.(e),
 			onProgress: (p, m) => options.onProgress?.(p, m),
@@ -73,10 +81,11 @@ function useGenerateVideo(options) {
 		const currentBody = options.body;
 		client().updateOptions({ ...currentBody !== void 0 && { body: currentBody } });
 	});
-	createEffect(() => {
-		return () => {
-			client().stop();
-		};
+	onMount(() => {
+		client().mountDevtools();
+	});
+	onCleanup(() => {
+		client().dispose();
 	});
 	const generate = async (input) => {
 		await client().generate(input);

package/dist/use-generate-video.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-generate-video.js","names":[],"sources":["../src/use-generate-video.ts"],"sourcesContent":["import { VideoGenerationClient } from '@tanstack/ai-client'\nimport {\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n} from 'solid-js'\nimport type { StreamChunk } from '@tanstack/ai'\nimport type {\n  ConnectConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutput,\n  VideoGenerateInput,\n  VideoGenerateResult,\n  VideoStatusInfo,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useGenerateVideo hook.\n *\n * @template TOutput - The transformed output type (defaults to VideoGenerateResult)\n */\nexport interface UseGenerateVideoOptions<TOutput = VideoGenerateResult> {\n  /** Connect-based adapter for streaming transport (server handles polling) */\n  connection?: ConnectConnectionAdapter\n  /** Direct async function that returns a completed video result */\n  fetcher?: GenerationFetcher<VideoGenerateInput, VideoGenerateResult>\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  /**\n   * Callback when video generation completes. 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: VideoGenerateResult) => 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 when a video job is created */\n  onJobCreated?: (jobId: string) => void\n  /** Callback on each status update */\n  onStatusUpdate?: (status: VideoStatusInfo) => 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 useGenerateVideo hook.\n *\n * @template TOutput - The transformed output type (defaults to VideoGenerateResult)\n */\nexport interface UseGenerateVideoReturn<TOutput = VideoGenerateResult> {\n  /** Trigger video generation */\n  generate: (input: VideoGenerateInput) => Promise<void>\n  /** The final video result (with URL), or null */\n  result: Accessor<TOutput | null>\n  /** The current job ID, or null */\n  jobId: Accessor<string | null>\n  /** Current video generation status info, or null */\n  videoStatus: Accessor<VideoStatusInfo | null>\n  /** Whether generation/polling 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 generation/polling */\n  stop: () => void\n  /** Clear all state and return to idle */\n  reset: () => void\n}\n\n/**\n * Solid hook for generating videos using AI models.\n *\n * Video generation is asynchronous: a job is created, then polled for status\n * until completion. This hook handles the full lifecycle.\n *\n * @example\n * ```tsx\n * import { useGenerateVideo } from '@tanstack/ai-solid'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function VideoGenerator() {\n *   const { generate, result, videoStatus, isLoading } = useGenerateVideo({\n *     connection: fetchServerSentEvents('/api/generate/video'),\n *     onStatusUpdate: (status) => console.log(`Progress: ${status.progress}%`),\n *   })\n *\n *   return (\n *     <div>\n *       <button onClick={() => generate({ prompt: 'A flying car over a city' })}>\n *         Generate Video\n *       </button>\n *       {isLoading() && videoStatus() && (\n *         <p>Status: {videoStatus()!.status} ({videoStatus()!.progress}%)</p>\n *       )}\n *       {result() && <video src={result()!.url} controls />}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useGenerateVideo<\n  TOnResult extends ((result: VideoGenerateResult) => any) | undefined =\n    undefined,\n>(\n  options: Omit<UseGenerateVideoOptions, 'onResult'> & {\n    onResult?: TOnResult\n  },\n): UseGenerateVideoReturn<\n  InferGenerationOutput<VideoGenerateResult, TOnResult>\n> {\n  type TOutput = InferGenerationOutput<VideoGenerateResult, TOnResult>\n  const hookId = createUniqueId()\n  const clientId = options.id || hookId\n\n  const [result, setResult] = createSignal<TOutput | null>(null)\n  const [jobId, setJobId] = createSignal<string | null>(null)\n  const [videoStatus, setVideoStatus] = createSignal<VideoStatusInfo | null>(\n    null,\n  )\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`: VideoGenerationClientOptions.body\n    // is a strict optional; EOPT forbids passing `T | undefined`.\n    const baseOptions = {\n      id: clientId,\n      body: options.body,\n      onResult: (r: VideoGenerateResult) => options.onResult?.(r),\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      onJobCreated: (id: string) => options.onJobCreated?.(id),\n      onStatusUpdate: (s: VideoStatusInfo) => options.onStatusUpdate?.(s),\n      onResultChange: setResult,\n      onLoadingChange: setIsLoading,\n      onErrorChange: setError,\n      onStatusChange: setStatus,\n      onJobIdChange: setJobId,\n      onVideoStatusChange: setVideoStatus,\n    }\n\n    if (options.connection) {\n      return new VideoGenerationClient<TOutput>({\n        ...baseOptions,\n        connection: options.connection,\n      })\n    }\n\n    if (options.fetcher) {\n      return new VideoGenerationClient<TOutput>({\n        ...baseOptions,\n        fetcher: options.fetcher,\n      })\n    }\n\n    throw new Error(\n      'useGenerateVideo 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  // Cleanup on unmount: stop any in-flight requests\n  createEffect(() => {\n    return () => {\n      client().stop()\n    }\n  })\n\n  const generate = async (input: VideoGenerateInput) => {\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,\n    result,\n    jobId,\n    videoStatus,\n    isLoading,\n    error,\n    status,\n    stop,\n    reset,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GA,SAAgB,iBAId,SAKA;CAEA,MAAM,SAAS,gBAAgB;CAC/B,MAAM,WAAW,QAAQ,MAAM;CAE/B,MAAM,CAAC,QAAQ,aAAa,aAA6B,KAAK;CAC9D,MAAM,CAAC,OAAO,YAAY,aAA4B,KAAK;CAC3D,MAAM,CAAC,aAAa,kBAAkB,aACpC,KACD;CACD,MAAM,CAAC,WAAW,gBAAgB,aAAa,MAAM;CACrD,MAAM,CAAC,OAAO,YAAY,aAAgC,OAAU;CACpE,MAAM,CAAC,QAAQ,aAAa,aAAoC,OAAO;CAEvE,MAAM,SAAS,iBAAiB;EAG9B,MAAM,cAAc;GAClB,IAAI;GACJ,MAAM,QAAQ;GACd,WAAW,MAA2B,QAAQ,WAAW,EAAE;GAC3D,UAAU,MAAa,QAAQ,UAAU,EAAE;GAC3C,aAAa,GAAW,MAAe,QAAQ,aAAa,GAAG,EAAE;GACjE,UAAU,MAAmB,QAAQ,UAAU,EAAE;GACjD,eAAe,OAAe,QAAQ,eAAe,GAAG;GACxD,iBAAiB,MAAuB,QAAQ,iBAAiB,EAAE;GACnE,gBAAgB;GAChB,iBAAiB;GACjB,eAAe;GACf,gBAAgB;GAChB,eAAe;GACf,qBAAqB;GACtB;AAED,MAAI,QAAQ,WACV,QAAO,IAAI,sBAA+B;GACxC,GAAG;GACH,YAAY,QAAQ;GACrB,CAAC;AAGJ,MAAI,QAAQ,QACV,QAAO,IAAI,sBAA+B;GACxC,GAAG;GACH,SAAS,QAAQ;GAClB,CAAC;AAGJ,QAAM,IAAI,MACR,kEACD;IACA,CAAC,SAAS,CAAC;AAGd,oBAAmB;EACjB,MAAM,cAAc,QAAQ;AAC5B,UAAQ,CAAC,cAAc,EACrB,GAAI,gBAAgB,UAAa,EAAE,MAAM,aAAa,EACvD,CAAC;GACF;AAGF,oBAAmB;AACjB,eAAa;AACX,WAAQ,CAAC,MAAM;;GAEjB;CAEF,MAAM,WAAW,OAAO,UAA8B;AACpD,QAAM,QAAQ,CAAC,SAAS,MAAM;;CAGhC,MAAM,aAAa;AACjB,UAAQ,CAAC,MAAM;;CAGjB,MAAM,cAAc;AAClB,UAAQ,CAAC,OAAO;;AAGlB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"use-generate-video.js","names":[],"sources":["../src/use-generate-video.ts"],"sourcesContent":["import { VideoGenerationClient } from '@tanstack/ai-client'\nimport { createVideoDevtoolsBridge } 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  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutput,\n  VideoGenerateInput,\n  VideoGenerateResult,\n  VideoStatusInfo,\n} from '@tanstack/ai-client'\nimport type { Accessor } from 'solid-js'\n\n/**\n * Options for the useGenerateVideo hook.\n *\n * @template TOutput - The transformed output type (defaults to VideoGenerateResult)\n */\nexport interface UseGenerateVideoOptions<TOutput = VideoGenerateResult> {\n  /** Connect-based adapter for streaming transport (server handles polling) */\n  connection?: ConnectConnectionAdapter\n  /** Direct async function that returns a completed video result */\n  fetcher?: GenerationFetcher<VideoGenerateInput, VideoGenerateResult>\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 video generation completes. 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: VideoGenerateResult) => 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 when a video job is created */\n  onJobCreated?: (jobId: string) => void\n  /** Callback on each status update */\n  onStatusUpdate?: (status: VideoStatusInfo) => 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 useGenerateVideo hook.\n *\n * @template TOutput - The transformed output type (defaults to VideoGenerateResult)\n */\nexport interface UseGenerateVideoReturn<TOutput = VideoGenerateResult> {\n  /** Trigger video generation */\n  generate: (input: VideoGenerateInput) => Promise<void>\n  /** The final video result (with URL), or null */\n  result: Accessor<TOutput | null>\n  /** The current job ID, or null */\n  jobId: Accessor<string | null>\n  /** Current video generation status info, or null */\n  videoStatus: Accessor<VideoStatusInfo | null>\n  /** Whether generation/polling 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 generation/polling */\n  stop: () => void\n  /** Clear all state and return to idle */\n  reset: () => void\n}\n\n/**\n * Solid hook for generating videos using AI models.\n *\n * Video generation is asynchronous: a job is created, then polled for status\n * until completion. This hook handles the full lifecycle.\n *\n * @example\n * ```tsx\n * import { useGenerateVideo } from '@tanstack/ai-solid'\n * import { fetchServerSentEvents } from '@tanstack/ai-client'\n *\n * function VideoGenerator() {\n *   const { generate, result, videoStatus, isLoading } = useGenerateVideo({\n *     connection: fetchServerSentEvents('/api/generate/video'),\n *     onStatusUpdate: (status) => console.log(`Progress: ${status.progress}%`),\n *   })\n *\n *   return (\n *     <div>\n *       <button onClick={() => generate({ prompt: 'A flying car over a city' })}>\n *         Generate Video\n *       </button>\n *       {isLoading() && videoStatus() && (\n *         <p>Status: {videoStatus()!.status} ({videoStatus()!.progress}%)</p>\n *       )}\n *       {result() && <video src={result()!.url} controls />}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useGenerateVideo<\n  TOnResult extends ((result: VideoGenerateResult) => any) | undefined =\n    undefined,\n>(\n  options: Omit<UseGenerateVideoOptions, 'onResult'> & {\n    onResult?: TOnResult\n  },\n): UseGenerateVideoReturn<\n  InferGenerationOutput<VideoGenerateResult, TOnResult>\n> {\n  type TOutput = InferGenerationOutput<VideoGenerateResult, TOnResult>\n  const hookId = createUniqueId()\n  const clientId = options.id || hookId\n\n  const [result, setResult] = createSignal<TOutput | null>(null)\n  const [jobId, setJobId] = createSignal<string | null>(null)\n  const [videoStatus, setVideoStatus] = createSignal<VideoStatusInfo | null>(\n    null,\n  )\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`: VideoGenerationClientOptions.body\n    // is a strict optional; EOPT forbids passing `T | undefined`.\n    const baseOptions = {\n      id: clientId,\n      body: options.body,\n      devtoolsBridgeFactory: createVideoDevtoolsBridge,\n      devtools: {\n        ...options.devtools,\n        framework: 'solid',\n        hookName: 'useGenerateVideo',\n        outputKind: 'video' as const,\n      },\n      onResult: (r: VideoGenerateResult) => options.onResult?.(r),\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      onJobCreated: (id: string) => options.onJobCreated?.(id),\n      onStatusUpdate: (s: VideoStatusInfo) => options.onStatusUpdate?.(s),\n      onResultChange: setResult,\n      onLoadingChange: setIsLoading,\n      onErrorChange: setError,\n      onStatusChange: setStatus,\n      onJobIdChange: setJobId,\n      onVideoStatusChange: setVideoStatus,\n    }\n\n    if (options.connection) {\n      return new VideoGenerationClient<TOutput>({\n        ...baseOptions,\n        connection: options.connection,\n      })\n    }\n\n    if (options.fetcher) {\n      return new VideoGenerationClient<TOutput>({\n        ...baseOptions,\n        fetcher: options.fetcher,\n      })\n    }\n\n    throw new Error(\n      'useGenerateVideo 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: VideoGenerateInput) => {\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,\n    result,\n    jobId,\n    videoStatus,\n    isLoading,\n    error,\n    status,\n    stop,\n    reset,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoHA,SAAgB,iBAId,SAKA;CAEA,MAAM,SAAS,gBAAgB;CAC/B,MAAM,WAAW,QAAQ,MAAM;CAE/B,MAAM,CAAC,QAAQ,aAAa,aAA6B,KAAK;CAC9D,MAAM,CAAC,OAAO,YAAY,aAA4B,KAAK;CAC3D,MAAM,CAAC,aAAa,kBAAkB,aACpC,KACD;CACD,MAAM,CAAC,WAAW,gBAAgB,aAAa,MAAM;CACrD,MAAM,CAAC,OAAO,YAAY,aAAgC,OAAU;CACpE,MAAM,CAAC,QAAQ,aAAa,aAAoC,OAAO;CAEvE,MAAM,SAAS,iBAAiB;EAG9B,MAAM,cAAc;GAClB,IAAI;GACJ,MAAM,QAAQ;GACd,uBAAuB;GACvB,UAAU;IACR,GAAG,QAAQ;IACX,WAAW;IACX,UAAU;IACV,YAAY;IACb;GACD,WAAW,MAA2B,QAAQ,WAAW,EAAE;GAC3D,UAAU,MAAa,QAAQ,UAAU,EAAE;GAC3C,aAAa,GAAW,MAAe,QAAQ,aAAa,GAAG,EAAE;GACjE,UAAU,MAAmB,QAAQ,UAAU,EAAE;GACjD,eAAe,OAAe,QAAQ,eAAe,GAAG;GACxD,iBAAiB,MAAuB,QAAQ,iBAAiB,EAAE;GACnE,gBAAgB;GAChB,iBAAiB;GACjB,eAAe;GACf,gBAAgB;GAChB,eAAe;GACf,qBAAqB;GACtB;AAED,MAAI,QAAQ,WACV,QAAO,IAAI,sBAA+B;GACxC,GAAG;GACH,YAAY,QAAQ;GACrB,CAAC;AAGJ,MAAI,QAAQ,QACV,QAAO,IAAI,sBAA+B;GACxC,GAAG;GACH,SAAS,QAAQ;GAClB,CAAC;AAGJ,QAAM,IAAI,MACR,kEACD;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,UAA8B;AACpD,QAAM,QAAQ,CAAC,SAAS,MAAM;;CAGhC,MAAM,aAAa;AACjB,UAAQ,CAAC,MAAM;;CAGjB,MAAM,cAAc;AAClB,UAAQ,CAAC,OAAO;;AAGlB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/use-generation.d.ts

@@ -1,5 +1,5 @@
 import { Accessor } from "solid-js";
-import { ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from "@tanstack/ai-client";
+import { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from "@tanstack/ai-client";
 import { StreamChunk } from "@tanstack/ai";
 
 //#region src/use-generation.d.ts
@@ -22,6 +22,8 @@ interface UseGenerationOptions<TInput, TResult, TOutput = TResult> {
   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 a result is received. Can optionally return a transformed value.
    *

package/dist/use-generation.js

@@ -1,5 +1,6 @@
-import { createEffect, createMemo, createSignal, createUniqueId } from "solid-js";
+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
 /**
@@ -33,6 +34,12 @@ function useGeneration(options) {
 		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),
@@ -56,10 +63,11 @@ function useGeneration(options) {
 		const currentBody = options.body;
 		client().updateOptions({ ...currentBody !== void 0 && { body: currentBody } });
 	});
-	createEffect(() => {
-		return () => {
-			client().stop();
-		};
+	onMount(() => {
+		client().mountDevtools();
+	});
+	onCleanup(() => {
+		client().dispose();
 	});
 	const generate = async (input) => {
 		await client().generate(input);

package/dist/use-generation.js.map

@@ -1 +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 {\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n} from 'solid-js'\nimport type { StreamChunk } from '@tanstack/ai'\nimport type {\n  ConnectConnectionAdapter,\n  GenerationClientOptions,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutput,\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  /**\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 */\nexport function useGeneration<\n  TInput extends Record<string, any>,\n  TResult,\n  TOnResult extends ((result: TResult) => any) | undefined = undefined,\n>(\n  options: Omit<UseGenerationOptions<TInput, TResult>, 'onResult'> & {\n    onResult?: TOnResult\n  },\n): UseGenerationReturn<InferGenerationOutput<TResult, TOnResult>> {\n  type TOutput = InferGenerationOutput<TResult, TOnResult>\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      onResult: (r: TResult) => options.onResult?.(r),\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  // Cleanup on unmount: stop any in-flight requests\n  createEffect(() => {\n    return () => {\n      client().stop()\n    }\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":";;;;;;;;;;;;;;;;;;;;;;;;AA6FA,SAAgB,cAKd,SAGgE;CAEhE,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,WAAW,MAAe,QAAQ,WAAW,EAAE;GAC/C,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;AAGF,oBAAmB;AACjB,eAAa;AACX,WAAQ,CAAC,MAAM;;GAEjB;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"}
+{"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  InferGenerationOutput,\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 */\nexport function useGeneration<\n  TInput extends Record<string, any>,\n  TResult,\n  TOnResult extends ((result: TResult) => any) | undefined = undefined,\n>(\n  options: Omit<UseGenerationOptions<TInput, TResult>, 'onResult'> & {\n    onResult?: TOnResult\n  },\n): UseGenerationReturn<InferGenerationOutput<TResult, TOnResult>> {\n  type TOutput = InferGenerationOutput<TResult, TOnResult>\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      onResult: (r: TResult) => options.onResult?.(r),\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":";;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,SAAgB,cAKd,SAGgE;CAEhE,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;GACD,WAAW,MAAe,QAAQ,WAAW,EAAE;GAC/C,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

@@ -1,5 +1,5 @@
 import { Accessor } from "solid-js";
-import { ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, SummarizeGenerateInput } from "@tanstack/ai-client";
+import { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, SummarizeGenerateInput } from "@tanstack/ai-client";
 import { StreamChunk, SummarizationResult } from "@tanstack/ai";
 
 //#region src/use-summarize.d.ts
@@ -18,6 +18,8 @@ interface UseSummarizeOptions<TOutput = SummarizationResult> {
   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.
    *

package/dist/use-summarize.js

@@ -31,7 +31,16 @@ import { useGeneration } from "./use-generation.js";
 * ```
 */
 function useSummarize(options) {
-	const { generate, result, isLoading, error, status, stop, reset } = useGeneration(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,

package/dist/use-summarize.js.map

@@ -1 +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  ConnectConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutput,\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  /**\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<\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA,SAAgB,aAId,SAG2E;CAC3E,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cACE,QACD;AAEH,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"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  InferGenerationOutput,\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<\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 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, TOnResult>({\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,aAId,SAG2E;CAC3E,MAAM,WAAW;EACf,GAAG,QAAQ;EACX,WAAW;EACX,UAAU;EACV,YAAY;EACb;CACD,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cAAsE;EACpE,GAAG;EACH;EACD,CAAC;AAEJ,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/use-transcription.d.ts

@@ -1,5 +1,5 @@
 import { Accessor } from "solid-js";
-import { ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, TranscriptionGenerateInput } from "@tanstack/ai-client";
+import { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, TranscriptionGenerateInput } from "@tanstack/ai-client";
 import { StreamChunk, TranscriptionResult } from "@tanstack/ai";
 
 //#region src/use-transcription.d.ts
@@ -18,6 +18,8 @@ interface UseTranscriptionOptions<TOutput = TranscriptionResult> {
   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.
    *

package/dist/use-transcription.js

@@ -37,7 +37,16 @@ import { useGeneration } from "./use-generation.js";
 * ```
 */
 function useTranscription(options) {
-	const { generate, result, isLoading, error, status, stop, reset } = useGeneration(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,

package/dist/use-transcription.js.map

@@ -1 +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  ConnectConnectionAdapter,\n  GenerationClientState,\n  GenerationFetcher,\n  InferGenerationOutput,\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  /**\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<\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGA,SAAgB,iBAId,SAKA;CACA,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cACE,QACD;AAEH,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"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  InferGenerationOutput,\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<\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 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<TranscriptionGenerateInput, TranscriptionResult, TOnResult>({\n      ...options,\n      devtools,\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqGA,SAAgB,iBAId,SAKA;CACA,MAAM,WAAW;EACf,GAAG,QAAQ;EACX,WAAW;EACX,UAAU;EACV,YAAY;EACb;CACD,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,QAAQ,MAAM,UACxD,cAA0E;EACxE,GAAG;EACH;EACD,CAAC;AAEJ,QAAO;EACK;EACV;EACA;EACA;EACA;EACA;EACA;EACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-solid",
-  "version": "0.10.9",
+  "version": "0.11.0",
   "description": "Solid hooks for TanStack AI streaming chat, structured outputs, and media generation.",
   "author": "",
   "license": "MIT",
@@ -37,11 +37,11 @@
     "media-generation"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "0.12.0"
+    "@tanstack/ai-client": "0.14.0"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.10",
-    "@tanstack/ai": "^0.22.0"
+    "@tanstack/ai": "^0.23.0"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",
@@ -53,7 +53,7 @@
     "tsdown": "^0.17.0-beta.6",
     "typescript": "5.9.3",
     "vitest": "^4.0.14",
-    "@tanstack/ai": "0.22.0"
+    "@tanstack/ai": "0.23.0"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/index.ts

@@ -51,6 +51,8 @@ export type {
 export {
   fetchServerSentEvents,
   fetchHttpStream,
+  xhrServerSentEvents,
+  xhrHttpStream,
   stream,
   rpcStream,
   createChatClientOptions,
@@ -59,6 +61,7 @@ export {
   type SubscribeConnectionAdapter,
   type RunAgentInputContext,
   type FetchConnectionOptions,
+  type XhrConnectionOptions,
   type InferChatMessages,
   type GenerationClientState,
   type ImageGenerateInput,

package/src/types.ts

@@ -5,6 +5,7 @@ import type {
   SchemaInput,
 } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ChatClientOptions,
   ChatClientState,
   ChatRequestBody,
@@ -63,7 +64,10 @@ export type UseChatOptions<
   | 'onSubscriptionChange'
   | 'onConnectionStatusChange'
   | 'onSessionGeneratingChange'
+  | 'devtools'
 > & {
+  /** Display options for TanStack AI Devtools. */
+  devtools?: AIDevtoolsDisplayOptions
   live?: boolean
   /**
    * Standard-schema-compatible schema (Zod, Valibot, ArkType, or plain JSON

package/src/use-chat.ts

@@ -4,9 +4,11 @@ import {
   createSignal,
   createUniqueId,
   onCleanup,
+  onMount,
 } from 'solid-js'
 
 import { ChatClient } from '@tanstack/ai-client'
+import { createChatDevtoolsBridge } from '@tanstack/ai-client/devtools'
 import type {
   ChatClientState,
   ConnectionStatus,
@@ -72,6 +74,7 @@ export function useChat<
       ? { connection: options.connection }
       : { fetcher: options.fetcher }
     return new ChatClient({
+      devtoolsBridgeFactory: createChatDevtoolsBridge,
       ...transport,
       id: clientId,
       ...(options.initialMessages !== undefined && {
@@ -81,6 +84,12 @@ export function useChat<
       ...(options.forwardedProps !== undefined && {
         forwardedProps: options.forwardedProps,
       }),
+      devtools: {
+        ...options.devtools,
+        framework: 'solid',
+        hookName: 'useChat',
+        outputKind: options.outputSchema ? 'structured' : 'chat',
+      },
       onResponse: (response) => options.onResponse?.(response),
       onChunk: (chunk: StreamChunk) => {
         options.onChunk?.(chunk)
@@ -164,6 +173,10 @@ export function useChat<
     }
   })
 
+  onMount(() => {
+    client().mountDevtools()
+  })
+
   // Cleanup on unmount: stop any in-flight requests.
   onCleanup(() => {
     if (options.live) {
@@ -171,6 +184,7 @@ export function useChat<
     } else {
       client().stop()
     }
+    client().dispose()
   })
 
   // Callback options are read through `options.xxx` at call time, so reactive

package/src/use-generate-audio.ts

@@ -1,6 +1,7 @@
 import { useGeneration } from './use-generation'
 import type { AudioGenerationResult, StreamChunk } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   AudioGenerateInput,
   ConnectConnectionAdapter,
   GenerationClientState,
@@ -23,6 +24,8 @@ export interface UseGenerateAudioOptions<TOutput = AudioGenerationResult> {
   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.
    *
@@ -95,8 +98,17 @@ export function useGenerateAudio<
 ): UseGenerateAudioReturn<
   InferGenerationOutput<AudioGenerationResult, TOnResult>
 > {
+  const devtools = {
+    ...options.devtools,
+    framework: 'solid',
+    hookName: 'useGenerateAudio',
+    outputKind: 'audio' as const,
+  }
   const { generate, result, isLoading, error, status, stop, reset } =
-    useGeneration<AudioGenerateInput, AudioGenerationResult, TOnResult>(options)
+    useGeneration<AudioGenerateInput, AudioGenerationResult, TOnResult>({
+      ...options,
+      devtools,
+    })
 
   return {
     generate: generate as (input: AudioGenerateInput) => Promise<void>,

package/src/use-generate-image.ts

@@ -1,6 +1,7 @@
 import { useGeneration } from './use-generation'
 import type { ImageGenerationResult, StreamChunk } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ConnectConnectionAdapter,
   GenerationClientState,
   GenerationFetcher,
@@ -23,6 +24,8 @@ export interface UseGenerateImageOptions<TOutput = ImageGenerationResult> {
   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.
    *
@@ -103,8 +106,17 @@ export function useGenerateImage<
 ): UseGenerateImageReturn<
   InferGenerationOutput<ImageGenerationResult, TOnResult>
 > {
+  const devtools = {
+    ...options.devtools,
+    framework: 'solid',
+    hookName: 'useGenerateImage',
+    outputKind: 'image' as const,
+  }
   const { generate, result, isLoading, error, status, stop, reset } =
-    useGeneration<ImageGenerateInput, ImageGenerationResult, TOnResult>(options)
+    useGeneration<ImageGenerateInput, ImageGenerationResult, TOnResult>({
+      ...options,
+      devtools,
+    })
 
   return {
     generate: generate as (input: ImageGenerateInput) => Promise<void>,

package/src/use-generate-speech.ts

@@ -1,6 +1,7 @@
 import { useGeneration } from './use-generation'
 import type { StreamChunk, TTSResult } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ConnectConnectionAdapter,
   GenerationClientState,
   GenerationFetcher,
@@ -23,6 +24,8 @@ export interface UseGenerateSpeechOptions<TOutput = TTSResult> {
   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.
    *
@@ -94,8 +97,17 @@ export function useGenerateSpeech<
     onResult?: TOnResult
   },
 ): UseGenerateSpeechReturn<InferGenerationOutput<TTSResult, TOnResult>> {
+  const devtools = {
+    ...options.devtools,
+    framework: 'solid',
+    hookName: 'useGenerateSpeech',
+    outputKind: 'audio' as const,
+  }
   const { generate, result, isLoading, error, status, stop, reset } =
-    useGeneration<SpeechGenerateInput, TTSResult, TOnResult>(options)
+    useGeneration<SpeechGenerateInput, TTSResult, TOnResult>({
+      ...options,
+      devtools,
+    })
 
   return {
     generate: generate as (input: SpeechGenerateInput) => Promise<void>,

package/src/use-generate-video.ts

@@ -1,12 +1,16 @@
 import { VideoGenerationClient } from '@tanstack/ai-client'
+import { createVideoDevtoolsBridge } from '@tanstack/ai-client/devtools'
 import {
   createEffect,
   createMemo,
   createSignal,
   createUniqueId,
+  onCleanup,
+  onMount,
 } from 'solid-js'
 import type { StreamChunk } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ConnectConnectionAdapter,
   GenerationClientState,
   GenerationFetcher,
@@ -31,6 +35,8 @@ export interface UseGenerateVideoOptions<TOutput = VideoGenerateResult> {
   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 video generation completes. Can optionally return a transformed value.
    *
@@ -137,6 +143,13 @@ export function useGenerateVideo<
     const baseOptions = {
       id: clientId,
       body: options.body,
+      devtoolsBridgeFactory: createVideoDevtoolsBridge,
+      devtools: {
+        ...options.devtools,
+        framework: 'solid',
+        hookName: 'useGenerateVideo',
+        outputKind: 'video' as const,
+      },
       onResult: (r: VideoGenerateResult) => options.onResult?.(r),
       onError: (e: Error) => options.onError?.(e),
       onProgress: (p: number, m?: string) => options.onProgress?.(p, m),
@@ -178,11 +191,13 @@ export function useGenerateVideo<
     })
   })
 
-  // Cleanup on unmount: stop any in-flight requests
-  createEffect(() => {
-    return () => {
-      client().stop()
-    }
+  onMount(() => {
+    client().mountDevtools()
+  })
+
+  // Cleanup on unmount: stop any in-flight requests and unregister devtools
+  onCleanup(() => {
+    client().dispose()
   })
 
   const generate = async (input: VideoGenerateInput) => {

package/src/use-generation.ts

@@ -1,12 +1,16 @@
 import { GenerationClient } from '@tanstack/ai-client'
+import { createGenerationDevtoolsBridge } from '@tanstack/ai-client/devtools'
 import {
   createEffect,
   createMemo,
   createSignal,
   createUniqueId,
+  onCleanup,
+  onMount,
 } from 'solid-js'
 import type { StreamChunk } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ConnectConnectionAdapter,
   GenerationClientOptions,
   GenerationClientState,
@@ -33,6 +37,8 @@ export interface UseGenerationOptions<TInput, TResult, TOutput = TResult> {
   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 a result is received. Can optionally return a transformed value.
    *
@@ -116,6 +122,12 @@ export function useGeneration<
     const clientOptions: GenerationClientOptions<TInput, TResult, TOutput> = {
       id: clientId,
       body: options.body,
+      devtoolsBridgeFactory: createGenerationDevtoolsBridge,
+      devtools: {
+        ...options.devtools,
+        framework: 'solid',
+        hookName: 'useGeneration',
+      },
       onResult: (r: TResult) => options.onResult?.(r),
       onError: (e: Error) => options.onError?.(e),
       onProgress: (p: number, m?: string) => options.onProgress?.(p, m),
@@ -153,11 +165,13 @@ export function useGeneration<
     })
   })
 
-  // Cleanup on unmount: stop any in-flight requests
-  createEffect(() => {
-    return () => {
-      client().stop()
-    }
+  onMount(() => {
+    client().mountDevtools()
+  })
+
+  // Cleanup on unmount: stop any in-flight requests and unregister devtools
+  onCleanup(() => {
+    client().dispose()
   })
 
   const generate = async (input: TInput) => {

package/src/use-summarize.ts

@@ -1,6 +1,7 @@
 import { useGeneration } from './use-generation'
 import type { StreamChunk, SummarizationResult } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ConnectConnectionAdapter,
   GenerationClientState,
   GenerationFetcher,
@@ -23,6 +24,8 @@ export interface UseSummarizeOptions<TOutput = SummarizationResult> {
   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.
    *
@@ -98,10 +101,17 @@ export function useSummarize<
     onResult?: TOnResult
   },
 ): UseSummarizeReturn<InferGenerationOutput<SummarizationResult, TOnResult>> {
+  const devtools = {
+    ...options.devtools,
+    framework: 'solid',
+    hookName: 'useSummarize',
+    outputKind: 'text' as const,
+  }
   const { generate, result, isLoading, error, status, stop, reset } =
-    useGeneration<SummarizeGenerateInput, SummarizationResult, TOnResult>(
-      options,
-    )
+    useGeneration<SummarizeGenerateInput, SummarizationResult, TOnResult>({
+      ...options,
+      devtools,
+    })
 
   return {
     generate: generate as (input: SummarizeGenerateInput) => Promise<void>,

package/src/use-transcription.ts

@@ -1,6 +1,7 @@
 import { useGeneration } from './use-generation'
 import type { StreamChunk, TranscriptionResult } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ConnectConnectionAdapter,
   GenerationClientState,
   GenerationFetcher,
@@ -23,6 +24,8 @@ export interface UseTranscriptionOptions<TOutput = TranscriptionResult> {
   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.
    *
@@ -106,10 +109,17 @@ export function useTranscription<
 ): UseTranscriptionReturn<
   InferGenerationOutput<TranscriptionResult, TOnResult>
 > {
+  const devtools = {
+    ...options.devtools,
+    framework: 'solid',
+    hookName: 'useTranscription',
+    outputKind: 'text' as const,
+  }
   const { generate, result, isLoading, error, status, stop, reset } =
-    useGeneration<TranscriptionGenerateInput, TranscriptionResult, TOnResult>(
-      options,
-    )
+    useGeneration<TranscriptionGenerateInput, TranscriptionResult, TOnResult>({
+      ...options,
+      devtools,
+    })
 
   return {
     generate: generate as (input: TranscriptionGenerateInput) => Promise<void>,