Artifact

A container component for displaying generated content like code, documents, or other outputs with built-in actions.

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'))

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'))

"use client";

import {
  Artifact,
  ArtifactAction,
  ArtifactActions,
  ArtifactContent,
  ArtifactDescription,
  ArtifactHeader,
  ArtifactTitle,
} from "@/components/ai-elements/elements/artifact";
import { CodeBlock } from "@/components/ai-elements/elements/code-block";
import {
  CopyIcon,
  DownloadIcon,
  PlayIcon,
  RefreshCwIcon,
  ShareIcon,
} from "lucide-react";

const code = `# Dijkstra's Algorithm implementation
import heapq

def dijkstra(graph, start):
    distances = {node: float('inf') for node in graph}
    distances[start] = 0
    heap = [(0, start)]
    visited = set()
    
    while heap:
        current_distance, current_node = heapq.heappop(heap)
        if current_node in visited:
            continue
        visited.add(current_node)
        
        for neighbor, weight in graph[current_node].items():
            distance = current_distance + weight
            if distance < distances[neighbor]:
                distances[neighbor] = distance
                heapq.heappush(heap, (distance, neighbor))
    
    return distances

# Example graph
 graph = {
    'A': {'B': 1, 'C': 4},
    'B': {'A': 1, 'C': 2, 'D': 5},
    'C': {'A': 4, 'B': 2, 'D': 1},
    'D': {'B': 5, 'C': 1}
}

print(dijkstra(graph, 'A'))`;

const Example = () => (
  <Artifact>
    <ArtifactHeader>
      <div>
        <ArtifactTitle>Dijkstra's Algorithm Implementation</ArtifactTitle>
        <ArtifactDescription>Updated 1 minute ago</ArtifactDescription>
      </div>
      <div className="flex items-center gap-2">
        <ArtifactActions>
          <ArtifactAction
            icon={PlayIcon}
            label="Run"
            onClick={() => console.log("Run")}
            tooltip="Run code"
          />
          <ArtifactAction
            icon={CopyIcon}
            label="Copy"
            onClick={() => console.log("Copy")}
            tooltip="Copy to clipboard"
          />
          <ArtifactAction
            icon={RefreshCwIcon}
            label="Regenerate"
            onClick={() => console.log("Regenerate")}
            tooltip="Regenerate content"
          />
          <ArtifactAction
            icon={DownloadIcon}
            label="Download"
            onClick={() => console.log("Download")}
            tooltip="Download file"
          />
          <ArtifactAction
            icon={ShareIcon}
            label="Share"
            onClick={() => console.log("Share")}
            tooltip="Share artifact"
          />
        </ArtifactActions>
      </div>
    </ArtifactHeader>
    <ArtifactContent className="p-0">
      <CodeBlock
        className="border-none"
        code={code}
        language="python"
        showLineNumbers
      />
    </ArtifactContent>
  </Artifact>
);

export default Example;

