# Getting Started
> Install and configure @humanspeak/svelte-virtual-chat — a high-performance virtual chat viewport for Svelte 5 with follow-bottom and streaming support.
**Source:** [https://virtualchat.svelte.page/docs/getting-started](https://virtualchat.svelte.page/docs/getting-started)
---
**@humanspeak/svelte-virtual-chat** is a high-performance virtual chat viewport for Svelte 5. It renders only visible messages to the DOM while handling follow-bottom behavior, LLM streaming stability, and history prepend with scroll anchor preservation.
## Installation
```bash
pnpm add @humanspeak/svelte-virtual-chat
```
```bash
npm install @humanspeak/svelte-virtual-chat
```
## Quick Start
Import the component and pass your messages array with a `getMessageId` function and a `renderMessage` snippet:
```svelte
msg.id}
estimatedMessageHeight={72}
containerClass="h-full"
viewportClass="h-full"
>
{#snippet renderMessage(message, index)}
{message.role}
{message.content}
{/snippet}
```
## Height Constraint
The component **must** have a defined height. The `containerClass` and `viewportClass` props control the outer and inner elements. The parent element needs a fixed or flex-derived height:
```svelte
```
Without a height constraint, the viewport expands to fit all content and virtualization won't activate.
## What's Next
- [Props Reference](/docs/api/props) — all available props and their defaults
- [Imperative API](/docs/api/imperative) — scrollToBottom, scrollToMessage, getDebugInfo
- [LLM Streaming Guide](/docs/guides/llm-streaming) — pair with @humanspeak/svelte-markdown
- [Interactive Examples](/examples) — try it live