Artifact sidebar demo

Artifact controls

Display mode

Choose where artifact bodies render (features.artifacts.display). Applies to the next streamed artifact.

While it streams

What the user sees during generation: the inline body view (inlineBody.streamingView), the status text (features.artifacts.statusLabel), and its animation (features.artifacts.loadingAnimation). The status options apply to the reference card, the inline chrome, and the status body.

Streaming view

Stream the source code, or show a quiet generating placeholder (inlineBody.streamingView).

Status label

Replace the default "Generating …" label (features.artifacts.statusLabel). Custom text swaps a fixed string, for localization or brand voice. Live progress adds a live detail with line and second counters (the cramped inline chrome gets a shorter, line-only detail). Phase aware reads the streamed markdown headings and narrates the current section, re-animating only when the heading changes; stream the markdown sample to watch it step through sections.

Animation mode

Animation for the status text (features.artifacts.loadingAnimation). Changes apply live.

Animation duration

2000ms

Shimmer color options

Primary Secondary

Streaming window

Geometry and scroll etiquette of the fixed streaming window (features.artifacts.inlineBody). Inline display mode; takes effect on the next streamed artifact.

Body height

Reserve a fixed-height scroll window so the streaming to complete swap causes no layout shift, or grow with content (inlineBody.height).

Follow output

Keep the streaming window pinned to the newest output (inlineBody.followOutput).

Overflow

Scroll follows the streaming tail; clip shows the top of the document in a fixed window with no internal scroll, and the body opens the pane when expand is on (inlineBody.overflow).

Fade mask

Fade the scroll edges of the streaming window (inlineBody.fadeMask).

Settling

How the block settles when the stream completes (features.artifacts.inlineBody).

Transition

Cross-fade the streaming to complete swap where supported (inlineBody.transition).

On complete

Keep the streamed body inline, or collapse the block to the compact reference card once the artifact completes, the Copilot chiclet / Claude handoff pattern (inlineBody.completeDisplay). The collapse plays as a short height transition; click the collapsed card to open the pane.

Completed body

What the completed inline body offers (inlineBody.viewMode, inlineChrome.showViewToggle, filePreview.loading).

View mode

Preview completed files in a sandboxed iframe, or always show raw highlighted source, useful when the artifact feeds a code editor (inlineBody.viewMode).

View toggle

Add a segmented rendered/source toggle to the inline chrome that flips a completed file between its rendered preview and raw source (inlineChrome.showViewToggle), matching the artifact pane's toggle. The control only appears when a rendered preview exists, so it stays hidden for source-only or plain markdown artifacts.

Preview loading

Show a loading state over a slow file preview (filePreview.loading). On keeps the default spinner, Custom swaps in your own indicator via loading.renderIndicator, and Off disables the overlay. It appears only when the preview takes a moment to become ready, so fast artifacts never flash it. Try it with the React file artifact, which pulls React and Babel from a CDN inside the sandbox.

Expand toggle

Show an expand/collapse button in the artifact pane toolbar (features.artifacts.layout.showExpandToggle).

Pane appearance

Visual treatment for the artifact column in a desktop split (features.artifacts.layout.paneAppearance). panel is one card with a hairline divider between chat and the artifact pane; seamless is one card with no divider; detached floats chat and the pane as separate elevated cards, with the split gap widening to the panel inset token, corners rounding on all sides, and the page canvas showing through the gap. Detached is also the automatic default when the chat panel itself is detached (launcher.detachedPanel). In a detached split, the Chat surface control below can render the chat flat and flush so only the artifact pane floats.

Chat surface

Chat treatment for the Detached pane appearance (features.artifacts.layout.chatSurface). Card (the default) renders the chat as its own inset card matching the artifact pane; Flush renders the chat flat on the page so only the artifact pane floats as a card, the reference look. Flush is a steady state: the chat stays flat whether or not an artifact is open. Switch the view to Inline to see it.

Detached framing

Where the screen-edge margin comes from. On artifact open pairs with the Detached pane appearance, so the margin appears only once a detached split opens (features.artifacts.layout.paneAppearance: "detached"); Always keeps the whole widget inset even when idle, under any pane appearance (launcher.detachedPanel). Switch the view to Inline to see it.

Resizable pane

Drag the split handle between chat and the artifact pane in desktop split mode (features.artifacts.layout.resizable). Hidden when the panel is narrow (drawer mode), on viewports ≤640px, or while the pane is expanded.

Tab bar

Which tab bar the panel renders when there are more artifacts than fit. Scroll is the built-in default (a single accessible scroll strip with an edge fade). Buttons and Menu are host-provided reference bars, mounted via the features.artifacts.renderTabBar hook and kept accessible with the exported createRovingTablist helper: Buttons wraps the strip in chevron scroll controls, Menu adds a trailing dropdown of every artifact. Stream several artifacts (click a file button 5+ times) in Panel mode to see it overflow.

