Skip to main content

AI Kit Svelte

Svelte stores and actions for building AI-powered interfaces with streaming support, built on @ainative/ai-kit-core.

npm install @ainative/ai-kit-svelte

Requires: Svelte 4 or 5 (svelte@^4.0.0 || ^5.0.0)

createAIStream​

Create a streaming AI store. Returns readable stores for messages, streaming status, errors, and usage, plus imperative actions.

<script lang="ts">
  import { createAIStream } from '@ainative/ai-kit-svelte';

  const stream = createAIStream({
    apiUrl: 'https://api.ainative.studio/api/v1/chat/completions',
    apiKey: import.meta.env.VITE_AINATIVE_API_KEY,
    model: 'gpt-oss-120b',
  });

  const { messages, isStreaming, error, usage } = stream;

  // Clean up subscriptions when the component is destroyed
  import { onDestroy } from 'svelte';
  onDestroy(() => stream.destroy());
</script>

{#each $messages as m (m.id)}
  <div>{m.role}: {m.content}</div>
{/each}

{#if $isStreaming}<p>…</p>{/if}
{#if $error}<p class="error">{$error.message}</p>{/if}

<button on:click={() => stream.send('Hello!')} disabled={$isStreaming}>Send</button>
{#if $isStreaming}<button on:click={stream.stop}>Stop</button>{/if}

config is a StreamConfig from @ainative/ai-kit-core (API URL, key, model, and generation options).

Returns (AIStreamStore):

FieldTypeDescription
messagesReadable<Message[]>Conversation messages store
isStreamingReadable<boolean>Whether a response is currently streaming
errorReadable<Error | null>Last error, if any
usageReadable<Usage>Token usage store
send(content)(string) => Promise<void>Send a user message and stream the reply
retry()() => Promise<void>Re-run the last send
stop()() => voidAbort the in-flight stream
reset()() => voidClear messages and state
destroy()() => voidTear down the store (call in onDestroy)

Subscribe to the readable stores with Svelte's $ prefix ($messages, $isStreaming, …). Call destroy() when your component unmounts to release the underlying stream and subscriptions.

See also​