AI Artifact

An artifact is a small window into something the model made: a component, a config, a chart, a file. It has two faces - the rendered result and the raw source - and the reader moves between them constantly while deciding whether to trust it.

The panes slide along a horizontal axis. A cross-fade would read as a different artifact appearing in the same frame; a slide keeps the identity intact, because the thing moving is clearly the same thing. The direction follows the order of the tabs, so going back and forth does not flip the motion and confuse the eye.

When there is only one pane there is no tablist at all: a single tab announces a choice that does not exist. The header keeps the title and the copy action, and the copy action takes the space the tabs would have used.

Usage

Pass title, and fill either slot or both. copyText is what lands on the clipboard - it is deliberately separate from the code slot, because the rendered code has syntax spans and the clipboard should not.

<template>
  <div class="w-full max-w-md">
    <MAiArtifact
      title="PricingCard.tsx"
      :copy-text="snippet"
    >
      <template #preview>
        <div class="rounded-lg border border-default bg-muted/40 p-4">
          <p class="text-sm font-medium text-highlighted">
            Pro
          </p>
          <p class="mt-1 text-2xl font-semibold text-highlighted">
            $24<span class="text-sm font-normal text-muted">/mo</span>
          </p>
          <p class="mt-2 text-xs leading-relaxed text-muted">
            Unlimited blocks, every theme, and priority support.
          </p>
        </div>
      </template>

      <template #code>
        {{ snippet }}
      </template>
    </MAiArtifact>
  </div>
</template>

<script setup lang="ts">
const snippet = `<PricingCard
  name="Pro"
  price={24}
  features={['Unlimited blocks']}
/>`
</script>

Customize

Start on the source pane and the component still knows which way the preview sits, so the first swap slides backwards. Both panes are ordinary slots, so the rendered side can be anything from a chart to a diff.

{
  "primary": "oklch(0.62 0.19 259)",
  "success": "oklch(0.72 0.17 152)",
  "warning": "oklch(0.8 0.16 84)",
  "error": "oklch(0.64 0.21 25)"
}

<template>
  <div class="w-full max-w-md">
    <MAiArtifact
      default-pane="code"
      title="theme.json"
      :copy-text="json"
    >
      <template #preview>
        <ul class="space-y-2 p-1">
          <li
            v-for="token in tokens"
            :key="token.name"
            class="flex items-center gap-2 text-xs"
          >
            <span
              class="size-4 rounded-full border border-default"
              :style="{ background: token.value }"
            />
            <span class="text-highlighted">{{ token.name }}</span>
            <span class="ml-auto font-mono text-muted">{{ token.value }}</span>
          </li>
        </ul>
      </template>

      <template #code>
        {{ json }}
      </template>
    </MAiArtifact>
  </div>
</template>

<script setup lang="ts">
const tokens = [
  { name: 'primary', value: 'oklch(0.62 0.19 259)' },
  { name: 'success', value: 'oklch(0.72 0.17 152)' },
  { name: 'warning', value: 'oklch(0.8 0.16 84)' },
  { name: 'error', value: 'oklch(0.64 0.21 25)' },
]

const json = JSON.stringify(
  Object.fromEntries(tokens.map(token => [token.name, token.value])),
  null,
  2,
)
</script>

Props

Events

Slots

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.aiArtifact in app.config.ts.

Accessibility

• The tabs are a proper tablist / tab / tabpanel triple, wired together with aria-controls and aria-labelledby in both directions.
• Arrow keys move between tabs, Home and End jump to the ends, and the selected tab is the only one in the tab order. That is the WAI-ARIA tabs pattern, not a pair of buttons that look like tabs.
• The copy action is a real button with an aria-label that flips to "Copied to clipboard", and a role="status" region announces the same words. The icon swap alone would be invisible to a screen reader.
• Panes are labelled by their tab, so entering the panel announces which view it is.
• Under prefers-reduced-motion: reduce the panes and the indicator change instantly. The horizontal travel is the one motion in the component, and it is exactly the kind that causes discomfort.

Performance

• Only one pane is mounted; AnimatePresence in wait mode finishes the exit before the next entry starts, so the two are never composited together.
• The direction is latched in a watcher rather than derived during render, so the entering and exiting panes cannot disagree about which way they are moving.
• The indicator is a single shared element with a layoutId, so moving it is one transform rather than a background transition on every tab.
• The copied flag resets on a single timer that is cleared on unmount; nothing polls, and a second copy restarts the same timer instead of stacking another.