Tab edge fade

Directional edge fade on the built-in Scroll strip (features.artifacts.layout.tabFade). On (default) fades whichever edge has more tabs off-screen; Off shows a hard cut. Applies only to the Scroll bar; the custom Buttons and Menu bars own their own affordances.

Custom actions

Add host-defined buttons to the artifact pane toolbar, the in-chat reference card, and the inline block chrome (features.artifacts.toolbarActions, features.artifacts.cardActions, and features.artifacts.inlineActions). The inline "Log" action shows up in the inline chrome title bar.

Inline chrome

File-preview chrome (title bar with copy and expand) around inline blocks in display: "inline" (features.artifacts.inlineChrome). On by default; turn it off for a bare inline body.

Notes

Artifact types

Markdown: rendered note
Known component: ArtifactDemoPill
Unknown component: fallback inspector card
Global: window.personaArtifactDemo

How it works

Enable artifacts on the widget config:

            features: {
              artifacts: {
                enabled: true,
                allowedTypes: ["markdown", "component"],
              },
            },
          

The buttons here replay the exact artifact_start / artifact_delta / artifact_complete wire frames a real Runtype agent emits, streamed through controller.connectStream(...).

That is what makes the in-chat reference card appear and stream from "Generating…" to done with a Download button, while the side pane fills at the same time. A live agent produces the same frames.

Components must be registered via componentRegistry.register(name, renderer).

Display modes

Where artifact bodies render is controlled by features.artifacts.display:

            features: {
              artifacts: {
                enabled: true,
                display: "panel", // panel | collapsed | inline (or { default, byKind, files })
              },
            },
          

Each mode names where the artifact body renders. panel (the default) shows the reference card in the transcript and auto-opens the side pane as the artifact streams. collapsed (formerly card, still accepted) shows only the card; the pane opens when you click it. inline renders the full artifact preview directly in the transcript, rendered markdown, sandboxed file iframes, or registry components, with no pane involved. The switcher in the rail applies the mode live via handle.update(config); it takes effect on the next streamed artifact.

Streaming body (inline)

When display: "inline", features.artifacts.inlineBody tunes how the body streams and settles:

            features: {
              artifacts: {
                enabled: true,
                display: "inline",
                inlineBody: {
                  streamingView: "source", // source | status
                  viewMode: "rendered", // rendered | source (source: never preview, code editor style)
                  height: 320, // number | "auto" | { streaming, complete }
                  followOutput: true, // tail-follow the streaming source
                  overflow: "scroll", // scroll | clip (clip: fixed top-of-document preview, no internal scroll)
                  fadeMask: { top: true, bottom: true }, // boolean | { top, bottom }, default both, shown only when clipped
                  transition: "auto", // auto | none
                  completeDisplay: "inline", // inline | card (card: collapse to the reference card on complete)
                },
                inlineChrome: {
                  showViewToggle: true, // rendered/source segmented toggle, only when a preview exists
                },
                filePreview: {
                  loading: true, // true | false | { label, renderIndicator }, appears only when loading takes a moment
                  // loading: { renderIndicator: (ctx) => myEl }, // full custom indicator, null falls back to default
                },
              },
            },
          

A numeric height reserves a fixed, internally scrolled window for the streaming source and pins the completed iframe to the same height, so the streaming to complete swap causes no layout shift. "auto" grows with content instead. streamingView: "status" shows a quiet generating placeholder in place of the streaming code, and transition: "auto" cross-fades the completion swap where the View Transitions API is supported. These only affect display: "inline". The controls in the rail apply them live via handle.update(config), landing on the next streamed artifact.

Status loading animation

The streaming "Generating…" status animates on the reference card, the inline chrome, and the inline status body, and the text itself is replaceable via features.artifacts.statusLabel (a string, or a function receiving live stream context for dynamic labels). Configure the animation on features.artifacts:

            features: {
              artifacts: {
                enabled: true,
                loadingAnimation: "shimmer", // none | pulse | shimmer | shimmer-color | rainbow
                loadingAnimationDuration: 2000, // ms per cycle
                loadingAnimationColor: "#0ea5e9", // shimmer-color only
                loadingAnimationSecondaryColor: "#3b82f6", // shimmer-color only
              },
            },
          

The default is shimmer. Character-by-character modes (shimmer, shimmer-color, rainbow) stagger a per-character animation; pulse fades the whole status; none disables it. All modes honor prefers-reduced-motion. The controls in the rail update these values live via handle.update(config), so the running widget re-renders without losing the transcript.