### Install SvelteKit Project

Source: https://svelte-ai-elements.vercel.app/docs/installation

Command to create a new SvelteKit project. Ensure Tailwind CSS is selected during setup.

```bash
pnpm dlx sv create my-app
cd my-app
```

--------------------------------

### Install and Initialize shadcn-svelte

Source: https://svelte-ai-elements.vercel.app/docs/installation

Command to install and initialize shadcn-svelte in a SvelteKit project. Follow the prompts for configuration.

```bash
pnpm dlx shadcn-svelte@latest init
```

--------------------------------

### Install Message Component using jsrepo

Source: https://svelte-ai-elements.vercel.app/docs/installation

Alternative command to install the 'message' component from Svelte AI Elements using jsrepo.

```bash
pnpm dlx jsrepo add @ai/elements/ai-elements/https://svelte-ai-elements.vercel.app/r/message.json
```

--------------------------------

### Svelte Message Component Usage Example

Source: https://svelte-ai-elements.vercel.app/docs/installation

Example of how to import and use the Message, MessageAvatar, and MessageContent components in a Svelte component. It demonstrates displaying a conversation with user and assistant messages.

```svelte
<script lang="ts">
 import {
 Message,
 MessageAvatar,
 MessageContent,
 } from "$lib/components/ai-elements/message/index.js";

 type MessageData = {
 key: string;
 from: "user" | "assistant";
 content: string;
 avatar: string;
 name: string;
 };

 let messages: MessageData[] = $state([
 {
 key: crypto.randomUUID(),
 from: "user",
 content: "Hello, how are you?",
 avatar: "https://github.com/haydenbleasel.png",
 name: "Hayden Bleasel",
 },
 {
 key: crypto.randomUUID(),
 from: "assistant",
 content:
 "Hello! I'm doing well, thank you for asking. How can I help you today?",
 avatar: "https://github.com/copilot.png",
 name: "Assistant",
 },
 {
 key: crypto.randomUUID(),
 from: "user",
 content: "Can you help me understand Svelte 5 runes?",
 avatar: "https://github.com/haydenbleasel.png",
 name: "Hayden Bleasel",
 },
 {
 key: crypto.randomUUID(),
 from: "assistant",
 content:
 "Absolutely! Svelte 5 introduces runes like $state, $derived, and $props which provide a more powerful and flexible reactivity system. Would you like me to explain any specific rune?",
 avatar: "https://github.com/copilot.png",
 name: "Assistant",
 },
 ]);
</script>

<div class="space-y-4">
 {#each messages as { content, from, avatar, name }}
 <Message {from}>
 <MessageContent>{content}</MessageContent>
 <MessageAvatar {name} src={avatar} />
 </Message>
 {/each}
</div>
```

--------------------------------

### Install Message Component using shadcn-svelte CLI

Source: https://svelte-ai-elements.vercel.app/docs/installation

Specific command to install the 'message' component from Svelte AI Elements using the shadcn-svelte CLI.

```bash
pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/message.json
```

--------------------------------

### Add Svelte AI Element Component using jsrepo

Source: https://svelte-ai-elements.vercel.app/docs/installation

Alternative command to add a Svelte AI Element component using jsrepo. Replace [COMPONENT] with the desired component name.

```bash
pnpm dlx jsrepo add @ai/elements/ai-elements/https://svelte-ai-elements.vercel.app/r/[COMPONENT].json
```

--------------------------------

### Add Svelte AI Element Component using shadcn-svelte CLI

Source: https://svelte-ai-elements.vercel.app/docs/installation

Command to add a specific Svelte AI Element component using the shadcn-svelte CLI. Replace [COMPONENT] with the desired component name.

```bash
pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/[COMPONENT].json
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.