@ai-sdk/svelte 0.0.0-02dba89b-20251009204516

package/dist/utils.svelte.js

@@ -0,0 +1,50 @@
+import { getContext, hasContext, setContext, untrack } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+export function createContext(name) {
+    const key = Symbol(name);
+    return {
+        hasContext: () => {
+            // At the time of writing there's no way to determine if we're
+            // currently initializing a component without a try-catch
+            try {
+                return hasContext(key);
+            }
+            catch (e) {
+                if (typeof e === 'object' &&
+                    e !== null &&
+                    'message' in e &&
+                    typeof e.message === 'string' &&
+                    e.message?.includes('lifecycle_outside_component')) {
+                    return false;
+                }
+                throw e;
+            }
+        },
+        getContext: () => getContext(key),
+        setContext: (value) => setContext(key, value),
+    };
+}
+export function promiseWithResolvers() {
+    let resolve;
+    let reject;
+    const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    return { promise, resolve: resolve, reject: reject };
+}
+export class KeyedStore extends SvelteMap {
+    #itemConstructor;
+    constructor(itemConstructor, value) {
+        super(value);
+        this.#itemConstructor = itemConstructor;
+    }
+    get(key) {
+        const test = super.get(key) ??
+            // Untrack here because this is technically a state mutation, meaning
+            // deriveds downstream would fail. Because this is idempotent (even
+            // though it's not pure), it's safe.
+            untrack(() => this.set(key, new this.#itemConstructor())).get(key);
+        return test;
+    }
+}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@ai-sdk/svelte",
+  "version": "0.0.0-02dba89b-20251009204516",
+  "license": "Apache-2.0",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "src",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "svelte": "^5.31.0",
+    "zod": "^3.25.76 || ^4.1.8"
+  },
+  "peerDependenciesMeta": {
+    "zod": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "ai": "0.0.0-02dba89b-20251009204516",
+    "@ai-sdk/provider-utils": "3.0.11"
+  },
+  "devDependencies": {
+    "@types/node": "20.17.24",
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.4",
+    "eslint": "^9.18.0",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "jsdom": "^26.0.0",
+    "publint": "^0.3.2",
+    "svelte": "^5.31.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0",
+    "zod": "3.25.76",
+    "@vercel/ai-tsconfig": "0.0.0"
+  },
+  "homepage": "https://ai-sdk.dev/docs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vercel/ai.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/vercel/ai/issues"
+  },
+  "keywords": [
+    "ai",
+    "svelte"
+  ],
+  "scripts": {
+    "build": "pnpm prepack",
+    "build:watch": "pnpm clean && pnpm --filter svelte build && svelte-package --input=src --watch",
+    "preview": "vite preview",
+    "type-check": "svelte-check --tsconfig ./tsconfig.json",
+    "type-check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "prettier-fix": "prettier --write .",
+    "prettier-check": "prettier --check .",
+    "lint": "eslint .",
+    "test": "vitest --run",
+    "test:update": "vitest --run -u",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  }
+}

package/src/chat.svelte.ts

@@ -0,0 +1,51 @@
+import {
+  AbstractChat,
+  type ChatInit,
+  type ChatState,
+  type ChatStatus,
+  type CreateUIMessage,
+  type UIMessage,
+} from 'ai';
+
+export type { CreateUIMessage, UIMessage };
+
+export class Chat<
+  UI_MESSAGE extends UIMessage = UIMessage,
+> extends AbstractChat<UI_MESSAGE> {
+  constructor(init: ChatInit<UI_MESSAGE>) {
+    super({
+      ...init,
+      state: new SvelteChatState(init.messages),
+    });
+  }
+}
+
+class SvelteChatState<UI_MESSAGE extends UIMessage>
+  implements ChatState<UI_MESSAGE>
+{
+  messages: UI_MESSAGE[];
+  status = $state<ChatStatus>('ready');
+  error = $state<Error | undefined>(undefined);
+
+  constructor(messages: UI_MESSAGE[] = []) {
+    this.messages = $state(messages);
+  }
+
+  setMessages = (messages: UI_MESSAGE[]) => {
+    this.messages = messages;
+  };
+
+  pushMessage = (message: UI_MESSAGE) => {
+    this.messages.push(message);
+  };
+
+  popMessage = () => {
+    this.messages.pop();
+  };
+
+  replaceMessage = (index: number, message: UI_MESSAGE) => {
+    this.messages[index] = message;
+  };
+
+  snapshot = <T>(thing: T): T => $state.snapshot(thing) as T;
+}

package/src/completion-context.svelte.ts

