Svelte AI Elements

Overview

Svelte AI Elements is a developer-focused component registry for building AI-native interfaces with SvelteKit. It is built on top of shadcn-svelte

Looking for the lighter prompt-focused project? Visit Svelte Prompt Kit: https://sv-prompt-kit.vercel.app

Project is divided into two parts:

1. AI Elements: Full-featured, production-ready components for complex AI interfaces, including chat apps, reasoning UIs, tool integrations, and workflow builders.
2. Svelte Prompt Kit: Lightweight prompt engineering and conversational UI components for simpler AI interfaces. Visit https://sv-prompt-kit.vercel.app

Installation

If you want the quickest way to try a basic prompt input, start with the lightweight Prompt Kit version.

1. Create a Svelte app

pnpm dlx sv create my-app

When prompted, select:

• TypeScript
• Tailwind CSS

2. Initialize shadcn-svelte

cd my-app
pnpm dlx shadcn-svelte@latest init

3. Add Prompt Input

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

Usage

Here is a very basic Prompt Input example:

<script lang="ts">
  import * as PromptInput from "$lib/components/ai-elements/prompt-input";
  import type { Message } from "$lib/components/ai-elements/prompt-input";
  import { Chat } from "@ai-sdk/svelte";

  let chat = new Chat({});

  function handleSubmit(message: Message) {
    chat.sendMessage({
      text: message.text,
    });
  }
</script>

<div class="space-y-4">
  <PromptInput.Root class="w-xl" onSubmit={handleSubmit}>
    <PromptInput.Body>
      <PromptInput.Textarea />
    </PromptInput.Body>

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

  <!-- Showcase messages -->
  <ul>
    {#each chat.messages as message, messageIndex (messageIndex)}
      <li>
        <div class="text-base font-semibold">{message.role}</div>
        <div>
          {#each message.parts as part, partIndex (partIndex)}
            {#if part.type === "text"}
              <div class="text-muted-foreground text-sm">{part.text}</div>
            {/if}
          {/each}
        </div>
      </li>
    {/each}
  </ul>
</div>

Libraries

AI Elements

Full-featured components for chat apps, streaming responses, reasoning UIs, tools, and workflow-style AI interfaces.

• Docs: https://svelte-ai-elements.vercel.app/components
• Registry: https://svelte-ai-elements.vercel.app/r/index.json

Prompt Kit

Lightweight prompt engineering and conversational UI components that are easy to compose into simple AI interfaces.

• Site: https://sv-prompt-kit.vercel.app
• Registry: https://svelte-ai-elements.vercel.app/p/index.json

Most Used Components

AI Elements

Streaming Responses

For markdown and streaming response rendering, this project uses streamdown-svelte, the Svelte port used throughout the repo for streamed markdown output.

Inspired By

• Vercel AI Elements

License

This project is licensed under the MIT License. See LICENSE for details.