Artifacts

Some output is painful to read in a terminal: a review of a 40-file pull request, a chart of last week's failures, three layout options you want to compare. Artifacts solve that. Claude Code turns the work into a single web page, publishes it to a private URL on claude.ai, and keeps it updated as the session carries on. You decide later whether anyone else gets to see it.

Note: Artifacts need a Pro, Max, Team or Enterprise plan and a session signed in to a claude.ai account with /login. The full checklist is in Availability.

Good uses and poor uses

I reach for an artifact whenever the answer is something to look at rather than something to read. Typical jobs:

• An annotated walkthrough of a diff for a reviewer who was not in the session.
• A dashboard built from data the session already gathered (logs, a CSV, a query result).
• Side-by-side options: page layouts, API shapes, migration strategies.
• A progress board or investigation timeline that fills in while a long task runs.
• A link to drop in a chat thread instead of pasting 200 lines of output.
• A status page that fetches fresh numbers through a claude.ai connector every time someone opens it.

What an artifact is not: a hosted application. It is one self-contained page with no server behind it, no routing and no way to authenticate viewers itself. If you need a real internal tool with a backend, build and deploy that on your own infrastructure.

Publishing your first artifact

You can simply describe the visual result you want, or say "artifact" outright. Claude also publishes on its own initiative when a page is clearly the better format.

Build an artifact comparing the three caching options we discussed, one column each, with a short verdict under every column.

Unless you name a location, Claude writes the page as an HTML or Markdown file in a temporary folder outside your repository and publishes that file. What happens next:

1. The URL is printed in the terminal and your browser opens on the new page.
2. Claude chooses a title and an emoji (used in your gallery and in shared links) and can choose a browser-tab icon. Ask if you want something specific.
3. The page is private to you until you share it.

A few behaviours around permission prompts are worth knowing:

If the prompt came in through Remote Control from claude.ai, the desktop app or the mobile app, no browser tab opens on the host machine. Press Ctrl+] at any point to reopen the most recent artifact from the session. To stop the browser opening automatically, set CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0.

Tip: If Claude says it cannot publish, or quietly writes a local HTML file and gives you no link, the tool is not enabled for the session. Work through Availability.

Updating a page

Ask for a change and Claude edits the source file and republishes to the same URL. Anyone with the page open sees it refresh in place.

Split the error chart by region and add a table of the ten noisiest endpoints underneath. Republish.

Every publish becomes a numbered version. From the Share control in the page header you choose which version viewers see, or keep them on the latest.

A fresh session does not know about artifacts from earlier sessions. To update one, either paste its URL into your prompt or attach it with /artifacts. Without one of those, Claude creates a brand new page.

Finding an artifact again

Run /artifacts to list everything you own plus everything shared with you. The list comes from your claude.ai account, so it survives /clear and new sessions. In the list:

/artifacts needs v2.1.208 or later. The gallery at claude.ai/code/artifacts also lists every artifact you have created, and every page header links there.

Sharing

Open the page and use Share in the header. Options depend on the plan:

• Inside your organisation (Team and Enterprise): share with named people or with everyone in the organisation. Viewers sign in to claude.ai as members.
• Public link: anyone on the internet can open it without signing in. On Team and Enterprise this stays off until an Owner enables external sharing.

Authorship is visible to colleagues: on an organisation-shared page your name is in the title menu, and on a public page signed-in colleagues see it in the header. Anyone outside the organisation, or not signed in, sees the label Content is user-generated and unverified. instead.

Editors

People you share with are viewers by default. On Team and Enterprise you can switch someone's role to editor in the share dialog. An editor updates the page the same way you would from a new session: they give their own Claude the URL (or attach it via /artifacts), Claude pulls the current source and republishes with their changes, and everyone watching sees the update.

Reading an artifact someone shared with you

Give Claude the URL, or attach it from /artifacts. Claude treats someone else's page like any web page fetched with WebFetch: it receives a summary of what it asked about, and any instructions embedded in the page are reported rather than obeyed. The full source is also saved locally so Claude can open the exact content when it needs to, for example to republish as an editor.

Claude Code adds an approval prompt (on top of your normal permission rules) in these cases:

• A cloud session with network access set to None. Auto mode's classifier can approve instead; in a Cowork session only you can.
• A public artifact from another organisation. Always asks, even in auto mode. In modes where it cannot ask, such as bypassPermissions, the read is blocked. These reads also need feature-flag fetching to be on.
• Owner or network setting cannot be confirmed. Your approval covers that single read.
• Plan mode, or feature-flag fetching off. Asks before reading an artifact made by someone else in your organisation.

WebFetch's own prompting rules still apply on top.

Comments

When you share inside your organisation, people can comment on the page and Claude can read and answer those comments. This needs v2.1.221 or later.

Claude engages with comments in two ways:

• You ask it to. Give it the URL and ask for the comments. It lists each thread and flags which comments an editor has sent to Claude.
• An editor sends a comment to Claude, either with Send to Claude or by mentioning @claude in the thread. That activates the thread.

Claude can only reply to or resolve activated threads. Everything else stays open until a person resolves it. Replies show as from Claude, via you.

