Svelte AI Elements

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

Admin

Svelte AI Elements is a component library for building AI-powered user interfaces with pre-built...

Tokens:430

Snippets:9

Trust Score:7.8

Update:2 months ago

Show doc for...

Tokens:

Raw

### Add prompt-input component

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

Install the prompt-input component from the Svelte AI Elements registry.

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

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

### Create a SvelteKit app

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

Initialize a new SvelteKit project using pnpm.

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

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

### Initialize shadcn-svelte

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

Set up shadcn-svelte in the project directory.

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

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

### Implement prompt-input component

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

Basic usage of the PromptInput component in a Svelte page, wiring the onSubmit handler to process user input.

```svelte
<script lang="ts">
  import * as PromptInput from "$lib/components/ai-elements/prompt-input";

  function handleSubmit(message: { text: string }) {
    console.log(message.text);
  }
</script>

<PromptInput.Root onSubmit={handleSubmit}>
  <PromptInput.Body>
    <PromptInput.Textarea />
  </PromptInput.Body>

  <PromptInput.Toolbar class="justify-end">
    <PromptInput.Submit />
  </PromptInput.Toolbar>
</PromptInput.Root>
```

Tokens:

Raw