"use client";import {  Artifact,  ArtifactAction,  ArtifactActions,  ArtifactContent,  ArtifactDescription,  ArtifactHeader,  ArtifactTitle,} from "@/components/ai-elements/elements/artifact";import { CodeBlock } from "@/components/ai-elements/elements/code-block";import {  CopyIcon,  DownloadIcon,  PlayIcon,  RefreshCwIcon,  ShareIcon,} from "lucide-react";const code = `# Dijkstra's Algorithm implementationimport heapqdef dijkstra(graph, start):    distances = {node: float('inf') for node in graph}    distances[start] = 0    heap = [(0, start)]    visited = set()        while heap:        current_distance, current_node = heapq.heappop(heap)        if current_node in visited:            continue        visited.add(current_node)                for neighbor, weight in graph[current_node].items():            distance = current_distance + weight            if distance < distances[neighbor]:                distances[neighbor] = distance                heapq.heappush(heap, (distance, neighbor))        return distances# Example graph graph = {    'A': {'B': 1, 'C': 4},    'B': {'A': 1, 'C': 2, 'D': 5},    'C': {'A': 4, 'B': 2, 'D': 1},    'D': {'B': 5, 'C': 1}}print(dijkstra(graph, 'A'))`;const Example = () => (  <Artifact>    <ArtifactHeader>      <div>        <ArtifactTitle>Dijkstra's Algorithm Implementation</ArtifactTitle>        <ArtifactDescription>Updated 1 minute ago</ArtifactDescription>      </div>      <div className="flex items-center gap-2">        <ArtifactActions>          <ArtifactAction            icon={PlayIcon}            label="Run"            onClick={() => console.log("Run")}            tooltip="Run code"          />          <ArtifactAction            icon={CopyIcon}            label="Copy"            onClick={() => console.log("Copy")}            tooltip="Copy to clipboard"          />          <ArtifactAction            icon={RefreshCwIcon}            label="Regenerate"            onClick={() => console.log("Regenerate")}            tooltip="Regenerate content"          />          <ArtifactAction            icon={DownloadIcon}            label="Download"            onClick={() => console.log("Download")}            tooltip="Download file"          />          <ArtifactAction            icon={ShareIcon}            label="Share"            onClick={() => console.log("Share")}            tooltip="Share artifact"          />        </ArtifactActions>      </div>    </ArtifactHeader>    <ArtifactContent className="p-0">      <CodeBlock        className="border-none"        code={code}        language="python"        showLineNumbers      />    </ArtifactContent>  </Artifact>);export default Example;

Installation

npx ai-elements@latest add artifact

npx ai-elements@latest add artifact

npx shadcn@latest add @ai-elements/artifact

npx shadcn@latest add @ai-elements/artifact

"use client";

import { Button } from "@repo/shadcn-ui/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@repo/shadcn-ui/components/ui/tooltip";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { type LucideIcon, XIcon } from "lucide-react";
import type { ComponentProps, HTMLAttributes } from "react";

export type ArtifactProps = HTMLAttributes<HTMLDivElement>;

export const Artifact = ({ className, ...props }: ArtifactProps) => (
  <div
    className={cn(
      "flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",
      className
    )}
    {...props}
  />
);

export type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;

export const ArtifactHeader = ({
  className,
  ...props
}: ArtifactHeaderProps) => (
  <div
    className={cn(
      "flex items-center justify-between border-b bg-muted/50 px-4 py-3",
      className
    )}
    {...props}
  />
);

export type ArtifactCloseProps = ComponentProps<typeof Button>;

export const ArtifactClose = ({
  className,
  children,
  size = "sm",
  variant = "ghost",
  ...props
}: ArtifactCloseProps) => (
  <Button
    className={cn(
      "size-8 p-0 text-muted-foreground hover:text-foreground",
      className
    )}
    size={size}
    type="button"
    variant={variant}
    {...props}
  >
    {children ?? <XIcon className="size-4" />}
    <span className="sr-only">Close</span>
  </Button>
);

export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;

export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
  <p
    className={cn("font-medium text-foreground text-sm", className)}
    {...props}
  />
);

export type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;

export const ArtifactDescription = ({
  className,
  ...props
}: ArtifactDescriptionProps) => (
  <p className={cn("text-muted-foreground text-sm", className)} {...props} />
);

export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;

export const ArtifactActions = ({
  className,
  ...props
}: ArtifactActionsProps) => (
  <div className={cn("flex items-center gap-1", className)} {...props} />
);

export type ArtifactActionProps = ComponentProps<typeof Button> & {
  tooltip?: string;
  label?: string;
  icon?: LucideIcon;
};

export const ArtifactAction = ({
  tooltip,
  label,
  icon: Icon,
  children,
  className,
  size = "sm",
  variant = "ghost",
  ...props
}: ArtifactActionProps) => {
  const button = (
    <Button
      className={cn(
        "size-8 p-0 text-muted-foreground hover:text-foreground",
        className
      )}
      size={size}
      type="button"
      variant={variant}
      {...props}
    >
      {Icon ? <Icon className="size-4" /> : children}
      <span className="sr-only">{label || tooltip}</span>
    </Button>
  );

  if (tooltip) {
    return (
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>{button}</TooltipTrigger>
          <TooltipContent>
            <p>{tooltip}</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    );
  }

  return button;
};

export type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;

