component
TuxArtifact
Structured container for AI-generated output (code file, dataset, document, image). Header bundles title + meta + icon + a configurable action row (Copy / Download / Regenerate / Share); body slot holds whatever the model produced. Standalone — consumer decides whether to inline it after a chat message, dock it into a sidebar aside, or display it full-page.
canonical
Code artifact
Wraps a TuxCodeBlock for the most common case — the model produced a Python / TS / SQL snippet that the user should be able to copy or download verbatim.
compare.py
# Reproducibility script for the comparison above.
from tti_ai_studio import corpora, models
scope = corpora.load("grants-2024-2026")
for cls in ("CLS-204", "CLS-211"):
m = models.classifier(cls)
print(cls, m.evaluate(scope))
<tux-artifact
title="compare.py"
meta="Reproducibility script · python"
icon="lucide:file-code"
>
<tux-code-block :code="samplePy" lang="python" filename="compare.py" />
</tux-artifact>custom actions
Subset + extra buttons
Pass :actions="['copy', 'download']" to show only the standard actions you want; the #actions slot appends custom buttons to the same row.
findings.md
Markdown draft body lives here.
<tux-artifact
title="findings.md"
meta="Drafted just now"
icon="lucide:file-text"
:actions="['copy', 'download']"
>
<template #actions>
<button class="px-2 text-xs text-text-muted hover:text-brand-primary">
Send to inbox →
</button>
</template>
<div class="p-4 prose-tti">
<p>Markdown draft body lives here.</p>
</div>
</tux-artifact>busy
Regenerating state
Pass busy while the artifact is being regenerated — the regenerate icon spins, all actions disable, and aria-busy is set on the container.
comparison.csv
Output replaced while busy.
<tux-artifact
title="comparison.csv"
meta="Regenerating…"
icon="lucide:table"
busy
>
<div class="p-4 text-sm text-text-muted">Output replaced while busy.</div>
</tux-artifact>