---
title: Svelte quick start
description: Svelte 5 shell with typed snippets for AgentsKit Chat.
---

# Svelte quick start

## Install

```bash
pnpm add @agentskit/chat @agentskit/core @agentskit/svelte svelte
```

## Shell

```svelte
<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](https://www.agentskit.io/docs). Customize via typed snippets without entering the shared definition.

## Next

- [Multi-surface](/docs/examples/multi-surface)
- [Styling](/docs/theming-and-composition)