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

1# Dijkstra's Algorithm implementation
2import heapq
3
4def dijkstra(graph, start):
5    distances = {node: float('inf') for node in graph}
6    distances[start] = 0
7    heap = [(0, start)]
8    visited = set()
9    
10    while heap:
11        current_distance, current_node = heapq.heappop(heap)
12        if current_node in visited:
13            continue
14        visited.add(current_node)
15        
16        for neighbor, weight in graph[current_node].items():
17            distance = current_distance + weight
18            if distance < distances[neighbor]:
19                distances[neighbor] = distance
20                heapq.heappush(heap, (distance, neighbor))
21    
22    return distances
23
24# Example graph
25 graph = {
26    'A': {'B': 1, 'C': 4},
27    'B': {'A': 1, 'C': 2, 'D': 5},
28    'C': {'A': 4, 'B': 2, 'D': 1},
29    'D': {'B': 5, 'C': 1}
30}
31
32print(dijkstra(graph, 'A'))

Installation

npx ai-elements@latest add artifact

Usage

import {
Artifact,
ArtifactAction,
ArtifactActions,
ArtifactContent,
ArtifactDescription,
ArtifactHeader,
ArtifactTitle,
} from '@/components/ai-elements/artifact';
<Artifact>
<ArtifactHeader>
<div>
<ArtifactTitle>Dijkstra's Algorithm Implementation</ArtifactTitle>
<ArtifactDescription>Updated 1 minute ago</ArtifactDescription>
</div>
<ArtifactActions>
<ArtifactAction icon={CopyIcon} label="Copy" tooltip="Copy to clipboard" />
</ArtifactActions>
</ArtifactHeader>
<ArtifactContent>
{/* Your content here */}
</ArtifactContent>
</Artifact>

Features

  • Structured container with header and content areas
  • Built-in header with title and description support
  • Flexible action buttons with tooltips
  • Customizable styling for all subcomponents
  • Support for close buttons and action groups
  • Clean, modern design with border and shadow
  • Responsive layout that adapts to content
  • TypeScript support with proper type definitions
  • Composable architecture for maximum flexibility

Examples

With Code Display

Dijkstra's Algorithm Implementation

Updated 1 minute ago

1# Dijkstra's Algorithm implementation
2import heapq
3
4def dijkstra(graph, start):
5    distances = {node: float('inf') for node in graph}
6    distances[start] = 0
7    heap = [(0, start)]
8    visited = set()
9    
10    while heap:
11        current_distance, current_node = heapq.heappop(heap)
12        if current_node in visited:
13            continue
14        visited.add(current_node)
15        
16        for neighbor, weight in graph[current_node].items():
17            distance = current_distance + weight
18            if distance < distances[neighbor]:
19                distances[neighbor] = distance
20                heapq.heappush(heap, (distance, neighbor))
21    
22    return distances
23
24# Example graph
25 graph = {
26    'A': {'B': 1, 'C': 4},
27    'B': {'A': 1, 'C': 2, 'D': 5},
28    'C': {'A': 4, 'B': 2, 'D': 1},
29    'D': {'B': 5, 'C': 1}
30}
31
32print(dijkstra(graph, 'A'))

Props

<Artifact />

[...props]?:

React.HTMLAttributes<HTMLDivElement>
Any other props are spread to the underlying div element.

<ArtifactHeader />

[...props]?:

React.HTMLAttributes<HTMLDivElement>
Any other props are spread to the underlying div element.

<ArtifactTitle />

[...props]?:

React.HTMLAttributes<HTMLParagraphElement>
Any other props are spread to the underlying paragraph element.

<ArtifactDescription />

[...props]?:

React.HTMLAttributes<HTMLParagraphElement>
Any other props are spread to the underlying paragraph element.

<ArtifactActions />

[...props]?:

React.HTMLAttributes<HTMLDivElement>
Any other props are spread to the underlying div element.

<ArtifactAction />

tooltip?:

string
Tooltip text to display on hover.

label?:

string
Screen reader label for the action button.

icon?:

LucideIcon
Lucide icon component to display in the button.

[...props]?:

React.ComponentProps<typeof Button>
Any other props are spread to the underlying shadcn/ui Button component.

<ArtifactClose />

[...props]?:

React.ComponentProps<typeof Button>
Any other props are spread to the underlying shadcn/ui Button component.

<ArtifactContent />

[...props]?:

React.HTMLAttributes<HTMLDivElement>
Any other props are spread to the underlying div element.