export const ArtifactContent = ({
  className,
  ...props
}: ArtifactContentProps) => (
  <div className={cn("flex-1 overflow-auto p-4", className)} {...props} />
);

"use client";import { Button } from "@repo/shadcn-ui/components/ui/button";import {  Tooltip,  TooltipContent,  TooltipProvider,  TooltipTrigger,} from "@repo/shadcn-ui/components/ui/tooltip";import { cn } from "@repo/shadcn-ui/lib/utils";import { type LucideIcon, XIcon } from "lucide-react";import type { ComponentProps, HTMLAttributes } from "react";export type ArtifactProps = HTMLAttributes<HTMLDivElement>;export const Artifact = ({ className, ...props }: ArtifactProps) => (  <div    className={cn(      "flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",      className    )}    {...props}  />);export type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;export const ArtifactHeader = ({  className,  ...props}: ArtifactHeaderProps) => (  <div    className={cn(      "flex items-center justify-between border-b bg-muted/50 px-4 py-3",      className    )}    {...props}  />);export type ArtifactCloseProps = ComponentProps<typeof Button>;export const ArtifactClose = ({  className,  children,  size = "sm",  variant = "ghost",  ...props}: ArtifactCloseProps) => (  <Button    className={cn(      "size-8 p-0 text-muted-foreground hover:text-foreground",      className    )}    size={size}    type="button"    variant={variant}    {...props}  >    {children ?? <XIcon className="size-4" />}    <span className="sr-only">Close</span>  </Button>);export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (  <p    className={cn("font-medium text-foreground text-sm", className)}    {...props}  />);export type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;export const ArtifactDescription = ({  className,  ...props}: ArtifactDescriptionProps) => (  <p className={cn("text-muted-foreground text-sm", className)} {...props} />);export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;export const ArtifactActions = ({  className,  ...props}: ArtifactActionsProps) => (  <div className={cn("flex items-center gap-1", className)} {...props} />);export type ArtifactActionProps = ComponentProps<typeof Button> & {  tooltip?: string;  label?: string;  icon?: LucideIcon;};export const ArtifactAction = ({  tooltip,  label,  icon: Icon,  children,  className,  size = "sm",  variant = "ghost",  ...props}: ArtifactActionProps) => {  const button = (    <Button      className={cn(        "size-8 p-0 text-muted-foreground hover:text-foreground",        className      )}      size={size}      type="button"      variant={variant}      {...props}    >      {Icon ? <Icon className="size-4" /> : children}      <span className="sr-only">{label || tooltip}</span>    </Button>  );  if (tooltip) {    return (      <TooltipProvider>        <Tooltip>          <TooltipTrigger asChild>{button}</TooltipTrigger>          <TooltipContent>            <p>{tooltip}</p>          </TooltipContent>        </Tooltip>      </TooltipProvider>    );  }  return button;};export type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;export const ArtifactContent = ({  className,  ...props}: ArtifactContentProps) => (  <div className={cn("flex-1 overflow-auto p-4", className)} {...props} />);

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'))

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'))

"use client";

import {
  Artifact,
  ArtifactAction,
  ArtifactActions,
  ArtifactContent,
  ArtifactDescription,
  ArtifactHeader,
  ArtifactTitle,
} from "@/components/ai-elements/elements/artifact";
import { CodeBlock } from "@/components/ai-elements/elements/code-block";
import {
  CopyIcon,
  DownloadIcon,
  PlayIcon,
  RefreshCwIcon,
  ShareIcon,
} from "lucide-react";

const code = `# Dijkstra's Algorithm implementation
import heapq

def dijkstra(graph, start):
    distances = {node: float('inf') for node in graph}
    distances[start] = 0
    heap = [(0, start)]
    visited = set()
    
    while heap:
        current_distance, current_node = heapq.heappop(heap)
        if current_node in visited:
            continue
        visited.add(current_node)
        
        for neighbor, weight in graph[current_node].items():
            distance = current_distance + weight
            if distance < distances[neighbor]:
                distances[neighbor] = distance
                heapq.heappush(heap, (distance, neighbor))
    
    return distances

# Example graph
 graph = {
    'A': {'B': 1, 'C': 4},
    'B': {'A': 1, 'C': 2, 'D': 5},
    'C': {'A': 4, 'B': 2, 'D': 1},
    'D': {'B': 5, 'C': 1}
}

print(dijkstra(graph, 'A'))`;

