@tanstack/ai-svelte 0.6.2 → 0.6.4

package/dist/create-generation.svelte.js

@@ -0,0 +1,110 @@
+import { GenerationClient } from '@tanstack/ai-client';
+/**
+ * Creates a reactive generation instance for Svelte 5.
+ *
+ * This is the base function used by `createGenerateImage`, `createGenerateSpeech`,
+ * `createTranscription`, and `createSummarize`. You can also use it directly
+ * for custom generation types.
+ *
+ * @template TInput - The input type for the generation request
+ * @template TResult - The result type returned by the generation
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createGeneration, fetchServerSentEvents } from '@tanstack/ai-svelte'
+ *
+ *   const gen = createGeneration({
+ *     connection: fetchServerSentEvents('/api/generate/custom'),
+ *   })
+ * </script>
+ *
+ * <div>
+ *   <button onclick={() => gen.generate({ prompt: 'Hello' })}>Generate</button>
+ *   {#if gen.isLoading}
+ *     <p>Generating...</p>
+ *   {/if}
+ *   {#if gen.result}
+ *     <p>{JSON.stringify(gen.result)}</p>
+ *   {/if}
+ * </div>
+ * ```
+ */
+export function createGeneration(options) {
+    const clientId = options.id || `gen-${Date.now()}-${Math.random().toString(36).substring(7)}`;
+    // Create reactive state using Svelte 5 runes
+    let result = $state(null);
+    let isLoading = $state(false);
+    let error = $state(undefined);
+    let status = $state('idle');
+    const clientOptions = {
+        id: clientId,
+        body: options.body,
+        onResult: (r) => options.onResult?.(r),
+        onError: (e) => options.onError?.(e),
+        onProgress: (p, m) => options.onProgress?.(p, m),
+        onChunk: (c) => options.onChunk?.(c),
+        onResultChange: (r) => {
+            result = r;
+        },
+        onLoadingChange: (l) => {
+            isLoading = l;
+        },
+        onErrorChange: (e) => {
+            error = e;
+        },
+        onStatusChange: (s) => {
+            status = s;
+        },
+    };
+    let client;
+    if (options.connection) {
+        client = new GenerationClient({
+            ...clientOptions,
+            connection: options.connection,
+        });
+    }
+    else if (options.fetcher) {
+        client = new GenerationClient({
+            ...clientOptions,
+            fetcher: options.fetcher,
+        });
+    }
+    else {
+        throw new Error('createGeneration requires either a connection or fetcher option');
+    }
+    // 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.
+    // Users should call gen.stop() in their component's cleanup if needed.
+    const generate = async (input) => {
+        await client.generate(input);
+    };
+    const stop = () => {
+        client.stop();
+    };
+    const reset = () => {
+        client.reset();
+    };
+    const updateBody = (newBody) => {
+        client.updateOptions({ body: newBody });
+    };
+    return {
+        get result() {
+            return result;
+        },
+        get isLoading() {
+            return isLoading;
+        },
+        get error() {
+            return error;
+        },
+        get status() {
+            return status;
+        },
+        generate: generate,
+        stop,
+        reset,
+        updateBody,
+    };
+}

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

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

package/dist/create-summarize.svelte.js

@@ -0,0 +1,52 @@
+import { createGeneration } from './create-generation.svelte';
+/**
+ * Creates a reactive text summarization instance for Svelte 5.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createSummarize, fetchServerSentEvents } from '@tanstack/ai-svelte'
+ *
+ *   const summarizer = createSummarize({
+ *     connection: fetchServerSentEvents('/api/summarize'),
+ *   })
+ * </script>
+ *
+ * <div>
+ *   <button onclick={() => summarizer.generate({
+ *     text: 'Long article text...',
+ *     style: 'bullet-points',
+ *     maxLength: 200,
+ *   })}>
+ *     Summarize
+ *   </button>
+ *   {#if summarizer.isLoading}
+ *     <p>Summarizing...</p>
+ *   {/if}
+ *   {#if summarizer.result}
+ *     <p>{summarizer.result.summary}</p>
+ *   {/if}
+ * </div>
+ * ```
+ */
+export function createSummarize(options) {
+    const gen = createGeneration(options);
+    return {
+        get result() {
+            return gen.result;
+        },
+        get isLoading() {
+            return gen.isLoading;
+        },
+        get error() {
+            return gen.error;
+        },
+        get status() {
+            return gen.status;
+        },
+        generate: gen.generate,
+        stop: gen.stop,
+        reset: gen.reset,
+        updateBody: gen.updateBody,
+    };
+}

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

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

package/dist/create-transcription.svelte.js

