Components › Foundation › AI Artifacts
AI08 · System

AI Artifacts

Purpose Generated outputs that persist beyond the chat interface as first-class UI objects — charts, documents, code files, dashboards, generated images. Can be edited, reused, or shared.
Use when The AI produces a discrete output that has value independent of the conversation that generated it — a report, a code file, a visualization, a structured data export. Artifacts are not just chat responses; they are things.
Do not use For inline conversational responses that have no value as a standalone object. Not every AI output is an artifact. Reserve this treatment for outputs that persist, can be shared, or require explicit follow-on action (edit, export, deploy).
Failure mode prevented AI-generated content that took significant compute and user effort to produce is treated as ephemeral chat text — it scrolls away, cannot be found again, and cannot be acted upon outside the conversation.
Example Dark Academia
Dark Academia
The Atelier
Neon Tide
The Archive
Candlelight
The Conservatory
AI Generated Code · Python pipeline_audit.py 
# Q1 Pipeline Audit — generated by AI Agent
import pandas as pd

def compute_error_rate(df, connector):
    subset = df[df['connector'] == connector]
    errors = subset['status'] == 'error'
    return errors.sum() / len(subset) * 100

df = pd.read_csv('Q1-pipeline-errors.csv')
for conn in ['salesforce', 'workday']:
    rate = compute_error_rate(df, conn)
    print(f"{conn}: {rate:.1f}% error rate")
Generated just now · 23 lines · Model: AI Agent v2
Overview
artifact-document — text document or report, with edit and export controlsartifact-code — code file with syntax display, copy, and download controlsartifact-chart — data visualization with underlying data accessibleartifact-data — structured table or export (CSV, JSON) with download control
Design rule

AI Artifacts are first-class objects. They must be visually distinct from conversational AI responses — a different container, different controls, and a clear identity (name, type, generation timestamp). An artifact that looks like a paragraph of chat text is not an artifact.

Theming API

Override these CSS custom properties to apply your own visual treatment without touching the component's behavioral contracts.

Shared semantic tokens

Token Controls
--rad-surface-card Artifact body background
--rad-border-subtle Fallback border
--rad-color-text-primary Artifact name and preview title
--rad-color-text-secondary Preview body text
--rad-color-text-meta Footer metadata
--rad-color-approve Primary export button and focus ring
--rad-color-approve-hover Export button hover
--rad-radius-card Card border radius

Component-scoped tokens

Token Controls
--rad-artifact-header-bg Header area background
--rad-artifact-header-border Header and card border
--rad-artifact-type-color Type label text
--rad-artifact-name-color File name text
--rad-artifact-ctrl-color Secondary control text
--rad-artifact-ctrl-border Secondary control border
--rad-artifact-ctrl-hover Secondary control hover text
--rad-artifact-footer-bg Footer background
--rad-artifact-footer-border Footer top border
--rad-artifact-expand-color "View full document" link
--rad-artifact-fade-start Preview gradient transparent stop
--rad-artifact-fade-end Preview gradient opaque stop

"*An AI that produces something worth keeping deserves a UI that treats it as something worth keeping.*"

← Previous Empty States Next → Suggested Prompts

Intellectual Property

RAD is the original work of Jackie Curry. All rights reserved. No portion may be reproduced, adapted, or incorporated into any product or system without express written permission.

Permitted: citation in academic or editorial contexts with full attribution.

Licensing

© 2025 Jackie Curry. All rights reserved. Publication date: 2025.

For licensing inquiries, connect on LinkedIn →