@@ -0,0 +1,24 @@
+import type { JSONValue } from 'ai';
+import { SvelteMap } from 'svelte/reactivity';
+import { createContext, KeyedStore } from './utils.svelte.js';
+
+class CompletionStore {
+  completions = new SvelteMap<string, string>();
+  data = $state<JSONValue[]>([]);
+  loading = $state(false);
+  error = $state<Error>();
+}
+
+export class KeyedCompletionStore extends KeyedStore<CompletionStore> {
+  constructor(
+    value?: Iterable<readonly [string, CompletionStore]> | null | undefined,
+  ) {
+    super(CompletionStore, value);
+  }
+}
+
+export const {
+  hasContext: hasCompletionContext,
+  getContext: getCompletionContext,
+  setContext: setCompletionContext,
+} = createContext<KeyedCompletionStore>('Completion');

package/src/completion.svelte.ts

@@ -0,0 +1,116 @@
+import {
+  callCompletionApi,
+  generateId,
+  type CompletionRequestOptions,
+  type UseCompletionOptions,
+} from 'ai';
+import {
+  KeyedCompletionStore,
+  getCompletionContext,
+  hasCompletionContext,
+} from './completion-context.svelte.js';
+
+export type CompletionOptions = Readonly<UseCompletionOptions>;
+
+export class Completion {
+  readonly #options: CompletionOptions = {};
+  readonly #api = $derived(this.#options.api ?? '/api/completion');
+  readonly #id = $derived(this.#options.id ?? generateId());
+  readonly #streamProtocol = $derived(this.#options.streamProtocol ?? 'data');
+  readonly #keyedStore = $state<KeyedCompletionStore>()!;
+  readonly #store = $derived(this.#keyedStore.get(this.#id));
+  #abortController: AbortController | undefined;
+
+  /** The current completion result */
+  get completion(): string {
+    return this.#store.completions.get(this.#id) ?? '';
+  }
+  set completion(value: string) {
+    this.#store.completions.set(this.#id, value);
+  }
+
+  /** The error object of the API request */
+  get error() {
+    return this.#store.error;
+  }
+
+  /** The current value of the input. Writable, so it can be bound to form inputs. */
+  input = $state<string>()!;
+
+  /**
+   * Flag that indicates whether an API request is in progress.
+   */
+  get loading() {
+    return this.#store.loading;
+  }
+
+  constructor(options: CompletionOptions = {}) {
+    this.#keyedStore = hasCompletionContext()
+      ? getCompletionContext()
+      : new KeyedCompletionStore();
+    this.#options = options;
+    this.completion = options.initialCompletion ?? '';
+    this.input = options.initialInput ?? '';
+  }
+
+  /**
+   * Abort the current request immediately, keep the generated tokens if any.
+   */
+  stop = () => {
+    try {
+      this.#abortController?.abort();
+    } catch {
+      // ignore
+    } finally {
+      this.#store.loading = false;
+      this.#abortController = undefined;
+    }
+  };
+
+  /**
+   * Send a new prompt to the API endpoint and update the completion state.
+   */
+  complete = async (prompt: string, options?: CompletionRequestOptions) =>
+    this.#triggerRequest(prompt, options);
+
+  /** Form submission handler to automatically reset input and call the completion API */
+  handleSubmit = async (event?: { preventDefault?: () => void }) => {
+    event?.preventDefault?.();
+    if (this.input) {
+      await this.complete(this.input);
+    }
+  };
+
+  #triggerRequest = async (
+    prompt: string,
+    options?: CompletionRequestOptions,
+  ) => {
+    return callCompletionApi({
+      api: this.#api,
+      prompt,
+      credentials: this.#options.credentials,
+      headers: { ...this.#options.headers, ...options?.headers },
+      body: {
+        ...this.#options.body,
+        ...options?.body,
+      },
+      streamProtocol: this.#streamProtocol,
+      fetch: this.#options.fetch,
+      // throttle streamed ui updates:
+      setCompletion: completion => {
+        this.completion = completion;
+      },
+      setLoading: loading => {
+        this.#store.loading = loading;
+      },
+      setError: error => {
+        this.#store.error = error;
+      },
+      setAbortController: abortController => {
+        this.#abortController = abortController ?? undefined;
+      },
+      onFinish: this.#options.onFinish,
+      onError: this.#options.onError,
+    });
+  };
+}

package/src/context-provider.ts

