Svelte AI Elements

Message

Composable chat message primitives for Svelte with markdown responses, attachments, branching, and action slots.

What does the new message API cover?

message gives you role-aware layout, markdown rendering, attachments, branching, and action slots in one composable API.

Installation

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

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/message

Examples

Basic Example

Render user and assistant messages with markdown output.

How should I compose the new message primitives?

Use the primitives in layers:

  • Message wraps the role-aware shell
  • MessageContent renders a single response body
  • MessageResponse adds markdown, code highlighting, mermaid, and math support

Add attachments, branching, or a toolbar only when you need them.

File Attachment Example

Show image and file attachments with the built-in preview dialog.

Please review these files before we ship the new docs page.

I can review both:

  • Click the image tile to open the centered preview dialog
  • Non-image files stay compact and tooltip-based
  • You can add onRemove when attachments should be dismissible

Branch Example

Switch between multiple assistant versions with the simplified branching API.

Give me three short ways to introduce the component in docs.

Option 1

Keep it compact and composable. Use Message for layout, MessageContent for a single body, and MessageToolbar only when the message needs controls.

Usage AI SDK

Compose prompt-input with message using a local text-only workflow.

Props

Message

NameTypeDefault
from
'user' | 'assistant' | 'system' | 'function' | 'data' | 'tool'
children
Snippet
class
string
...restProps
HTMLAttributes<HTMLDivElement>

MessageContent

NameTypeDefault
children
Snippet
class
string
...restProps
HTMLAttributes<HTMLDivElement>

MessageResponse

NameTypeDefault
content
string
components
StreamdownProps["components"]
class
string
...restProps
Omit<StreamdownProps, "class" | "content" | "components">

MessageToolbar

NameTypeDefault
children
Snippet
class
string
...restProps
HTMLAttributes<HTMLDivElement>

MessageActions

NameTypeDefault
children
Snippet
class
string
...restProps
HTMLAttributes<HTMLDivElement>

MessageAction

NameTypeDefault
tooltip
string
label
string
variant
ButtonVariant 'ghost'
size
ButtonSize 'icon'
class
string
disabled
boolean
onclick
(event: MouseEvent) => void
...restProps
Omit<ButtonProps, "children" | "type" | "href">

MessageBranch

NameTypeDefault
defaultBranch
number 0
onBranchChange
(branchIndex: number) => void
children
Snippet
class
string
...restProps
HTMLAttributes<HTMLDivElement>

MessageBranchContent

NameTypeDefault
versions
{ id: string; content: string }[]
class
string
...restProps
HTMLAttributes<HTMLDivElement>

MessageBranchSelector

NameTypeDefault
children
Snippet
class
string
...restProps
HTMLAttributes<HTMLDivElement>

MessageBranchPrevious

NameTypeDefault
children
Snippet
class
string
...restProps
Omit<ButtonProps, "children" | "type" | "href">

MessageBranchNext

NameTypeDefault
children
Snippet
class
string
...restProps
Omit<ButtonProps, "children" | "type" | "href">

MessageBranchPage

NameTypeDefault
children
Snippet
class
string
...restProps
HTMLAttributes<HTMLDivElement>

MessageAttachments

NameTypeDefault
children
Snippet
class
string
...restProps
HTMLAttributes<HTMLDivElement>

MessageAttachment

NameTypeDefault
data
{ type: "file"; filename?: string; mediaType?: string; url?: string }
onRemove
() => void
class
string
...restProps
HTMLAttributes<HTMLDivElement>

MessageAttachmentPreview

NameTypeDefault
data
{ type: "file"; filename?: string; mediaType?: string; url?: string }
class
string