Go through the open comment threads on https://claude.ai/code/artifact/<id>, apply the copy changes people asked for, and reply to each thread saying what you changed.

Public-link viewers cannot see or add comments; existing threads remain for you and your editors.

If Claude says it cannot read comments, check three things: you are on v2.1.221+, this is not your first session after installing or upgrading from an older version (start another session and retry), and feature-flag fetching is on.

Automatic replies

Once your session publishes an artifact, it watches the page for comments sent to Claude (v2.1.228 or later, and feature-flag fetching must be on). When one arrives, your permission mode decides what happens:

There is a rate cap: after 60 sent comments or thread activations on one artifact within an hour, Claude stops auto-replying there, shows the waiting message once, and resumes as that hour's activity ages out.

Each watched artifact appears in /tasks as a live-updates task. To stop automatic replies:

• Ctrl+C once at an idle prompt pauses replies on every watched artifact until you send your next message.
• Stop the task in /tasks stops replies for that artifact until you ask Claude to resume them. Republishing does not restart them, and the stop persists if you resume the session later.
• Ctrl+X Ctrl+K twice within three seconds (the chord that stops all background subagents) stops replies on every artifact for the rest of the session, and asking to resume does not undo it.

A watch Claude Code started by itself can lapse after several quiet hours; republish or ask Claude to watch again. If the comment delivery service goes down, Claude Code retries for a while and then stops watching.

Live data through connectors

A page can call your claude.ai MCP connectors each time it is viewed, so a dashboard shows current data rather than a frozen snapshot. This needs v2.1.209 or later on a Pro, Max, Team or Enterprise plan; older versions just bake in whatever the session gathered.

Make an artifact listing my team's open Linear issues by assignee. Fetch them live through my Linear connector when the page loads, and add a refresh button.

Points to understand:

• Claude declares, at publish time, which connectors the page may call. The page cannot call anything outside that list.
• Only claude.ai connectors qualify. Local servers from .mcp.json can feed data in while Claude builds the page, but the published page cannot reach them.
• The page fetches on load, and can refresh on a timer or from a control. Responses are cached in the viewer's browser so a reopened page renders instantly and then updates.

Whose account the calls use

Calls always run as the viewer, never as the publisher:

• Two colleagues can see different data on the same dashboard because each sees what their own connections allow. The page never handles credentials; claude.ai makes the calls.
• claude.ai asks each viewer for permission before the first connector call. Someone who declines, or lacks the connector, sees the page minus its live sections.
• Buttons that trigger side effects (posting a message, updating a ticket) act through the account of whoever clicks.

Public-link viewers who are not signed in, or who are outside your organisation, never trigger connector calls. When I share a connector-backed page I always ask Claude to put a fallback line in each live section naming the connector it needs, so nobody stares at a blank box.

Live sections are empty

Work through these for a viewer in your organisation:

1. No connection. Each viewer needs their own connection to every connector the page uses (claude.ai Settings > Connectors), then a reload.
2. Permission declined. The denial lasts for that page load; reloading asks again.
3. Organisation toggle off. An Owner controls Enable artifact connectors.
4. Wrong tool names. If the page calls tools the connector does not expose (common with gateway-style connectors that expose only a few tools), the section is empty for everyone. Ask Claude to correct the names and republish. Since v2.1.265, when the connector's tools are available in your session, Claude Code checks declared tool names at publish time, warns about mismatches and refuses the publish if none match.

File downloads

Pages can let viewers save a generated file, such as a CSV of a table or a PNG of a chart. Downloads are a runtime capability claude.ai enables per account, so Claude checks before building the control.

The viewer blocks any download the page starts by itself, including data: and blob: links. If you have a page with download buttons built that way, ask Claude to rebuild them using the downloads capability.

Add an "Export CSV" button under the results table.

Ideas for pages

Anything you can do in one HTML file with CSS and inline JavaScript is fair game. Patterns I use regularly:

• Change walkthrough. A diff with notes in the margin, findings colour-coded by severity.
• Option grid. Four takes on the same screen or API, each with a one-line trade-off.
• Tuning panel. Sliders and toggles bound to the thing you are adjusting (animation timing, chart thresholds, a pricing formula) so you can feel the values.
• Round-trip editor. A board where you drag cards into priority columns, plus a "copy as prompt" button so the result comes back into the terminal as text.
• Live checklist. Claude ticks items off a migration plan as it works and notes anything skipped, so stakeholders can follow without terminal access.

Making pages look like your brand

Claude uses a built-in design skill for artifacts, which picks a deliberate palette, type and layout, and first looks for a design system in your project. To keep pages on-brand, write your tokens down somewhere Claude reads, such as CLAUDE.md or a theme file:

## Brand tokens
- Ink #14213d, highlight #e85d04, paper #fdfcfa
- Headings: Fraunces. Body: Source Sans 3. Code: IBM Plex Mono
- 4px spacing grid, 10px corner radius

Precedence runs: your prompt, then your design system, then Claude's own defaults. Google Fonts is the only external font source the page may load; any other typeface is inlined as a @font-face data URI, and every typeface gets a fallback stack.

