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

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. Prompt Kit: Lightweight, composable UI primitives for prompt engineering and simple conversational interfaces.

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.

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

Most Used Components

AI Elements

Component	What it helps with
Message	Role-based chat messages and response layout
Prompt Input	Prompt submission with AI-focused input controls
Conversation	Scrollable conversation containers and chat structure
Response	Streaming markdown response rendering
Reasoning	Expandable AI thinking and reasoning views

Prompt Kit

Component	What it helps with
Message	Lightweight assistant and user message UI
Prompt Input	Chat-style prompt input with actions
Chat Container	Sticky-to-bottom chat layout and scrolling
Markdown	Render streamed markdown responses
Prompt Suggestion	Clickable starter prompts and suggestions
System Message	Inline status, warning, and helper messages

8 Prompt Kit UI Blocks

Prompt Kit also includes eight ready-to-use UI blocks for faster composition. Browse them here: https://svelte-ai-elements.vercel.app/prompt-kit/blocks

• Prompt Input with Actions
• Prompt Input with Suggestions
• Prompt Input with Autocomplete
• Basic Full Conversation
• Conversation with Avatars
• Conversation with Actions
• Conversation with Scroll
• Conversation with Prompt Input

Streaming Responses

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

Inspired By

• Vercel AI Elements
• Ibelick: Prompt-Kit

License

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

Made with ❤️ by Bhide Svelte