---
title: "AI Kit Svelte"
description: "Svelte stores and actions for AI-powered interfaces — a streaming completion store built on Svelte's reactive stores."
canonical: "https://docs.ainative.studio/docs/ai-kit/svelte"
last-updated: "2026-10-03T21:47:10.764Z"
---

# AI Kit Svelte

Source: https://docs.ainative.studio/docs/ai-kit/svelte

> Svelte stores and actions for AI-powered interfaces — a streaming completion store built on Svelte's reactive stores.

# AI Kit Svelte

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

```bash
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.

```svelte
<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`):

| Field | Type | Description |
|---|---|---|
| `messages` | `Readable<Message[]>` | Conversation messages store |
| `isStreaming` | `Readable<boolean>` | Whether a response is currently streaming |
| `error` | `Readable<Error \| null>` | Last error, if any |
| `usage` | `Readable<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()` | `() => void` | Abort the in-flight stream |
| `reset()` | `() => void` | Clear messages and state |
| `destroy()` | `() => void` | Tear 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

- [AI Kit Overview](/docs/ai-kit/overview) — the full toolkit and shared core
- [AI Kit React](/docs/ai-kit/react) — the React SDK
- [AI Kit Vue](/docs/ai-kit/vue) — the Vue SDK