1> ## Documentation Index
2> Fetch the complete documentation index at: https://code.claude.com/docs/llms.txt
3> Use this file to discover all available pages before exploring further.
4
5# Share session output as artifacts
6
7> Artifacts turn Claude Code's work into live, interactive pages at a private URL you can share inside your organization.
8
9{/* plan-availability: feature=artifacts plans=team,enterprise providers=anthropic */}
10
11<Note>
12 Artifacts are in beta. They require a Team or Enterprise plan and a session signed in with [`/login`](/en/setup#authenticate). See [Availability](#availability) for the full set of requirements.
13</Note>
14
15An artifact is a live, interactive web page that Claude Code publishes from your session to a private URL on claude.ai. You open it in a browser, and it updates in place as the session continues. Share it from the page header when you want a teammate to see it too. For example, use an artifact to walk a reviewer through a pull request with annotated diffs, build a dashboard from session data, or keep an investigation timeline that fills in as Claude works.
16
17<Frame>
18 <img src="https://mintcdn.com/claude-code/kaHIYYMIYMYPxQg9/images/artifacts-viewer.png?fit=max&auto=format&n=kaHIYYMIYMYPxQg9&q=85&s=dbfd671cdb0d15f49f808b9e89778fe1" alt="An artifact open in a browser at claude.ai/code/artifact. The viewer header shows the artifact title acme-funnel-fix, a Share button, and the author avatar. The Share menu is open with the Always share latest version toggle, a version picker reading Sharing version 2, an Everyone at Acme audience selector, and a Copy link button. Below the header, the artifact page shows two mobile mockups side by side, a funnel chart, and a row of metric cards." width="2511" height="1890" data-path="images/artifacts-viewer.png" />
19</Frame>
20
21This page covers how to:
22
23* Decide [when to use an artifact](#when-to-use-an-artifact)
24* [Create](#create-an-artifact), [update](#update-an-artifact), and [share](#share-an-artifact) an artifact
25* Apply [prompting patterns](#what-you-can-build) for richer pages
26* [Apply your own design system](#improve-the-visual-design) so artifacts match your product's branding
27* Understand the [page constraints](#page-constraints) and [availability requirements](#availability)
28* [Disable](#disable-artifacts) or [manage artifacts for your organization](#manage-artifacts-for-your-organization)
29
30## When to use an artifact
31
32Use an artifact when terminal text is the wrong medium for what Claude produced: output that is easier to look at and interact with than to read line by line. Claude builds the page from anything your session can reach, including your codebase and data it pulls through your [connected tools](/en/mcp), so the page can show things that would take paragraphs to describe. For example, ask Claude to:
33
34* Walk a reviewer through a pull request with annotated diffs
35* Render a dashboard from data the session already pulled
36* Lay out several design or implementation options side by side
37* Keep an investigation timeline that fills in while a long task runs
38* Send a teammate a link instead of pasting output into Slack
39
40See [What you can build](#what-you-can-build) for prompts that match each of these.
41
42### What an artifact is not
43
44An artifact is a capture of work, not an application. It is one self-contained page with no backend, so it cannot store form input, call an API at view time, or serve multiple routes. For a hosted internal tool with a backend, deploy it on your own infrastructure instead. See [Page constraints](#page-constraints) for the full set of limits.
45
46## Create an artifact
47
48Claude may publish an artifact on its own when the output suits a page, or you can ask for one directly. To ask, name the feature or describe the visual output you want in plain language. A good candidate is anything easier to see than to read as text, such as an annotated diff, a chart, or a set of options to compare. The prompts below are two examples; see [What you can build](#what-you-can-build) for more patterns.
49
50```text wrap theme={null}
51Make an artifact that walks through this PR with the diff annotated inline.
52```
53
54```text wrap theme={null}
55Build a dashboard artifact of last week's deploy failures by service and keep it updated as you investigate.
56```
57
58Claude writes the page to an HTML or Markdown file in your project, then publishes it. Before publishing a new artifact, Claude Code asks for permission; it might say something like `Claude wants to publish "Deploy failures by service" (deploy-failures.html) to a private page on claude.ai`. Republishing an artifact you have already approved does not prompt again.
59
60Select **Yes** to publish. Claude prints the URL, and your browser opens to the new page. Press `Ctrl+]` at any time to reopen the most recent artifact from the terminal.
61
62Claude picks the artifact's title and an emoji for its browser-tab icon. Both appear in your [gallery of artifacts](#share-an-artifact) on claude.ai and in shared links, so ask Claude to use a specific title or icon if you want one.
63
64To stop the browser from opening automatically when a new artifact is published, set `CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0` in your environment.
65
66If Claude responds that it cannot publish, or writes a local HTML file without a link, the tool is not enabled for your session. Check the [Availability](#availability) requirements.
67
68## Update an artifact
69
70Ask Claude to revise the page, or let a long-running task republish as it makes progress. Claude edits the underlying file and publishes again to the same URL.
71
72```text wrap theme={null}
73Add a per-region breakdown below the summary chart and republish.
74```
75
76Anyone with the page open sees the update in place. Each publish becomes a version, and from the **Share** control in the page header you can choose which version viewers see.
77
78To update an artifact from a different session, give Claude the artifact's URL and ask it to revise. Without the URL, a new session always creates a new artifact rather than updating an existing one.
79
80```text wrap theme={null}
81Update https://claude.ai/code/artifact/5fbea6f3-... with today's numbers.
82```
83
84## Share an artifact
85
86A new artifact is visible only to you. Open it in your browser and use the **Share** control in the page header to grant access to specific people in your organization, or to everyone in it. The header names you as the artifact's author, so anyone you share it with can see who published the page. It also links to your gallery at [claude.ai/code/artifacts](https://claude.ai/code/artifacts), which lists every artifact you have created.
87
88Sharing stops at your organization. Viewers must sign in to claude.ai as a member of the same organization that published the artifact, and there is no option to make an artifact viewable outside it. To send the underlying content to someone outside your organization, ask Claude for the HTML file and share that file directly.
89
90Artifacts are viewable, not co-edited. People you share with see each version you publish but cannot change the page; you remain the only writer.
91
92## What you can build
93
94An artifact is a single HTML page, so anything you can express in HTML, CSS, and inline JavaScript is in scope. The patterns below come up most often.
95
96### Walk through a change
97
98Ask for a page that renders a diff or a design change with annotations beside the relevant lines, so reviewers can read your reasoning next to the code instead of reconstructing it from a description.
99
100```text wrap theme={null}
101Make an artifact that walks through this PR. Render the diff with margin annotations and color-code findings by severity.
102```
103
104### Compare alternatives
105
106Ask for several variants on one page so you can evaluate them against each other. This works for layouts, copy, API shapes, or implementation plans.
107
108```text wrap theme={null}
109Make 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.
110```
111
112### Tune with interactive controls
113
114Ask for sliders, toggles, or input fields bound to whatever you are adjusting, so you can explore values directly instead of describing them.
115
116```text wrap theme={null}
117Build 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.
118```
119
120### Bring the result back to your session
121
122An 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, so the result of interacting with the page flows back into the session instead of staying on the page.
123
124```text wrap theme={null}
125Make 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.
126```
127
128### Track work in progress
129
130Ask Claude to keep an artifact current while a long task runs, so anyone with the link can follow along without reading the terminal.
131
132```text wrap theme={null}
133Turn this migration plan into a checklist artifact. Check items off as you complete them and add a note for anything you skip.
134```
135
136## Improve the visual design
137
138Claude applies a built-in design skill when it builds an artifact, so pages get a deliberate palette, typography, and layout without extra prompting. That skill also looks for an existing design system in your project before choosing its own. To keep artifacts consistent with your product's branding, record your design tokens where Claude can find them, such as the project's [CLAUDE.md](/en/memory) or a theme file in your repository:
139
140```markdown theme={null}
141## Design system
142
143- Colors: primary #1a4d8f, accent #f59e0b, surface #f8fafc
144- Typography: Inter for body, JetBrains Mono for code
145- Spacing: 8px scale, 6px border radius
146```
147
148Claude treats your design system as higher precedence than its own choices, and your prompt as higher precedence than both. The heading and format above are an example; any clear list of colors, fonts, and spacing works.
149
150## Page constraints
151
152Each artifact is one self-contained page. Claude Code wraps the file you publish in an HTML document shell and serves it under a strict Content Security Policy (CSP), which shapes what the page can do.
153
154| Constraint | Effect |
155| :------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
156| No external requests | The CSP blocks scripts, stylesheets, fonts, and images loaded from any other host, along with `fetch`, XHR, and WebSocket calls. Claude inlines CSS and JavaScript and embeds images as data URIs so the page renders without any external request. |
157| No backend | An artifact is a static page. It cannot store data submitted through a form, authenticate viewers itself, or call an API at view time. |
158| Single page | Relative links do not resolve, because nothing is deployed alongside the page. For multi-section content, Claude uses in-page anchors rather than separate files. |
159| Source file types | The published file must be `.html`, `.htm`, or `.md`. Markdown files render as styled HTML. |
160| Rendered size | The rendered page must be 16 MiB or smaller. Large embedded images are the usual cause when a publish fails for size. |
161
162Generating an artifact uses output tokens like any other response, and a styled page is more token-intensive than the same content as terminal text. Inline CSS, JavaScript for interactive controls, and especially images embedded as data URIs are the main contributors. To reduce an artifact's token cost:
163
164* Prefer SVG, or HTML and CSS, for diagrams over embedded raster images
165* Omit interactivity you do not need
166* Have the page summarize large datasets rather than inline them in full
167
168## Availability
169
170Artifacts require every condition below. When one is not met, Claude writes a local HTML file or says it cannot publish instead.
171
172| Requirement | Available when |
173| :------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
174| Plan | Team or Enterprise. On Team plans, artifacts are on by default. On Enterprise plans, an admin [enables them](#manage-artifacts-for-your-organization) in claude.ai admin settings. |
175| Authentication | Signed in to claude.ai with `/login`. Sessions using an API key, [gateway token](/en/llm-gateway), or cloud-provider credential cannot publish. |
176| Model provider | Anthropic API. Not available on [Amazon Bedrock](/en/amazon-bedrock), [Google Cloud Vertex AI](/en/google-vertex-ai), or [Microsoft Foundry](/en/microsoft-foundry). |
177| Organization policy | Customer-managed encryption keys (CMEK), HIPAA, and [Zero Data Retention](/en/zero-data-retention) are not enabled for the organization. |
178| Surface | Claude Code CLI, or the Claude desktop app version 1.13576.0 or later. Off by default in [Agent SDK](/en/agent-sdk/overview), GitHub Action, and MCP-server contexts, and when [`CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC`](/en/env-vars) is set. |
179
180## Disable artifacts
181
182To turn artifacts off for your own sessions regardless of your organization's setting, use any of:
183
184| Method | Setting |
185| :----------------------------------- | :----------------------------------- |
186| [Settings file](/en/settings) | `"disableArtifact": true` |
187| [Environment variable](/en/env-vars) | `CLAUDE_CODE_DISABLE_ARTIFACT=1` |
188| [Permission rule](/en/permissions) | Add `Artifact` to `permissions.deny` |
189
190## Manage artifacts for your organization
191
192Admins on Team and Enterprise plans control artifacts from [claude.ai admin settings](https://claude.ai/admin-settings/claude-code). Artifact content is stored on Anthropic-operated infrastructure and is visible only to authenticated members of the publishing organization.
193
194### Enable or disable artifacts
195
196To enable or disable artifacts for the whole organization, go to **Settings > Claude Code > Capabilities** and use the **Artifacts** toggle. On Enterprise plans with role-based access control, you can additionally scope artifacts to specific roles: go to **Settings > Roles**, edit a role, and set the **Artifacts** permission under the **Claude Code** group.
197
198### Set a retention policy
199
200To set how long artifacts are kept before automatic deletion, go to **Settings > Data & privacy controls**. You can set separate retention periods for artifacts that are still private to their author and artifacts that have been shared.
201
202### Review the audit log
203
204Publishing, sharing, and deleting an artifact each appear in your organization's audit log under the `claude_artifact_*` event types, the same family used for artifacts created in claude.ai conversations.
205
206### Allowlist the viewer domain
207
208The viewer on claude.ai loads each artifact from a sandboxed `*.claudeusercontent.com` origin. If your organization restricts outbound network access, add that domain to your allowlist alongside `claude.ai`. See [Network access requirements](/en/network-config#network-access-requirements) for the full list.
209
210### List and delete artifacts with the Compliance API
211
212The [Compliance API](https://docs.claude.com/en/api/compliance) provides endpoints to list an organization's artifacts, retrieve a specific version's content, and delete an artifact:
213
214| Method | Endpoint |
215| :------- | :------------------------------------------------------------------ |
216| `GET` | `/v1/compliance/code/artifacts` |
217| `GET` | `/v1/compliance/code/artifacts/{artifact_id}/versions/{version_id}` |
218| `DELETE` | `/v1/compliance/code/artifacts/{artifact_id}` |
219
220For the request and response schemas, see the [Compliance API reference](https://docs.claude.com/en/api/compliance/code/artifacts).
221
222## Related resources
223
224* Browse [prompting patterns and workflows](/en/prompt-library) that pair with artifacts
225* Turn an artifact prompt you reuse into a [skill](/en/skills) so you can invoke it as a command
226* [Connect MCP servers](/en/mcp) so Claude can pull live data into an artifact
