Artifact

The Artifact component provides a structured container for displaying generated content like code, documents, or other outputs with built-in header actions.

Dijkstra's Algorithm Implementation

Updated 1 minute ago

Installation

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

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

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

Examples

Stream Artifact using AI SDK

we are using `streamText` from the AI SDK to stream generated code output from the server and render it inside the Artifact component in real-time.

Stream Artifact Example

No code generated yet. Enter a prompt and click "Generate" to see the streaming artifact in action.

Props

Artifact

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

ArtifactHeader

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

ArtifactTitle

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

ArtifactDescription

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

ArtifactActions

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

ArtifactAction

NameTypeDefault
tooltip
string
label
string
icon
typeof Icon
children
Snippet
class
string
variant
'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' 'ghost'
size
'default' | 'sm' | 'lg' | 'icon' 'sm'
onclick
(event: MouseEvent) => void
...restProps
HTMLButtonAttributes | HTMLAnchorAttributes

ArtifactClose

NameTypeDefault
children
Snippet
class
string
variant
'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' 'ghost'
size
'default' | 'sm' | 'lg' | 'icon' 'sm'
...restProps
HTMLButtonAttributes | HTMLAnchorAttributes

ArtifactContent

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