@agentskit/svelte

Profile: concise-package

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

Verified proof

• Package metadata and tests live under packages/svelte/.
• Package guide: https://www.agentskit.io/docs/reference/packages/svelte
• Stability map: docs/STABILITY.md

How this fits the ecosystem

@agentskit/svelte brings the shared AgentsKit chat contract to Svelte 5 stores and headless chat components.

• AgentsKit: compose it with the other packages in this repo to build agents from small, swappable parts.
• Registry: look for ready agents and templates that already use this layer at registry.agentskit.io.
• Playbook: learn the production patterns behind this layer at playbook.agentskit.io.

Docs: package guide · agent handoff

Why

• One controller contract, framework-specific views — createChatStore exposes shared chat state/actions; component props remain binding-specific.
• 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 — the shared state/action contract follows @agentskit/react; component props and exports are Svelte-specific, not full parity.

Install

npm install @agentskit/svelte @agentskit/adapters

Peers: svelte ^5.

Quick example

<script lang="ts">
  import { createChatStore } from '@agentskit/svelte'
  import type { ChatConfig } from '@agentskit/core'

  declare const adapter: ChatConfig['adapter']

  const chat = createChatStore({
    // Inject an adapter backed by your server/edge endpoint. Never ship provider secrets here.
    adapter,
  })
</script>

<div data-ak-chat>
  {#each $chat.messages as m (m.id)}
    <p data-ak-role={m.role}>{m.content}</p>
  {/each}
  <form on:submit|preventDefault={() => chat.send($chat.input)}>
    <input value={$chat.input} on:input={(e) => chat.setInput(e.currentTarget.value)} />
  </form>
</div>

createChatStore returns a Readable<ChatState> — subscribe with $chat for state; call actions (chat.send(...)) directly on the store object.

API

• createChatStore(config) — returns a Readable<ChatState> ($chat.messages, $chat.status, $chat.input) plus actions send(string | ContentPart[]), setInput(v), stop, retry, clear, decide, approve, deny, edit, regenerate, destroy. Call destroy() from onDestroy (or equivalent); it unsubscribes and stops in-flight work, and is safe to call repeatedly.
• Headless components (Svelte 5, data-ak-* only): ChatContainer, Message, InputBar (blocks submit/Enter while streaming), Markdown, CodeBlock, ToolCallView (aria-expanded on the toggle), ThinkingIndicator, ToolConfirmation.

Durable confirmations use chat.decide(toolCallId, 'approve' | 'deny', reason?) with a conversation-scoped decisionStore in the chat configuration. Like send, this action rejects after destroy(). See core durable decisions for storage and operational recovery requirements.

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

Quick start

import '@agentskit/svelte'
console.log('@agentskit/svelte loaded')

Maturity and compatibility

• Stability: beta — see docs/STABILITY.md
• Node.js 20+ and TypeScript strict mode
• Published as @agentskit/svelte

Contributing

See CONTRIBUTING.md and the monorepo LICENSE.