Claude Code Artifacts: Publish a Page From a Session

I had spent twenty minutes describing four possible layouts for a settings panel in prose, and the person reading it still asked me to just show them. Of course they did. The next time I asked for the four layouts on one page with a one-line trade-off under each, sent the link, and got a decision back in ninety seconds.

That is the whole case for artifacts, and the interesting part is the constraints rather than the concept. This post covers what an artifact is deliberately not, publishing and updating including the mistake that creates a duplicate, the content security policy that shapes what the page can do, the connector model where each viewer's own account makes the calls, comments and Claude replying to them, and the conditions under which the feature quietly is not there.

A capture of work, not an application

Reach for an artifact when terminal text is the wrong medium: output easier to look at and interact with than to read line by line. Claude builds the page from anything the session can reach, including your codebase and data pulled through connected tools, so it can show things that would take paragraphs to describe.

It is not a place to deploy an internal tool. One self-contained page, no backend, so it cannot store form input or serve multiple routes. If what you are describing has a database behind it, you want your own infrastructure and this is the wrong thing to stretch. The line is clean and worth respecting rather than fighting.

Publishing, updating, and the duplicate trap

Claude writes the page to an HTML or Markdown file in your project and publishes it, asking permission the first time. Republishing an artifact you have already approved does not prompt again, and each publish becomes a version you can choose between from the share control.

# Ask for one directly, or let Claude offer.
Make an artifact that walks through this PR with the diff
annotated inline and findings colour-coded by severity.

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

# Finding and updating one later:
/artifacts       # every artifact you own and every one shared
                 #   o  open in the browser
                 #   c  copy the link
                 #   Enter  attach it to THIS session
Ctrl+]           # reopen the most recent artifact from this session

# Updating from a DIFFERENT session needs the URL or an attach.
# Without either, a new session creates a NEW artifact rather
# than updating the one you meant.
Update https://claude.ai/code/artifact/5fbea6f3-… with today's numbers.

CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0   # stop the browser opening

The constraints are the design

Understanding the content security policy explains almost everything about what artifacts look like. There is no CDN, no external script, no fetch to your API — so everything is inlined, and pages are built out of what HTML, CSS and inline JavaScript can express on their own.

# One self-contained page, served under a strict CSP.

External requests   Nothing from outside except Google Fonts and
                    connector data. Scripts, stylesheets, fonts and
                    images from other hosts are blocked, along with
                    fetch, XHR and WebSockets. So CSS and JS are
                    inlined and images embedded as data URIs.

No backend          Cannot store form input or authenticate viewers.
                    Its only route to outside data at view time is
                    calling MCP connectors.

Single page         Relative links do not resolve — nothing is
                    deployed alongside it. Multi-section content
                    uses in-page anchors.

File types          .html, .htm or .md. Markdown renders as styled HTML.

Rendered size       16 MiB or smaller. Large embedded images are
                    the usual cause of a size failure.

# Token cost is real: a styled page costs more output than the
# same content as terminal text. Prefer SVG or HTML and CSS over
# embedded raster images, drop interactivity you do not need, and
# have the page summarise large datasets rather than inline them.

Live data, through the viewer's account

A page can call MCP connectors each time someone views it, so it shows current data rather than a snapshot from the session that built it. The model here is unusual and worth getting right, because it produces behaviour that surprises people the first time.

How a connector call actually resolves:

Comments, and Claude answering them

Sharing within your organisation lets people comment on the page, and Claude can read and reply to those threads. Public artifacts take no comments at all — to make a commented artifact public you have to delete the threads first. After your session publishes an artifact it watches for comments while the session runs, and what happens when one arrives depends on your permission mode:

• Where your mode lets Claude post without asking, it reads the thread and replies, editing the artifact when the comment asks for a change.
• Where posting would need approval, you are told comments are waiting and asked twice — once to read the thread, once to post.
• In plan mode it pauses entirely until you leave plan mode and ask.

Where it silently is not available

Artifacts need every condition met, and when one is not, Claude writes a local HTML file or says it cannot publish rather than explaining which requirement failed. The list is worth knowing because two of these are configurations people adopt for unrelated reasons.

# Turn artifacts off for your own sessions, three ways:
{ "disableArtifact": true }                    // settings file
CLAUDE_CODE_DISABLE_ARTIFACT=1                 // environment
{ "permissions": { "deny": ["Artifact"] } }    // permission rule

# Where they are silently unavailable, and Claude writes a local
# HTML file or says it cannot publish instead:
#
#   an API key, gateway token or cloud-provider credential —
#     the session must be backed by a claude.ai account
#   Amazon Bedrock, Google Cloud's Agent Platform, Microsoft Foundry
#   organisations with CMEK, HIPAA, or Zero Data Retention
#   Agent SDK, GitHub Action and MCP-server contexts (off by default)
#   CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC is set

What an administrator controls

On Team and Enterprise plans the organisation-level controls are more granular than a single switch, and one of them defaults in the conservative direction:

• Public sharing is off by default, so members share only within the organisation until an Owner turns it on. Turning it back off blocks existing public links without changing each artifact's audience.
• Connector calls from artifacts have their own toggle, separate from the artifacts toggle itself.
• Retention is configurable, with separate periods for artifacts still private to their author and artifacts that have been shared.
• Publishing, sharing and deleting each appear in the audit log, and a compliance API lists, retrieves and deletes artifacts across the organisation.

The habit worth forming is asking for an artifact whenever you catch yourself describing something visual in prose — a comparison, a diff walkthrough, a board of options. The constraints keep it honest: one page, no backend, everything inlined, which stops it drifting into being a badly hosted application. And if you are going to share connector-backed pages, put the fallback text in from the start, because the failure mode is a section that looks broken rather than one that explains itself.