Anthropic brings Artifacts to Claude Code — sharing interactive pages from coding sessions

The Short Version

Claude Code now supports artifacts — the split-screen, interactive-page feature that launched in Claude chat back in 2024 — but tailored for the coding session workflow. From inside a Claude Code session (CLI or desktop app), you can now ask Claude to publish its work as a live, interactive web page at a private URL on claude.ai. The page is generated from full session context: code, connected tools, chat history, and data the session has pulled. When something changes, the page updates in place at the same URL with version history tracked.

The feature entered beta on June 18, 2026, available to Claude Team and Enterprise customers. It works with both the Claude Code CLI and the desktop app. Artifacts are private by default and only visible to authenticated members of your organization.

This is the short version. Below is everything you need to know — what they are, how they work, what you can build, and the sharp edges.

What Changed

Claude Code artifacts didn't exist before June 18, 2026. While Claude chat (claude.ai) has had artifacts since June 2024, Claude Code — the terminal-based and desktop coding agent — had no way to produce them. The output of a coding session stayed in the terminal: chat logs, file diffs, test results, and whatever you manually copied out.

The June 18 update adds a new capability: from inside any Claude Code session, you can ask Claude to publish its work as a page. Claude writes HTML or Markdown to a local file, then publishes it to a private URL on claude.ai. The URL is stable — updates to the page go to the same link — and version history is preserved.

This matters because coding sessions produce output that is often easier to see than to read line by line in a terminal. An annotated diff, a live-updating dashboard, a set of design alternatives you want to compare side by side — these are natural candidates for a page, not a scrollback buffer.

How It Works

Create an Artifact

Claude may publish an artifact on its own when it decides the output suits a page format, or you can ask directly. Natural language is sufficient — just describe what you want to see:

"Make an artifact that walks through this PR with the diff annotated inline." "Build a dashboard artifact of last week's deploy failures by service and keep it updated as you investigate."

What happens next:

1. Claude writes the page to an HTML or Markdown file in your project directory.
2. Before publishing the first artifact, Claude asks for permission: "Claude wants to publish 'Deploy failures by service' to a private page on claude.ai."
3. You approve. Claude publishes the page and prints the URL. Your browser opens automatically.
4. Subsequent updates to the same artifact do not re-prompt.
5. Press Ctrl+] at any time to reopen the most recent artifact from the terminal.

Update an Artifact

Artifacts are live. Ask Claude to revise the page, or let a long-running task republish as it makes progress. The underlying file is edited and published again to the same URL.

"Add a per-region breakdown below the summary chart and republish."

Anyone with the page open sees the update in place. Each publish becomes a version. From the Share control in the page header, the author can choose which version viewers see.

To update an artifact from a different session, give Claude the artifact's URL:

"Update https://claude.ai/code/artifact/5fbea6f3-... with today's numbers."

Without the URL, a new session always creates a new artifact rather than updating an existing one.

Share an Artifact

A new artifact is visible only to you. To share:

1. Open it in your browser.
2. Use the Share control in the page header.
3. Grant access to specific people in your organization, or to everyone in the org.

Key sharing constraints:

• Viewers must be authenticated members of the same organization that published the artifact. There is no option to make an artifact viewable outside it.
• View-only, not co-editable. Shared viewers see each version you publish but cannot change the page. You remain the only writer.
• To share outside your org, ask Claude for the HTML file and send that file directly.
• The page header identifies you as the author and links to your gallery at claude.ai/code/artifacts, which lists every artifact you have created.

What You Can Build

An artifact is a single self-contained HTML page with CSS and JavaScript inlined. Anything you can express in HTML, CSS, and inline JS is in scope. The official documentation describes several high-value patterns:

Walk Through a Change

The most obvious use case: an annotated PR walkthrough. Ask Claude to render a diff with margin annotations and color-code findings by severity. Reviewers get your reasoning next to the code instead of reconstructing it from a description.

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

Compare Alternatives

Ask for several variants on one page. This works for layouts, copy, API shapes, or implementation plans. Being able to see four options side by side eliminates the back-and-forth of describing each variant separately.

"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."

Interactive Controls

Sliders, toggles, and input fields bound to whatever you're adjusting. Explore values directly without describing them in text.

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

Bring Results Back to the Session

