Claude Code Artifacts: Share Live Pages From Any Session

If you have used Claude Code for more than a few minutes, you know the pattern: the model works through a problem in your terminal, produces something genuinely useful — an annotated diff, a root-cause timeline, a ranked list of options — and then it lives entirely in your scrollback. Sharing it means pasting walls of text into Slack or asking a teammate to trust your summary.

Claude Code Artifacts change that. Any session can now publish its output as a private, live web page on claude.ai. The page updates in place as the session continues, and you share it with a single link. No deployment, no copy-paste, no context lost in translation.

What Is a Claude Code Artifact?

An artifact is a self-contained HTML page that Claude Code publishes from your session to a URL on claude.ai. Open it in a browser and it renders everything Claude produced — diffs, charts, checklists, interactive controls — without the visual noise of a terminal. As the session keeps working, the same URL refreshes in place.

Artifacts launched in beta on June 18, 2026 and are now generally available on Pro, Max, Team, and Enterprise plans. You need Claude Code CLI version 2.1.183 or later and a session authenticated via /login.

How to Create an Artifact

You do not need a special command or flag. Ask Claude in plain language:

Make an artifact that walks through this PR with the diff annotated inline.

or

Build a dashboard artifact of last week's deploy failures by service and keep it updated as you investigate.

Claude writes an HTML or Markdown file to your project, then asks permission before publishing: "Claude wants to publish 'Deploy failures by service' to a private page on claude.ai." Approve once and future updates to the same artifact publish silently. Claude prints the URL, and your browser opens the page automatically.

To disable auto-open, set CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 in your environment. Press Ctrl+] at any time to reopen the most recent artifact from the terminal.

Six Use Cases and the Prompts That Work

1. Pull Request Walkthroughs

Build a page that renders the diff with your reasoning in the margin, so reviewers see context next to the code instead of hunting through comments:

Make an artifact that walks through this PR. Render the diff with margin annotations
and color-code findings by severity.

Share one URL instead of writing a wall of PR description.

2. Investigation Timelines

For incidents and debugging sessions, keep a live timeline that fills in as Claude works:

Build a timeline artifact for this incident. Add each finding as you confirm it
and mark the root cause when we identify it.

Team members with the link follow progress in real time without watching your terminal.

3. Comparing Alternatives

Put implementation options side by side on one page so you can evaluate them together:

Make an artifact with four distinctly different layouts for the settings panel.
Vary density and grouping, and lay them out as a grid with a one-line tradeoff under each.

This works equally well for API shapes, copy variants, and implementation plans.

4. Interactive Tuning

Add controls for values you are adjusting and explore them visually:

Build an artifact with sliders for easing curve, duration, and delay
so I can try values on this transition. Show the animation live as I move them.

5. Progress Tracking for Long Tasks

For migrations, refactors, or bulk operations, keep the artifact current throughout:

Turn this migration plan into a checklist artifact.
Check items off as you complete them and add a note for anything you skip.

6. Feeding Results Back Into the Session

An artifact can act as a lightweight decision tool that hands its output back to Claude:

Make a triage board artifact with each open issue as a draggable card across
Now, Next, Later, and Cut columns. Add a Copy as prompt button that gives me
the final ordering to paste back here.

Live Data With MCP Connectors

Artifacts can call your MCP connectors each time someone views the page, not just when Claude built it. Requires CLI version 2.1.209 or later.

Build a dashboard artifact of our open pull requests that pulls the live list
through my GitHub connector when the page loads.

Each viewer's calls go through their own connector account. Two people opening the same dashboard can see different data based on their permissions. The page never sees anyone's credentials — claude.ai makes the network calls on the page's behalf.

When planning a connector-backed artifact, ask Claude to add a fallback message in each live section naming the connector it needs, so viewers know what to connect if a section appears empty.

Important: connector-backed artifacts cannot be shared to public links on any plan. They stay within your organization.

Sharing and Collaboration

A new artifact is visible only to you. To share, open the artifact in the browser and use the Share control in the page header.

Pro and Max plans: public link only. Anyone with the URL can view the page without signing in.

Team and Enterprise plans: share with specific organization members or everyone in the org. Viewers sign in with their organization account. Public sharing is disabled by default until an Owner enables it in admin settings under Settings → Claude Code → Capabilities → External sharing.

Editors: on Team and Enterprise plans, you can make a teammate an editor. They give Claude the artifact URL in their own session, and Claude republishes with their changes. Everyone with the page open sees each update live.

Design System Integration

As of CLI v2.1.183, Claude applies a built-in design skill when building artifacts — deliberate palette, typography, and spacing without extra prompting. To keep artifacts consistent with your product branding, add design tokens where Claude can find them, such as in your CLAUDE.md:

## Design system
- Colors: primary #1a4d8f, accent #f59e0b, surface #f8fafc
- Typography: Inter for body, JetBrains Mono for code
- Spacing: 8px scale, 6px border radius

Claude treats your design system as higher precedence than its own defaults.

Page Constraints to Know

Artifacts are deliberately static. The strict Content Security Policy blocks all external requests — no external scripts, fonts, images, fetch calls, or WebSockets. Claude inlines everything. MCP connector calls are the only exception; the page hands those off to claude.ai.

To keep token cost down: prefer SVG or CSS for diagrams over embedded raster images, omit interactivity you do not need, and have the page summarize large datasets rather than inline them in full.

Availability Requirements

If Claude writes a local HTML file without a link or says it cannot publish, one of these requirements is not met for your session.

Disabling Artifacts

To turn artifacts off for your own sessions:

# Environment variable
CLAUDE_CODE_DISABLE_ARTIFACT=1
 
# Settings file (settings.json)
# "disableArtifact": true

On Team and Enterprise plans, owners disable artifacts organization-wide under Settings → Claude Code → Capabilities.

The Bottom Line

Claude Code Artifacts solve a real problem: terminal output is excellent for the person running it and nearly useless for everyone else. A single prompt turns a session's work into a shareable, live page that updates in place and requires no deployment.

For teams already using Claude Code, this is the fastest path from "Claude figured this out" to "my team can see what Claude figured out" — no copy-paste, no screenshots, no lost context.

Try it with your next PR review: Make an artifact that walks through this PR with the diff annotated inline. The URL is ready before your reviewer opens GitHub.