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

Name	Type	Default
`children`	`Snippet`
`class`	`string`
`...restProps`	`HTMLAttributes<HTMLDivElement>`

ArtifactHeader

Name	Type	Default
`children`	`Snippet`
`class`	`string`
`...restProps`	`HTMLAttributes<HTMLDivElement>`

ArtifactTitle

Name	Type	Default
`children`	`Snippet`
`class`	`string`
`...restProps`	`HTMLAttributes<HTMLParagraphElement>`

ArtifactDescription

Name	Type	Default
`children`	`Snippet`
`class`	`string`
`...restProps`	`HTMLAttributes<HTMLParagraphElement>`

ArtifactActions

Name	Type	Default
`children`	`Snippet`
`class`	`string`
`...restProps`	`HTMLAttributes<HTMLDivElement>`

ArtifactAction

Name	Type	Default
`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

Name	Type	Default
`children`	`Snippet`
`class`	`string`
`variant`	`'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'`	`'ghost'`
`size`	`'default' \| 'sm' \| 'lg' \| 'icon'`	`'sm'`
`...restProps`	`HTMLButtonAttributes \| HTMLAnchorAttributes`

ArtifactContent

Name	Type	Default
`children`	`Snippet`
`class`	`string`
`...restProps`	`HTMLAttributes<HTMLDivElement>`