Templates: slides, designs and docs

Rather than a free-form page, Claude can start from a claude.ai template, each with its own editor and export options (PowerPoint, PDF, Word and so on):

• Claude Slides for a presentation. Run /slides with a brief, for example /slides onboarding for new support engineers, 20 minutes. Without a brief Claude asks what the deck is about first. Edit or present it in a desktop browser.
• Claude Design for mock-ups, screen flows, landing pages or posters. Run /design with a brief; Claude draws artboards on one canvas. Edits save automatically and each artboard exports to PNG or PDF.
• Claude Docs for documents other people will read and edit. This arrives as a claude.ai connector (listed in /mcp as claude.ai Claude Docs) rather than a command. Requests for specs, proposals or write-ups go there; files that belong in the repository, such as a README, stay files. Name a format (.docx, a Markdown file in the repo) if you want a file instead.

Templates are in beta: on by default for Pro, Max and Team; on Enterprise an Owner enables each one under Organization settings > Artifacts. If Slides is disabled /slides disappears, and if Design is disabled /design will not draft. Both commands need v2.1.265 or later. To switch the Docs connector off, add claude.ai Claude Docs to deniedMcpServers or toggle it in /mcp (see MCP).

Page constraints

Claude Code wraps your file in an HTML shell and serves it under a strict Content Security Policy.

Markdown sources render as styled document pages with highlighted code.

Artifacts cost output tokens, and a styled interactive page costs more than plain text. To keep the bill down: prefer SVG or HTML/CSS diagrams to raster images, skip interactivity you will not use, and have the page summarise big datasets instead of embedding every row.

Availability

Every condition must hold, otherwise Claude writes a local file or explains why it cannot publish.

• Plan: Pro, Max, Team or Enterprise. Team and Enterprise have artifacts on by default and an Owner can switch them off.
• Authentication: a claude.ai account via /login (Claude Tag sessions use the agent's identity). API keys, gateway tokens and cloud-provider credentials cannot publish.
• Provider: the Anthropic API only; not Amazon Bedrock, Google Vertex AI or Microsoft Foundry.
• Organisation policy: no customer-managed encryption keys, HIPAA or Zero Data Retention.
• Surface: the CLI, or the desktop app 1.13576.0 or later. Claude Tag can publish when both it and artifacts are enabled. Off by default in the Agent SDK, the GitHub Action and MCP-server contexts, and whenever CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC is set.

Claude Code loads the organisation policy from api.anthropic.com. If that fails (a proxy or web filter is the usual culprit) artifacts stay unavailable until it succeeds, retrying in the background. Ask IT to allow the host.

Turning artifacts off for yourself

Any of these works regardless of organisation settings:

• /config: switch off the Artifacts row, which writes "enableArtifact": false to user settings.
• A settings file: "enableArtifact": false (the older "disableArtifact": true still works).
• Environment: CLAUDE_CODE_DISABLE_ARTIFACT=1.
• Permissions: add Artifact to permissions.deny.

Once disabled via a --settings file, the environment variable or managed settings, no other settings file can re-enable them. A project's .claude/settings.json or .claude/settings.local.json can also set "enableArtifact": false (honoured from v2.1.242), but true there does not override a disable.

A bare WebFetch deny or ask rule does not affect artifacts. A WebFetch(domain:claude.ai) rule in deny or ask does apply to artifact reads. See Permissions.

Admin controls (Team and Enterprise)

Owners manage artifacts from claude.ai admin settings. Content is stored on Anthropic-operated infrastructure and visible only to authenticated members of the publishing organisation and whoever they share with, unless shared publicly.

• On/off: Organization settings > Artifacts, the Artifacts toggle. Enterprise orgs with role-based access can also set the Artifacts permission per role under Organization settings > Roles.
• Connector calls: Organization settings > Capabilities, Enable artifact connectors. This also covers artifacts made in claude.ai chats.
• Public sharing: off by default; enable External sharing under the Artifacts toggle. Turning it off later blocks existing public links without changing their audience, and re-enabling restores them.
• Retention: Organization settings > Data and privacy, with separate periods for private and shared artifacts.
• Audit log: publish, share and delete events appear under claude_artifact_*.
• Network allowlist: the viewer loads pages from a sandboxed *.claudeusercontent.com origin, so allow it alongside claude.ai. Google Fonts (fonts.googleapis.com, fonts.gstatic.com) is optional. Library CDNs (cdnjs.cloudflare.com, cdn.jsdelivr.net, cdn.tailwindcss.com, code.jquery.com, unpkg.com) have no fallback when blocked. Either way, block with a fast reject rather than a silent drop so pages are not left hanging. See Network configuration.
• Compliance API: GET /v1/compliance/code/artifacts lists artifacts, GET /v1/compliance/code/artifacts/{artifact_id}/versions/{version_id} fetches a version's content, and DELETE /v1/compliance/code/artifacts/{artifact_id} deletes one.

Related

• MCP
• Skills
• Prompt library
• Remote Control
• Permission modes