@@ -0,0 +1,16 @@
+import {
+  KeyedCompletionStore,
+  setCompletionContext,
+} from './completion-context.svelte.js';
+import {
+  KeyedStructuredObjectStore,
+  setStructuredObjectContext,
+} from './structured-object-context.svelte.js';
+
+export function createAIContext() {
+  const completionStore = new KeyedCompletionStore();
+  setCompletionContext(completionStore);
+
+  const objectStore = new KeyedStructuredObjectStore();
+  setStructuredObjectContext(objectStore);
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export { Chat, type CreateUIMessage, type UIMessage } from './chat.svelte.js';
+export { Completion, type CompletionOptions } from './completion.svelte.js';
+export { createAIContext } from './context-provider.js';
+export {
+  StructuredObject as Experimental_StructuredObject,
+  type Experimental_StructuredObjectOptions,
+} from './structured-object.svelte.js';

package/src/structured-object-context.svelte.ts

@@ -0,0 +1,27 @@
+import type { DeepPartial } from 'ai';
+import { createContext, KeyedStore } from './utils.svelte.js';
+
+export class StructuredObjectStore<RESULT> {
+  object = $state<DeepPartial<RESULT>>();
+  loading = $state(false);
+  error = $state<Error>();
+}
+
+export class KeyedStructuredObjectStore extends KeyedStore<
+  StructuredObjectStore<unknown>
+> {
+  constructor(
+    value?:
+      | Iterable<readonly [string, StructuredObjectStore<unknown>]>
+      | null
+      | undefined,
+  ) {
+    super(StructuredObjectStore, value);
+  }
+}
+
+export const {
+  hasContext: hasStructuredObjectContext,
+  getContext: getStructuredObjectContext,
+  setContext: setStructuredObjectContext,
+} = createContext<KeyedStructuredObjectStore>('StructuredObject');

package/src/structured-object.svelte.ts

@@ -0,0 +1,253 @@
+import {
+  generateId,
+  isAbortError,
+  safeValidateTypes,
+  type FetchFunction,
+  type InferSchema,
+} from '@ai-sdk/provider-utils';
+import {
+  asSchema,
+  isDeepEqualData,
+  parsePartialJson,
+  type DeepPartial,
+  type Schema,
+} from 'ai';
+import type * as z3 from 'zod/v3';
+import type * as z4 from 'zod/v4';
+import {
+  getStructuredObjectContext,
+  hasStructuredObjectContext,
+  KeyedStructuredObjectStore,
+  type StructuredObjectStore,
+} from './structured-object-context.svelte.js';
+
+export type Experimental_StructuredObjectOptions<
+  SCHEMA extends z3.Schema | z4.core.$ZodType | Schema,
+  RESULT = InferSchema<SCHEMA>,
+> = {
+  /**
+   * The API endpoint. It should stream JSON that matches the schema as chunked text.
+   */
+  api: string;
+
+  /**
+   * A Zod schema that defines the shape of the complete object.
+   */
+  schema: SCHEMA;
+
+  /**
+   * An unique identifier. If not provided, a random one will be
+   * generated. When provided, the `useObject` hook with the same `id` will
+   * have shared states across components.
+   */
+  id?: string;
+
+  /**
+   * An optional value for the initial object.
+   */
+  initialValue?: DeepPartial<RESULT>;
+
+  /**
+   * Custom fetch implementation. You can use it as a middleware to intercept requests,
+   * or to provide a custom fetch implementation for e.g. testing.
+   */
+  fetch?: FetchFunction;
+
+  /**
+   * Callback that is called when the stream has finished.
+   */
+  onFinish?: (event: {
+    /**
+     * The generated object (typed according to the schema).
+     * Can be undefined if the final object does not match the schema.
+     */
+    object: RESULT | undefined;
+
+    /**
+     * Optional error object. This is e.g. a TypeValidationError when the final object does not match the schema.
+     */
+    error: Error | undefined;
+  }) => Promise<void> | void;
+
+  /**
+   * Callback function to be called when an error is encountered.
+   */
+  onError?: (error: Error) => void;
+
+  /**
+   * Additional HTTP headers to be included in the request.
+   */
+  headers?: Record<string, string> | Headers;
+
+  /**
+   * The credentials mode to be used for the fetch request.
+   * Possible values are: 'omit', 'same-origin', 'include'.
+   * Defaults to 'same-origin'.
+   */
+  credentials?: RequestCredentials;
+};
+
+export class StructuredObject<
+  SCHEMA extends z3.Schema | z4.core.$ZodType | Schema,
+  RESULT = InferSchema<SCHEMA>,
+  INPUT = unknown,
+> {
+  #options: Experimental_StructuredObjectOptions<SCHEMA, RESULT> =
+    {} as Experimental_StructuredObjectOptions<SCHEMA, RESULT>;
+  readonly #id = $derived(this.#options.id ?? generateId());
+  readonly #keyedStore = $state<KeyedStructuredObjectStore>()!;
+  readonly #store = $derived(
+    this.#keyedStore.get(this.#id),
+  ) as StructuredObjectStore<RESULT>;
+  #abortController: AbortController | undefined;
+
+  /**
+   * The current value for the generated object. Updated as the API streams JSON chunks.
+   */
+  get object(): DeepPartial<RESULT> | undefined {
+    return this.#store.object;
+  }
+  set #object(value: DeepPartial<RESULT> | undefined) {
+    this.#store.object = value;
+  }
+
+  /** The error object of the API request */
+  get error() {
+    return this.#store.error;
+  }
+
+  /**
+   * Flag that indicates whether an API request is in progress.
+   */
+  get loading() {
+    return this.#store.loading;
+  }
+
+  constructor(options: Experimental_StructuredObjectOptions<SCHEMA, RESULT>) {
+    if (hasStructuredObjectContext()) {
+      this.#keyedStore = getStructuredObjectContext();
+    } else {
+      this.#keyedStore = new KeyedStructuredObjectStore();
+    }
+    this.#options = options;
+    this.#object = options.initialValue;
+  }
+
+  /**
+   * Abort the current request immediately, keep the current partial object if any.
+   */
+  stop = () => {
+    try {
+      this.#abortController?.abort();
+    } catch {
+      // ignore
+    } finally {
+      this.#store.loading = false;
+      this.#abortController = undefined;
+    }
+  };
+
+  /**
+   * Calls the API with the provided input as JSON body.
+   */
+  submit = async (input: INPUT) => {
+    try {
+      this.#clearObject();
+
+      this.#store.loading = true;
+
+      const abortController = new AbortController();
+      this.#abortController = abortController;
+
+      const actualFetch = this.#options.fetch ?? fetch;
+      const response = await actualFetch(this.#options.api, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...this.#options.headers,
+        },
+        credentials: this.#options.credentials,
+        signal: abortController.signal,
+        body: JSON.stringify(input),
+      });
+
+      if (!response.ok) {
+        throw new Error(
+          (await response.text()) ?? 'Failed to fetch the response.',
+        );
+      }
+
+      if (response.body == null) {
+        throw new Error('The response body is empty.');
+      }
+
+      let accumulatedText = '';
+      let latestObject: DeepPartial<RESULT> | undefined = undefined;
+
+      await response.body.pipeThrough(new TextDecoderStream()).pipeTo(
+        new WritableStream<string>({
+          write: async chunk => {
+            if (abortController?.signal.aborted) {
+              throw new DOMException('Stream aborted', 'AbortError');
+            }
+            accumulatedText += chunk;
+
+            const { value } = await parsePartialJson(accumulatedText);
+            const currentObject = value as DeepPartial<RESULT>;
+
+            if (!isDeepEqualData(latestObject, currentObject)) {
+              latestObject = currentObject;
+
+              this.#store.object = currentObject;
+            }
+          },
+
+          close: async () => {
+            this.#store.loading = false;
+            this.#abortController = undefined;
+
+            if (this.#options.onFinish != null) {
+              const validationResult = await safeValidateTypes({
+                value: latestObject,
+                schema: asSchema(this.#options.schema),
+              });
+
+              this.#options.onFinish(
+                validationResult.success
+                  ? { object: validationResult.value, error: undefined }
+                  : { object: undefined, error: validationResult.error },
+              );
+            }
+          },
+        }),
+      );
+    } catch (error) {
+      if (isAbortError(error)) {
+        return;
+      }
+
+      const coalescedError =
+        error instanceof Error ? error : new Error(String(error));
+      if (this.#options.onError) {
+        this.#options.onError(coalescedError);
+      }
+
+      this.#store.loading = false;
+      this.#store.error = coalescedError;
+    }
+  };
+
+  /**
+   * Clears the object state.
+   */
+  clear = () => {
+    this.stop();
+    this.#clearObject();
+  };
+
+  #clearObject = () => {
+    this.#store.object = undefined;
+    this.#store.error = undefined;
+    this.#store.loading = false;
+  };
+}

package/src/tests/completion-synchronization.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Completion } from '../completion.svelte.js';
+  import { createAIContext } from '../context-provider.js';
+
+  let { id }: { id?: string } = $props();
+
+  createAIContext();
+  const completion1 = new Completion({ id });
+  const completion2 = new Completion({ id });
+
+  export { completion1, completion2 };
+</script>

package/src/tests/structured-object-synchronization.svelte

@@ -0,0 +1,22 @@
+<script lang="ts" generics="RESULT">
+  import { createAIContext } from '../context-provider.js';
+  import { StructuredObject } from '../structured-object.svelte.js';
+  import type { Schema } from 'ai';
+  import type { z } from 'zod';
+
+  let {
+    id,
+    api,
+    schema,
+  }: {
+    id?: string;
+    api: string;
+    schema: z.Schema<RESULT, z.ZodTypeDef, unknown> | Schema<RESULT>;
+  } = $props();
+
+  createAIContext();
+  const object1 = new StructuredObject({ id, api, schema });
+  const object2 = new StructuredObject({ id, api, schema });
+
+  export { object1, object2 };
+</script>