@agentskit/svelte

Svelte 5 store + headless chat components. Same ChatReturn contract every AgentsKit framework binding ships — swap frameworks without changing your agent.

Tags: ai · agents · llm · agentskit · svelte · svelte5 · runes · chat · streaming

Why

• One contract, every framework — createChatStore returns the exact same shape as the React / Vue / Solid / Angular / RN / Ink bindings.
• Svelte 5 runes — reactive state without subscriptions; drops into .svelte files natively.
• Headless by default — components emit data-ak-* attributes; style however you want.
• Streaming, tools, HITL — all core features work identically to @agentskit/react.

Install

npm install @agentskit/svelte @agentskit/adapters

Peers: svelte ^5.

Quick example

<script lang="ts">
  import { createChatStore } from '@agentskit/svelte'
  import ChatContainer from '@agentskit/svelte/ChatContainer.svelte'
  import Message from '@agentskit/svelte/Message.svelte'
  import InputBar from '@agentskit/svelte/InputBar.svelte'
  import { anthropic } from '@agentskit/adapters'

  const chat = createChatStore({
    adapter: anthropic({ apiKey: import.meta.env.VITE_ANTHROPIC_API_KEY, model: 'claude-sonnet-4-6' }),
  })
</script>

<ChatContainer>
  {#each chat.messages as m (m.id)}
    <Message message={m} />
  {/each}
  <InputBar {chat} />
</ChatContainer>

API

• createChatStore(config) — returns ChatReturn with reactive values via Svelte 5 runes.
• Headless components (all .svelte): ChatContainer, Message, InputBar, ToolCallView, ToolConfirmation, ThinkingIndicator.

Ecosystem

| Package | Role | |---------|------| | @agentskit/core | ChatReturn contract | | @agentskit/adapters | LLM providers | | @agentskit/tools | Built-in + integration tools | | @agentskit/memory | Chat + vector backends | | @agentskit/react · vue · solid · react-native · angular · ink | Same contract, different host |

Contributors

License

MIT — see LICENSE.

Docs

Full documentation · GitHub