Artifact

export function useDebounce<T>(value: Ref<T>, delay = 300) {  const debounced = shallowRef(value.value);
  watch(value, (next, _, onCleanup) => {    const timeout = setTimeout(() => (debounced.value = next), delay);    onCleanup(() => clearTimeout(timeout));  });
  return debounced;}

An artifact is something the agent made that the person wants to keep: a file, a snippet or a document. It sits in its own card with a title, a version and a few actions, and shows its content in a Code Block.

Installation

Artifact is built with the Card, Badge, Button and Code Block components.

Usage

The header holds the title, the version badge and the actions. The content is a UiCodeBlock with the corners and border removed, so it sits flush in the card.

• UiCodeBlockCopyButton and UiCodeBlockDownloadButton work outside a code block when you pass value (and filename).
• Cap the height with a max-h-* class on UiCodeBlockContent. The content scrolls and fades at its edges.
• To show something other than code, put it in UiCardContent instead.

Variations

• Preview and code. Add Tabs to the header, with the rendered result in one tab and the code in the other.
• Versions. Pair it with Branch so the person can step between versions of the file.
• Side panel. Put the card in a Sheet or a split pane next to the chat, and open it from a Tool result.

Accessibility

• Every action is a button with a label.
• The title is the accessible name of the card. If the card can be closed, return focus to the control that opened it.