@@ -0,0 +1,57 @@
+import { createGeneration } from './create-generation.svelte';
+/**
+ * Creates a reactive audio transcription instance for Svelte 5.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createTranscription, fetchServerSentEvents } from '@tanstack/ai-svelte'
+ *
+ *   const transcription = createTranscription({
+ *     connection: fetchServerSentEvents('/api/transcribe'),
+ *   })
+ *
+ *   function handleFile(e) {
+ *     const file = e.target.files?.[0]
+ *     if (file) {
+ *       const reader = new FileReader()
+ *       reader.onload = () => {
+ *         transcription.generate({ audio: reader.result, language: 'en' })
+ *       }
+ *       reader.readAsDataURL(file)
+ *     }
+ *   }
+ * </script>
+ *
+ * <div>
+ *   <input type="file" accept="audio/*" onchange={handleFile} />
+ *   {#if transcription.isLoading}
+ *     <p>Transcribing...</p>
+ *   {/if}
+ *   {#if transcription.result}
+ *     <p>{transcription.result.text}</p>
+ *   {/if}
+ * </div>
+ * ```
+ */
+export function createTranscription(options) {
+    const gen = createGeneration(options);
+    return {
+        get result() {
+            return gen.result;
+        },
+        get isLoading() {
+            return gen.isLoading;
+        },
+        get error() {
+            return gen.error;
+        },
+        get status() {
+            return gen.status;
+        },
+        generate: gen.generate,
+        stop: gen.stop,
+        reset: gen.reset,
+        updateBody: gen.updateBody,
+    };
+}

package/dist/index.d.ts

@@ -1,3 +1,15 @@
 export { createChat } from './create-chat.svelte';
 export type { CreateChatOptions, CreateChatReturn, UIMessage, ChatRequestBody, } from './types';
-export { fetchServerSentEvents, fetchHttpStream, stream, createChatClientOptions, clientTools, type ConnectionAdapter, type FetchConnectionOptions, type InferChatMessages, } from '@tanstack/ai-client';
+export { createGeneration } from './create-generation.svelte';
+export type { CreateGenerationOptions, CreateGenerationReturn, } from './create-generation.svelte';
+export { createGenerateImage } from './create-generate-image.svelte';
+export type { CreateGenerateImageOptions, CreateGenerateImageReturn, } from './create-generate-image.svelte';
+export { createGenerateSpeech } from './create-generate-speech.svelte';
+export type { CreateGenerateSpeechOptions, CreateGenerateSpeechReturn, } from './create-generate-speech.svelte';
+export { createTranscription } from './create-transcription.svelte';
+export type { CreateTranscriptionOptions, CreateTranscriptionReturn, } from './create-transcription.svelte';
+export { createSummarize } from './create-summarize.svelte';
+export type { CreateSummarizeOptions, CreateSummarizeReturn, } from './create-summarize.svelte';
+export { createGenerateVideo } from './create-generate-video.svelte';
+export type { CreateGenerateVideoOptions, CreateGenerateVideoReturn, } from './create-generate-video.svelte';
+export { fetchServerSentEvents, fetchHttpStream, stream, createChatClientOptions, clientTools, type ConnectionAdapter, type FetchConnectionOptions, type InferChatMessages, type GenerationClientState, type ImageGenerateInput, type SpeechGenerateInput, type TranscriptionGenerateInput, type SummarizeGenerateInput, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, } from '@tanstack/ai-client';

package/dist/index.js

@@ -1,3 +1,10 @@
 export { createChat } from './create-chat.svelte';
+// Generation hooks
+export { createGeneration } from './create-generation.svelte';
+export { createGenerateImage } from './create-generate-image.svelte';
+export { createGenerateSpeech } from './create-generate-speech.svelte';
+export { createTranscription } from './create-transcription.svelte';
+export { createSummarize } from './create-summarize.svelte';
+export { createGenerateVideo } from './create-generate-video.svelte';
 // Re-export from ai-client for convenience
 export { fetchServerSentEvents, fetchHttpStream, stream, createChatClientOptions, clientTools, } from '@tanstack/ai-client';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-svelte",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Svelte bindings for TanStack AI",
   "author": "",
   "license": "MIT",
@@ -33,11 +33,11 @@
     "streaming"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "0.5.2"
+    "@tanstack/ai-client": "0.6.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@tanstack/ai": "^0.6.1"
+    "@tanstack/ai": "^0.6.3"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.10",
@@ -49,7 +49,7 @@
     "svelte-check": "^4.2.0",
     "typescript": "5.9.3",
     "vite": "^7.2.7",
-    "@tanstack/ai": "0.6.1"
+    "@tanstack/ai": "0.6.3"
   },
   "scripts": {
     "clean": "rm -rf ./dist",

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

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