@agentskit/svelte — for agents

#Purpose

Svelte binding for the ChatReturn contract from @agentskit/core. Returns a Readable<ChatState> plus action methods (send / stop / clear) and destroy() for cleanup.

#Install

npm install @agentskit/svelte
# peer:
npm install svelte

#Primary exports

• createChatStore(config): SvelteChatStore — Readable<ChatState> + action methods + destroy().
• Headless components (Svelte 5, mirroring @agentskit/react, data-ak-* only): ChatContainer, Message, InputBar, Markdown, CodeBlock, ToolCallView, ThinkingIndicator, ToolConfirmation.

#Minimal example

<script lang="ts">
import { createChatStore } from '@agentskit/svelte'
const chat = createChatStore({ adapter })
</script>

{#each $chat.messages as m (m.id)}
  <p>{m.content}</p>
{/each}
<form on:submit|preventDefault={() => chat.send($chat.input)}>
  <input bind:value={$chat.input} />
</form>

#Common patterns

• Runes vs stores: works in both Svelte 5 runes mode and Svelte 4 stores — auto-subscription via $chat works the same.
• Cleanup: call chat.destroy() in onDestroy() to abort in-flight streams and release the adapter.
• SvelteKit SSR: packaged components render on the server. Start browser-bound adapters in onMount, or proxy provider calls through a server endpoint.

#Related

• @agentskit/core — ChatReturn contract.
• @agentskit/adapters — provider adapters.
• @agentskit/react, @agentskit/vue, @agentskit/solid, @agentskit/angular, @agentskit/ink, @agentskit/react-native — sibling bindings.

#Source

• npm: https://www.npmjs.com/package/@agentskit/svelte
• repo: https://github.com/AgentsKit-io/agentskit/tree/main/packages/svelte