An artifact can act as a lightweight editor for a decision you then hand back to Claude. Ask for an export control that produces text you can paste into the terminal.

"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."

Track Work in Progress

Ask Claude to keep an artifact current while a long task runs. Anyone with the link can follow along without reading the terminal.

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

Practical Examples from the Release

Anthropic has highlighted specific use cases that map directly to common team workflows:

• PR walkthroughs — annotated diffs with contextual reasoning
• Incident timelines — chronological investigation records that fill in as Claude works
• License audits — structured output of dependency licensing across the codebase
• Architecture overviews — visual summaries with component relationships

What Makes This Different

Claude Code artifacts occupy a specific niche that other AI coding tools don't address:

Cursor and GitHub Copilot generate code inline. Their output is the code itself — you review it in the editor. Neither has a mechanism to publish session output as a browsable page.

Claude chat artifacts (the original feature) are generated from conversation context, not from a codebase. They work well for prototyping UI components and generating documents, but they don't have access to your repository, your connected tools, or your running agents.

Claude Code artifacts combine both: the page is generated from a session that has full access to your codebase, your MCP-connected tools, your CLI history, and your running agents. The result is that an artifact can reflect real data from the session — actual build output, real test results, live dependency information — rather than a model's synthetic approximation.

The artifact also remains connected to the session. As Claude continues working, it can republish the page with new data. This is closer to a live dashboard for a running agent than a static document.

Page Constraints

Artifacts have significant technical constraints that shape what you can build:

Strategies to reduce token cost:

• Prefer SVG or HTML+CSS for diagrams over embedded raster images
• Omit interactivity you don't need
• Have the page summarize large datasets rather than inlining them in full

Availability and Requirements

Multiple conditions must be satisfied for artifacts to work:

To stop the browser from opening automatically on publish:

export CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0

Admin and Enterprise Controls

Admins have a full set of controls for managing artifacts across the organization:

• Enable/disable — Settings > Claude Code > Capabilities in claude.ai admin. On Enterprise plans with RBAC, artifacts can be scoped to specific roles.
• Retention policy — Settings > Data & privacy controls sets separate retention for private and shared artifacts.
• Audit log — Publishing, sharing, and deletion appear under claude_artifact_* event types.
• Domain allowlisting — The viewer loads artifacts from a sandboxed *.claudeusercontent.com origin. Add this to your network allowlist.
• Compliance API — Programmatic list, retrieve, and delete via GET /v1/compliance/code/artifacts, GET by version ID, and DELETE by artifact ID.

Pitfalls

What Artifacts Are Not

An artifact is a capture of work, not an application. It cannot:

• Store form input submitted on the page
• Call an API at view time
• Serve multiple routes
• Authenticate viewers itself (org-level auth only)

If you need a hosted internal tool with a backend, deploy it on your own infrastructure. The artifact is the wrong shape for that.

Version Management

• Publishing an artifact in a new session without the URL creates a new artifact — it does not append to the previous one. Always save the URL if you plan to update across sessions.
• You cannot undo a share. Once you grant access to someone, revoking requires admin-level org management.

Organization Boundaries

• Artifacts cannot be shared outside your organization. If an external stakeholder needs to see the page, export the HTML file and share it directly.
• On plans that previously supported public artifact sharing (free, Pro, Max), that capability was removed for Team/Enterprise in favor of org-scoped access. The feature is org-internal by design.

Token Budget

• A styled artifact page uses significantly more output tokens than the equivalent terminal output. Plan for this when running long sessions with frequent republishing.
• To estimate: an annotated PR walkthrough with inline diffs typically consumes 8–15K output tokens. A dashboard with live-updating charts can run 20–40K per republish.

Summary

Claude Code artifacts bridge the gap between what a coding agent produces and what a team can consume. The terminal keeps scrollback; the artifact makes the output navigable, interactive, and shareable. For PR reviews, incident investigations, architecture documentation, and progress tracking during long-running sessions, it replaces the workflow of copying terminal output into Slack or a shared doc.

The feature is in beta, requires a Team or Enterprise plan, and has meaningful constraints — no backend, no external requests, no cross-org sharing. Within those boundaries, it solves a real problem: teams that use Claude Code collaboratively now have a way to share the agent's output without leaving the ecosystem.

Start with a simple PR walkthrough or a deploy dashboard. The artifact pattern works best when the output is easier to see than to describe.