Claude's artifacts teardown

Updated June 14, 2026

When Claude generates code, a document, or an interactive tool, the reply includes an artifact card first. Opening it expands into a split pane: conversation on the left, deliverable on the right.

Users iterate via follow-up prompts while the artifact stays open, switch between Preview and Code, and optionally publish a public link while the chat stays private.

Artifacts announced in the thread

“Simple Calculator · Interactive artifact” card in the reply before the pane opens.

What works

The artifact card names the deliverable and labels it “Interactive artifact” so users know something runnable is attached.
Claude still explains features in prose above the card, the thread documents intent; the card is the entry point.
Opening the card expands to the split pane without losing the chat history on the left.

What we would push on

Card and bullet list repeat the same information. Consider collapsing the list once the artifact is open.

Takeaway

Treat the in-thread card as a preview and handoff, not the final workspace.

Pattern: Chat Artifacts

Preview mode in the split pane

Preview tab: chat on the left, live calculator on the right. Composer stays available below.

What works

Conversation and deliverable stay visible together. Users never hunt for “where did that code go?”
Preview tab shows the running UI; Copy and Publish sit in the artifact chrome, separate from chat actions.
The composer remains at the bottom so follow-ups (“make the buttons bigger”) happen in context.

What we would push on

On smaller viewports the split pane may feel cramped. Mobile likely needs a full-screen artifact mode.

Takeaway

Split pane is Claude’s core artifact pattern: thread as reasoning trail, right pane as the product of the session.

Pattern: Chat Artifacts

Code mode in the same pane

Code tab in the same artifact pane, toggle from Preview without leaving the split view.

What works

Preview and Code are two modes of one pane, not separate destinations. Users flip tabs on the calculator artifact above.
Syntax highlighting and component structure are readable without exporting to an IDE first.
Copy in the artifact header is scoped to the code block, not the whole chat transcript.

What we would push on

No inline edit in the Code tab in this flow, mechanical fixes still require a follow-up prompt or external editor.

Takeaway

Pair Preview and Code as adjacent tabs. Developers verify in Preview, inspect and copy in Code.

Pattern: Smart Code Blocks

Pattern: Chat Artifacts

Interactive outputs you can use

Compound interest explainer with sliders, summary cards, and a live chart, not a static screenshot.

What works

Artifacts can be full interactive apps: sliders update the chart and summary cards in real time.
Educational prompts (compound interest) become explorable tools instead of walls of markdown.
The artifact title matches the lesson topic so returning users recognize what they built.

What we would push on

Full-width artifact mode hides the chat entirely. Users lose conversational context until they dismiss or resize.

Takeaway

Artifacts are workspace objects, not paste-only blocks. Steal the interactive preview when your outputs need hands-on verification.

Pattern: Chat Artifacts

Pattern: Generative UI

Publish outside the chat

Publish modal warns the artifact becomes public while the chat stays private.

What works

Publish is explicit, modal copy states the artifact becomes internet-accessible and may appear in search.
Chat privacy is called out separately so users know only the artifact link is shared, not the full conversation.
Usage policy reminder appears before Publish & copy link, appropriate friction for public sharing.

What we would push on

Publish sits next to Copy with similar visual weight. Accidental public sharing is a real risk for enterprise users.

Takeaway

Sharing is a distinct mode from iterating. Separate publish from copy and spell out what becomes public.

Pattern: Chat Artifacts

How artifacts fit with output

Artifacts are the second act: card in the reply → split pane → Preview and Code tabs → interactive examples → optional Publish.

In-thread refinement (Try again, version navigation, edit-to-branch) still applies to the conversation while the artifact is open. The output teardown covers that half of the loop.

The pattern to steal: treat the thread as context and the artifact as the deliverable users copy, run, or ship.