Loading AgentsKit ecosystem navigation…
AgentsKit Chat
Get started

Svelte quick start

Svelte 5 shell with typed snippets for AgentsKit Chat.

View canonical Markdown

Svelte quick start

Install

code
pnpm add @agentskit/chat @agentskit/core @agentskit/svelte svelte

Shell

code
<script lang="ts">
  import { AgentChat } from '@agentskit/chat/svelte'
  import { createSupportChat } from './support-chat'
  import { adapter } from './adapter'
  const definition = createSupportChat(adapter)
</script>

<AgentChat {definition} placeholder="Ask about the product">
  {#snippet message(item)}
    <article data-role={item.role}>{item.content}</article>
  {/snippet}
</AgentChat>

Delegates to createChatStore from @agentskit/svelte. Customize via typed snippets without entering the shared definition.

Next

Edit on GitHub

Vue quick start

Native Vue shell for the same ChatDefinition.

Solid quick start

Solid shell with typed render props for AgentsKit Chat.