@tanstack/ai-svelte 0.10.9 → 0.10.10

package/dist/create-chat.svelte.js

@@ -1,4 +1,5 @@
 import { ChatClient } from '@tanstack/ai-client';
+import { createChatDevtoolsBridge } from '@tanstack/ai-client/devtools';
 /**
  * Creates a reactive chat instance for Svelte 5.
  *
@@ -55,6 +56,7 @@ export function createChat(options) {
         ? { connection: options.connection }
         : { fetcher: options.fetcher };
     const client = new ChatClient({
+        devtoolsBridgeFactory: createChatDevtoolsBridge,
         ...transport,
         id: clientId,
         ...(options.initialMessages !== undefined && {
@@ -64,6 +66,12 @@ export function createChat(options) {
         ...(options.forwardedProps !== undefined && {
             forwardedProps: options.forwardedProps,
         }),
+        devtools: {
+            ...options.devtools,
+            framework: 'svelte',
+            hookName: 'useChat',
+            outputKind: options.outputSchema ? 'structured' : 'chat',
+        },
         ...(options.onResponse !== undefined && { onResponse: options.onResponse }),
         onChunk: (chunk) => {
             options.onChunk?.(chunk);
@@ -106,6 +114,7 @@ export function createChat(options) {
     if (options.live) {
         client.subscribe();
     }
+    client.mountDevtools();
     // Note: Cleanup is handled by calling stop() directly when needed.
     // Unlike React/Vue/Solid, Svelte 5 runes like $effect can only be used
     // during component initialization, so we don't add automatic cleanup here.
@@ -123,6 +132,9 @@ export function createChat(options) {
     const stop = () => {
         client.stop();
     };
+    const dispose = () => {
+        client.dispose();
+    };
     const clear = () => {
         client.clear();
     };
@@ -215,6 +227,7 @@ export function createChat(options) {
         append,
         reload,
         stop,
+        dispose,
         setMessages,
         clear,
         addToolResult,

package/dist/create-generate-audio.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { AudioGenerationResult, StreamChunk } from '@tanstack/ai';
-import type { AudioGenerateInput, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from '@tanstack/ai-client';
+import type { AIDevtoolsDisplayOptions, AudioGenerateInput, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from '@tanstack/ai-client';
 /**
  * Options for the createGenerateAudio function.
  *
@@ -14,6 +14,8 @@ export interface CreateGenerateAudioOptions<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/create-generate-audio.svelte.js

@@ -26,7 +26,16 @@ import { createGeneration } from './create-generation.svelte';
  * ```
  */
 export function createGenerateAudio(options) {
-    const gen = createGeneration(options);
+    const devtools = {
+        ...options.devtools,
+        framework: 'svelte',
+        hookName: 'createGenerateAudio',
+        outputKind: 'audio',
+    };
+    const gen = createGeneration({
+        ...options,
+        devtools,
+    });
     return {
         get result() {
             return gen.result;

package/dist/create-generate-image.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { ImageGenerationResult, StreamChunk } from '@tanstack/ai';
-import type { ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, ImageGenerateInput, InferGenerationOutput } from '@tanstack/ai-client';
+import type { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, ImageGenerateInput, InferGenerationOutput } from '@tanstack/ai-client';
 /**
  * Options for the createGenerateImage function.
  *
@@ -14,6 +14,8 @@ export interface CreateGenerateImageOptions<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/create-generate-image.svelte.js

@@ -35,7 +35,16 @@ import { createGeneration } from './create-generation.svelte';
  * ```
  */
 export function createGenerateImage(options) {
-    const gen = createGeneration(options);
+    const devtools = {
+        ...options.devtools,
+        framework: 'svelte',
+        hookName: 'createGenerateImage',
+        outputKind: 'image',
+    };
+    const gen = createGeneration({
+        ...options,
+        devtools,
+    });
     return {
         get result() {
             return gen.result;

package/dist/create-generate-speech.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { StreamChunk, TTSResult } from '@tanstack/ai';
-import type { ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, SpeechGenerateInput } from '@tanstack/ai-client';
+import type { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, SpeechGenerateInput } from '@tanstack/ai-client';
 /**
  * Options for the createGenerateSpeech function.
  *
@@ -14,6 +14,8 @@ export interface CreateGenerateSpeechOptions<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/create-generate-speech.svelte.js

@@ -26,7 +26,16 @@ import { createGeneration } from './create-generation.svelte';
  * ```
  */
 export function createGenerateSpeech(options) {
-    const gen = createGeneration(options);
+    const devtools = {
+        ...options.devtools,
+        framework: 'svelte',
+        hookName: 'createGenerateSpeech',
+        outputKind: 'audio',
+    };
+    const gen = createGeneration({
+        ...options,
+        devtools,
+    });
     return {
         get result() {
             return gen.result;

package/dist/create-generate-video.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { StreamChunk } from '@tanstack/ai';
-import type { ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo } from '@tanstack/ai-client';
+import type { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo } from '@tanstack/ai-client';
 /**
  * Options for the createGenerateVideo function.
  *
@@ -14,6 +14,8 @@ export interface CreateGenerateVideoOptions<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.
      *
@@ -57,6 +59,8 @@ export interface CreateGenerateVideoReturn<TOutput = VideoGenerateResult> {
     stop: () => void;
     /** Clear all state and return to idle */
     reset: () => void;
+    /** Stop in-flight work and unregister devtools listeners */
+    dispose: () => void;
     /** Update additional body parameters */
     updateBody: (body: Record<string, any>) => void;
 }

package/dist/create-generate-video.svelte.js

@@ -1,4 +1,5 @@
 import { VideoGenerationClient } from '@tanstack/ai-client';
+import { createVideoDevtoolsBridge } from '@tanstack/ai-client/devtools';
 /**
  * Creates a reactive video generation instance for Svelte 5.
  *
@@ -46,6 +47,13 @@ export function createGenerateVideo(options) {
     const baseOptions = {
         id: clientId,
         body: options.body,
+        devtoolsBridgeFactory: createVideoDevtoolsBridge,
+        devtools: {
+            ...options.devtools,
+            framework: 'svelte',
+            hookName: 'createGenerateVideo',
+            outputKind: 'video',
+        },
         onResult: (r) => options.onResult?.(r),
         onError: (e) => options.onError?.(e),
         onProgress: (p, m) => options.onProgress?.(p, m),
@@ -87,10 +95,11 @@ export function createGenerateVideo(options) {
     else {
         throw new Error('createGenerateVideo requires either a connection or fetcher option');
     }
-    // Note: Cleanup is handled by calling stop() directly when needed.
+    client.mountDevtools();
+    // Note: Cleanup is handled by calling dispose() directly when needed.
     // Unlike React/Vue/Solid, Svelte 5 runes like $effect can only be used
     // during component initialization, so we don't add automatic cleanup here.
-    // Users should call video.stop() in their component's cleanup if needed.
+    // Users should call video.dispose() in their component's cleanup if needed.
     const generate = async (input) => {
         await client.generate(input);
     };
@@ -100,6 +109,9 @@ export function createGenerateVideo(options) {
     const reset = () => {
         client.reset();
     };
+    const dispose = () => {
+        client.dispose();
+    };
     const updateBody = (newBody) => {
         client.updateOptions({ body: newBody });
     };
@@ -125,6 +137,7 @@ export function createGenerateVideo(options) {
         generate,
         stop,
         reset,
+        dispose,
         updateBody,
     };
 }

package/dist/create-generation.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { StreamChunk } from '@tanstack/ai';
-import type { ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from '@tanstack/ai-client';
+import type { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput } from '@tanstack/ai-client';
 /**
  * Options for the createGeneration function.
  *
@@ -18,6 +18,8 @@ export interface CreateGenerationOptions<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.
      *
@@ -53,6 +55,8 @@ export interface CreateGenerationReturn<TOutput> {
     stop: () => void;
     /** Clear result, error, and return to idle */
     reset: () => void;
+    /** Stop in-flight work and unregister devtools listeners */
+    dispose: () => void;
     /** Update additional body parameters */
     updateBody: (body: Record<string, any>) => void;
 }

package/dist/create-generation.svelte.js

@@ -1,4 +1,5 @@
 import { GenerationClient } from '@tanstack/ai-client';
+import { createGenerationDevtoolsBridge } from '@tanstack/ai-client/devtools';
 /**
  * Creates a reactive generation instance for Svelte 5.
  *
@@ -45,6 +46,12 @@ export function createGeneration(options) {
     const clientOptions = {
         id: clientId,
         body: options.body,
+        devtoolsBridgeFactory: createGenerationDevtoolsBridge,
+        devtools: {
+            ...options.devtools,
+            framework: 'svelte',
+            hookName: 'createGeneration',
+        },
         onResult: (r) => options.onResult?.(r),
         onError: (e) => options.onError?.(e),
         onProgress: (p, m) => options.onProgress?.(p, m),
@@ -78,10 +85,11 @@ export function createGeneration(options) {
     else {
         throw new Error('createGeneration requires either a connection or fetcher option');
     }
-    // Note: Cleanup is handled by calling stop() directly when needed.
+    client.mountDevtools();
+    // Note: Cleanup is handled by calling dispose() directly when needed.
     // Unlike React/Vue/Solid, Svelte 5 runes like $effect can only be used
     // during component initialization, so we don't add automatic cleanup here.
-    // Users should call gen.stop() in their component's cleanup if needed.
+    // Users should call gen.dispose() in their component's cleanup if needed.
     const generate = async (input) => {
         await client.generate(input);
     };
@@ -91,6 +99,9 @@ export function createGeneration(options) {
     const reset = () => {
         client.reset();
     };
+    const dispose = () => {
+        client.dispose();
+    };
     const updateBody = (newBody) => {
         client.updateOptions({ body: newBody });
     };
@@ -110,6 +121,7 @@ export function createGeneration(options) {
         generate: generate,
         stop,
         reset,
+        dispose,
         updateBody,
     };
 }

package/dist/create-summarize.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { StreamChunk, SummarizationResult } from '@tanstack/ai';
-import type { ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, SummarizeGenerateInput } from '@tanstack/ai-client';
+import type { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, SummarizeGenerateInput } from '@tanstack/ai-client';
 /**
  * Options for the createSummarize function.
  *
@@ -14,6 +14,8 @@ export interface CreateSummarizeOptions<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/create-summarize.svelte.js

@@ -30,7 +30,16 @@ import { createGeneration } from './create-generation.svelte';
  * ```
  */
 export function createSummarize(options) {
-    const gen = createGeneration(options);
+    const devtools = {
+        ...options.devtools,
+        framework: 'svelte',
+        hookName: 'createSummarize',
+        outputKind: 'text',
+    };
+    const gen = createGeneration({
+        ...options,
+        devtools,
+    });
     return {
         get result() {
             return gen.result;

package/dist/create-transcription.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { StreamChunk, TranscriptionResult } from '@tanstack/ai';
-import type { ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, TranscriptionGenerateInput } from '@tanstack/ai-client';
+import type { AIDevtoolsDisplayOptions, ConnectConnectionAdapter, GenerationClientState, GenerationFetcher, InferGenerationOutput, TranscriptionGenerateInput } from '@tanstack/ai-client';
 /**
  * Options for the createTranscription function.
  *
@@ -14,6 +14,8 @@ export interface CreateTranscriptionOptions<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/create-transcription.svelte.js

@@ -35,7 +35,16 @@ import { createGeneration } from './create-generation.svelte';
  * ```
  */
 export function createTranscription(options) {
-    const gen = createGeneration(options);
+    const devtools = {
+        ...options.devtools,
+        framework: 'svelte',
+        hookName: 'createTranscription',
+        outputKind: 'text',
+    };
+    const gen = createGeneration({
+        ...options,
+        devtools,
+    });
     return {
         get result() {
             return gen.result;

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { AnyClientTool, InferSchemaType, ModelMessage, SchemaInput } from '@tanstack/ai';
-import type { ChatClientOptions, ChatClientState, ChatRequestBody, ConnectionStatus, DistributedOmit, MultimodalContent, UIMessage } from '@tanstack/ai-client';
+import type { AIDevtoolsDisplayOptions, ChatClientOptions, ChatClientState, ChatRequestBody, ConnectionStatus, DistributedOmit, MultimodalContent, UIMessage } from '@tanstack/ai-client';
 export type { ChatRequestBody, MultimodalContent, UIMessage };
 /**
  * Recursive partial — every property and every nested array element is
@@ -30,8 +30,10 @@ export type DeepPartial<T> = T extends ReadonlyArray<infer U> ? Array<DeepPartia
  * Note: Connection and body changes will recreate the ChatClient instance.
  * To update these options, remount the component or use a key prop.
  */
-export type CreateChatOptions<TTools extends ReadonlyArray<AnyClientTool> = any, TSchema extends SchemaInput | undefined = undefined> = DistributedOmit<ChatClientOptions<TTools>, 'onMessagesChange' | 'onLoadingChange' | 'onErrorChange' | 'onStatusChange' | 'onSubscriptionChange' | 'onConnectionStatusChange' | 'onSessionGeneratingChange'> & {
+export type CreateChatOptions<TTools extends ReadonlyArray<AnyClientTool> = any, TSchema extends SchemaInput | undefined = undefined> = DistributedOmit<ChatClientOptions<TTools>, 'onMessagesChange' | 'onLoadingChange' | 'onErrorChange' | 'onStatusChange' | 'onSubscriptionChange' | 'onConnectionStatusChange' | 'onSessionGeneratingChange' | 'devtools'> & {
     live?: boolean;
+    /** Display options for TanStack AI Devtools. */
+    devtools?: AIDevtoolsDisplayOptions;
     /**
      * Standard-schema-compatible schema (Zod, Valibot, ArkType, or plain JSON
      * Schema). Used to infer the shape of `partial` and `final`.
@@ -98,6 +100,10 @@ interface BaseCreateChatReturn<TTools extends ReadonlyArray<AnyClientTool> = any
      * Stop the current response generation
      */
     stop: () => void;
+    /**
+     * Dispose the chat client and unregister it from devtools.
+     */
+    dispose: () => void;
     /**
      * Whether a response is currently being generated (reactive getter)
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-svelte",
-  "version": "0.10.9",
+  "version": "0.10.10",
   "description": "Svelte 5 bindings for TanStack AI streaming chat, structured outputs, and media generation.",
   "author": "",
   "license": "MIT",
@@ -38,11 +38,11 @@
     "media-generation"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "0.12.0"
+    "@tanstack/ai-client": "0.13.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@tanstack/ai": "^0.22.0"
+    "@tanstack/ai": "^0.22.1"
   },
   "devDependencies": {
     "@standard-schema/spec": "^1.1.0",
@@ -55,7 +55,7 @@
     "svelte-check": "^4.2.0",
     "typescript": "5.9.3",
     "vite": "^7.3.3",
-    "@tanstack/ai": "0.22.0"
+    "@tanstack/ai": "0.22.1"
   },
   "scripts": {
     "clean": "rm -rf ./dist",

package/src/create-chat.svelte.ts

@@ -1,4 +1,5 @@
 import { ChatClient } from '@tanstack/ai-client'
+import { createChatDevtoolsBridge } from '@tanstack/ai-client/devtools'
 import type {
   ChatClientState,
   ConnectionStatus,
@@ -91,6 +92,7 @@ export function createChat<
     : { fetcher: options.fetcher }
 
   const client = new ChatClient({
+    devtoolsBridgeFactory: createChatDevtoolsBridge,
     ...transport,
     id: clientId,
     ...(options.initialMessages !== undefined && {
@@ -100,6 +102,12 @@ export function createChat<
     ...(options.forwardedProps !== undefined && {
       forwardedProps: options.forwardedProps,
     }),
+    devtools: {
+      ...options.devtools,
+      framework: 'svelte',
+      hookName: 'useChat',
+      outputKind: options.outputSchema ? 'structured' : 'chat',
+    },
     ...(options.onResponse !== undefined && { onResponse: options.onResponse }),
     onChunk: (chunk: StreamChunk) => {
       options.onChunk?.(chunk)
@@ -144,6 +152,8 @@ export function createChat<
     client.subscribe()
   }
 
+  client.mountDevtools()
+
   // Note: Cleanup is handled by calling stop() directly when needed.
   // Unlike React/Vue/Solid, Svelte 5 runes like $effect can only be used
   // during component initialization, so we don't add automatic cleanup here.
@@ -166,6 +176,10 @@ export function createChat<
     client.stop()
   }
 
+  const dispose = () => {
+    client.dispose()
+  }
+
   const clear = () => {
     client.clear()
   }
@@ -276,6 +290,7 @@ export function createChat<
     append,
     reload,
     stop,
+    dispose,
     setMessages,
     clear,
     addToolResult,

package/src/create-generate-audio.svelte.ts

@@ -1,6 +1,7 @@
 import { createGeneration } from './create-generation.svelte'
 import type { AudioGenerationResult, StreamChunk } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   AudioGenerateInput,
   ConnectConnectionAdapter,
   GenerationClientState,
@@ -22,6 +23,8 @@ export interface CreateGenerateAudioOptions<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.
    *
@@ -98,11 +101,20 @@ export function createGenerateAudio<
 ): CreateGenerateAudioReturn<
   InferGenerationOutput<AudioGenerationResult, TOnResult>
 > {
+  const devtools = {
+    ...options.devtools,
+    framework: 'svelte',
+    hookName: 'createGenerateAudio',
+    outputKind: 'audio' as const,
+  }
   const gen = createGeneration<
     AudioGenerateInput,
     AudioGenerationResult,
     TOnResult
-  >(options)
+  >({
+    ...options,
+    devtools,
+  })
 
   return {
     get result() {

package/src/create-generate-image.svelte.ts

@@ -1,6 +1,7 @@
 import { createGeneration } from './create-generation.svelte'
 import type { ImageGenerationResult, StreamChunk } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ConnectConnectionAdapter,
   GenerationClientState,
   GenerationFetcher,
@@ -22,6 +23,8 @@ export interface CreateGenerateImageOptions<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.
    *
@@ -107,11 +110,20 @@ export function createGenerateImage<
 ): CreateGenerateImageReturn<
   InferGenerationOutput<ImageGenerationResult, TOnResult>
 > {
+  const devtools = {
+    ...options.devtools,
+    framework: 'svelte',
+    hookName: 'createGenerateImage',
+    outputKind: 'image' as const,
+  }
   const gen = createGeneration<
     ImageGenerateInput,
     ImageGenerationResult,
     TOnResult
-  >(options)
+  >({
+    ...options,
+    devtools,
+  })
 
   return {
     get result() {

package/src/create-generate-speech.svelte.ts

@@ -1,6 +1,7 @@
 import { createGeneration } from './create-generation.svelte'
 import type { StreamChunk, TTSResult } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ConnectConnectionAdapter,
   GenerationClientState,
   GenerationFetcher,
@@ -22,6 +23,8 @@ export interface CreateGenerateSpeechOptions<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.
    *
@@ -95,9 +98,16 @@ export function createGenerateSpeech<
     onResult?: TOnResult
   },
 ): CreateGenerateSpeechReturn<InferGenerationOutput<TTSResult, TOnResult>> {
-  const gen = createGeneration<SpeechGenerateInput, TTSResult, TOnResult>(
-    options,
-  )
+  const devtools = {
+    ...options.devtools,
+    framework: 'svelte',
+    hookName: 'createGenerateSpeech',
+    outputKind: 'audio' as const,
+  }
+  const gen = createGeneration<SpeechGenerateInput, TTSResult, TOnResult>({
+    ...options,
+    devtools,
+  })
 
   return {
     get result() {

package/src/create-generate-video.svelte.ts

@@ -1,6 +1,8 @@
 import { VideoGenerationClient } from '@tanstack/ai-client'
+import { createVideoDevtoolsBridge } from '@tanstack/ai-client/devtools'
 import type { StreamChunk } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ConnectConnectionAdapter,
   GenerationClientState,
   GenerationFetcher,
@@ -24,6 +26,8 @@ export interface CreateGenerateVideoOptions<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.
    *
@@ -68,6 +72,8 @@ export interface CreateGenerateVideoReturn<TOutput = VideoGenerateResult> {
   stop: () => void
   /** Clear all state and return to idle */
   reset: () => void
+  /** Stop in-flight work and unregister devtools listeners */
+  dispose: () => void
   /** Update additional body parameters */
   updateBody: (body: Record<string, any>) => void
 }
@@ -132,6 +138,13 @@ export function createGenerateVideo<
   const baseOptions = {
     id: clientId,
     body: options.body,
+    devtoolsBridgeFactory: createVideoDevtoolsBridge,
+    devtools: {
+      ...options.devtools,
+      framework: 'svelte',
+      hookName: 'createGenerateVideo',
+      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),
@@ -176,10 +189,12 @@ export function createGenerateVideo<
     )
   }
 
-  // Note: Cleanup is handled by calling stop() directly when needed.
+  client.mountDevtools()
+
+  // Note: Cleanup is handled by calling dispose() directly when needed.
   // Unlike React/Vue/Solid, Svelte 5 runes like $effect can only be used
   // during component initialization, so we don't add automatic cleanup here.
-  // Users should call video.stop() in their component's cleanup if needed.
+  // Users should call video.dispose() in their component's cleanup if needed.
 
   const generate = async (input: VideoGenerateInput) => {
     await client.generate(input)
@@ -193,6 +208,10 @@ export function createGenerateVideo<
     client.reset()
   }
 
+  const dispose = () => {
+    client.dispose()
+  }
+
   const updateBody = (newBody: Record<string, any>) => {
     client.updateOptions({ body: newBody })
   }
@@ -219,6 +238,7 @@ export function createGenerateVideo<
     generate,
     stop,
     reset,
+    dispose,
     updateBody,
   }
 }

package/src/create-generation.svelte.ts

@@ -1,6 +1,8 @@
 import { GenerationClient } from '@tanstack/ai-client'
+import { createGenerationDevtoolsBridge } from '@tanstack/ai-client/devtools'
 import type { StreamChunk } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ConnectConnectionAdapter,
   GenerationClientOptions,
   GenerationClientState,
@@ -26,6 +28,8 @@ export interface CreateGenerationOptions<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.
    *
@@ -62,6 +66,8 @@ export interface CreateGenerationReturn<TOutput> {
   stop: () => void
   /** Clear result, error, and return to idle */
   reset: () => void
+  /** Stop in-flight work and unregister devtools listeners */
+  dispose: () => void
   /** Update additional body parameters */
   updateBody: (body: Record<string, any>) => void
 }
@@ -124,6 +130,12 @@ export function createGeneration<
   const clientOptions: GenerationClientOptions<TInput, TResult, TOutput> = {
     id: clientId,
     body: options.body,
+    devtoolsBridgeFactory: createGenerationDevtoolsBridge,
+    devtools: {
+      ...options.devtools,
+      framework: 'svelte',
+      hookName: 'createGeneration',
+    },
     onResult: (r: TResult) => options.onResult?.(r),
     onError: (e: Error) => options.onError?.(e),
     onProgress: (p: number, m?: string) => options.onProgress?.(p, m),
@@ -160,10 +172,12 @@ export function createGeneration<
     )
   }
 
-  // Note: Cleanup is handled by calling stop() directly when needed.
+  client.mountDevtools()
+
+  // Note: Cleanup is handled by calling dispose() directly when needed.
   // Unlike React/Vue/Solid, Svelte 5 runes like $effect can only be used
   // during component initialization, so we don't add automatic cleanup here.
-  // Users should call gen.stop() in their component's cleanup if needed.
+  // Users should call gen.dispose() in their component's cleanup if needed.
 
   const generate = async (input: TInput) => {
     await client.generate(input)
@@ -177,6 +191,10 @@ export function createGeneration<
     client.reset()
   }
 
+  const dispose = () => {
+    client.dispose()
+  }
+
   const updateBody = (newBody: Record<string, any>) => {
     client.updateOptions({ body: newBody })
   }
@@ -197,6 +215,7 @@ export function createGeneration<
     generate: generate as (input: Record<string, any>) => Promise<void>,
     stop,
     reset,
+    dispose,
     updateBody,
   }
 }

package/src/create-summarize.svelte.ts

@@ -1,6 +1,7 @@
 import { createGeneration } from './create-generation.svelte'
 import type { StreamChunk, SummarizationResult } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ConnectConnectionAdapter,
   GenerationClientState,
   GenerationFetcher,
@@ -22,6 +23,8 @@ export interface CreateSummarizeOptions<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.
    *
@@ -102,11 +105,20 @@ export function createSummarize<
 ): CreateSummarizeReturn<
   InferGenerationOutput<SummarizationResult, TOnResult>
 > {
+  const devtools = {
+    ...options.devtools,
+    framework: 'svelte',
+    hookName: 'createSummarize',
+    outputKind: 'text' as const,
+  }
   const gen = createGeneration<
     SummarizeGenerateInput,
     SummarizationResult,
     TOnResult
-  >(options)
+  >({
+    ...options,
+    devtools,
+  })
 
   return {
     get result() {

package/src/create-transcription.svelte.ts

@@ -1,6 +1,7 @@
 import { createGeneration } from './create-generation.svelte'
 import type { StreamChunk, TranscriptionResult } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ConnectConnectionAdapter,
   GenerationClientState,
   GenerationFetcher,
@@ -22,6 +23,8 @@ export interface CreateTranscriptionOptions<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.
    *
@@ -107,11 +110,20 @@ export function createTranscription<
 ): CreateTranscriptionReturn<
   InferGenerationOutput<TranscriptionResult, TOnResult>
 > {
+  const devtools = {
+    ...options.devtools,
+    framework: 'svelte',
+    hookName: 'createTranscription',
+    outputKind: 'text' as const,
+  }
   const gen = createGeneration<
     TranscriptionGenerateInput,
     TranscriptionResult,
     TOnResult
-  >(options)
+  >({
+    ...options,
+    devtools,
+  })
 
   return {
     get result() {

package/src/types.ts

@@ -5,6 +5,7 @@ import type {
   SchemaInput,
 } from '@tanstack/ai'
 import type {
+  AIDevtoolsDisplayOptions,
   ChatClientOptions,
   ChatClientState,
   ChatRequestBody,
@@ -62,8 +63,11 @@ export type CreateChatOptions<
   | 'onSubscriptionChange'
   | 'onConnectionStatusChange'
   | 'onSessionGeneratingChange'
+  | 'devtools'
 > & {
   live?: boolean
+  /** Display options for TanStack AI Devtools. */
+  devtools?: AIDevtoolsDisplayOptions
   /**
    * Standard-schema-compatible schema (Zod, Valibot, ArkType, or plain JSON
    * Schema). Used to infer the shape of `partial` and `final`.
@@ -151,6 +155,11 @@ interface BaseCreateChatReturn<
    */
   stop: () => void
 
+  /**
+   * Dispose the chat client and unregister it from devtools.
+   */
+  dispose: () => void
+
   /**
    * Whether a response is currently being generated (reactive getter)
    */