const Example = () => (
  <Artifact>
    <ArtifactHeader>
      <div>
        <ArtifactTitle>Dijkstra's Algorithm Implementation</ArtifactTitle>
        <ArtifactDescription>Updated 1 minute ago</ArtifactDescription>
      </div>
      <div className="flex items-center gap-2">
        <ArtifactActions>
          <ArtifactAction
            icon={PlayIcon}
            label="Run"
            onClick={() => console.log("Run")}
            tooltip="Run code"
          />
          <ArtifactAction
            icon={CopyIcon}
            label="Copy"
            onClick={() => console.log("Copy")}
            tooltip="Copy to clipboard"
          />
          <ArtifactAction
            icon={RefreshCwIcon}
            label="Regenerate"
            onClick={() => console.log("Regenerate")}
            tooltip="Regenerate content"
          />
          <ArtifactAction
            icon={DownloadIcon}
            label="Download"
            onClick={() => console.log("Download")}
            tooltip="Download file"
          />
          <ArtifactAction
            icon={ShareIcon}
            label="Share"
            onClick={() => console.log("Share")}
            tooltip="Share artifact"
          />
        </ArtifactActions>
      </div>
    </ArtifactHeader>
    <ArtifactContent className="p-0">
      <CodeBlock
        className="border-none"
        code={code}
        language="python"
        showLineNumbers
      />
    </ArtifactContent>
  </Artifact>
);

export default Example;

"use client";import {  Artifact,  ArtifactAction,  ArtifactActions,  ArtifactContent,  ArtifactDescription,  ArtifactHeader,  ArtifactTitle,} from "@/components/ai-elements/elements/artifact";import { CodeBlock } from "@/components/ai-elements/elements/code-block";import {  CopyIcon,  DownloadIcon,  PlayIcon,  RefreshCwIcon,  ShareIcon,} from "lucide-react";const code = `# Dijkstra's Algorithm implementationimport heapqdef dijkstra(graph, start):    distances = {node: float('inf') for node in graph}    distances[start] = 0    heap = [(0, start)]    visited = set()        while heap:        current_distance, current_node = heapq.heappop(heap)        if current_node in visited:            continue        visited.add(current_node)                for neighbor, weight in graph[current_node].items():            distance = current_distance + weight            if distance < distances[neighbor]:                distances[neighbor] = distance                heapq.heappush(heap, (distance, neighbor))        return distances# Example graph graph = {    'A': {'B': 1, 'C': 4},    'B': {'A': 1, 'C': 2, 'D': 5},    'C': {'A': 4, 'B': 2, 'D': 1},    'D': {'B': 5, 'C': 1}}print(dijkstra(graph, 'A'))`;const Example = () => (  <Artifact>    <ArtifactHeader>      <div>        <ArtifactTitle>Dijkstra's Algorithm Implementation</ArtifactTitle>        <ArtifactDescription>Updated 1 minute ago</ArtifactDescription>      </div>      <div className="flex items-center gap-2">        <ArtifactActions>          <ArtifactAction            icon={PlayIcon}            label="Run"            onClick={() => console.log("Run")}            tooltip="Run code"          />          <ArtifactAction            icon={CopyIcon}            label="Copy"            onClick={() => console.log("Copy")}            tooltip="Copy to clipboard"          />          <ArtifactAction            icon={RefreshCwIcon}            label="Regenerate"            onClick={() => console.log("Regenerate")}            tooltip="Regenerate content"          />          <ArtifactAction            icon={DownloadIcon}            label="Download"            onClick={() => console.log("Download")}            tooltip="Download file"          />          <ArtifactAction            icon={ShareIcon}            label="Share"            onClick={() => console.log("Share")}            tooltip="Share artifact"          />        </ArtifactActions>      </div>    </ArtifactHeader>    <ArtifactContent className="p-0">      <CodeBlock        className="border-none"        code={code}        language="python"        showLineNumbers      />    </ArtifactContent>  </Artifact>);export default Example;