Claude Code Artifacts

1. What Is an Artifact?

Think of an Artifact as a mini web page made from Claude Code's work. Instead of Claude only printing text in the terminal, it can create a page you can open in a browser. The page can contain HTML, CSS, inline JavaScript, charts, tables, controls, annotations and other interactive UI.

What makes it different from normal terminal output?

Terminal output	Artifact
Mostly text	Visual HTML page
Read line by line	Can use charts, cards, controls and layout
Harder to share visually	Can share a browser link
Usually a snapshot of the response	Can be republished and updated at the same URL
Best for commands/logs	Best when seeing/interacting is easier than reading text

2. When Should You Use an Artifact?

The official documentation's main rule is simple: use an Artifact when terminal text is the wrong medium for the result.

Good prompt patterns

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.

Make an artifact with four different settings-panel layouts
and show the tradeoff for each one.

3. What an Artifact Is NOT

An Artifact is a single self-contained page. It is not a full application server.

Artifact is good for	Artifact is not designed to be
Interactive reports	A multi-route website
Dashboards	A backend application
Visual reviews	A server that authenticates users itself
Interactive prototypes	A replacement for your production infrastructure

4. Create Your First Artifact

Claude can decide that an Artifact is appropriate on its own, or you can explicitly request one. You do not need a special programming language or Artifact-specific syntax for the prompt. Describe the visual result you want in normal language.

Example 1 — PR walkthrough

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

Example 2 — Deployment dashboard

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

What happens behind the scenes?

Unless you specify a location, Claude writes the page to an HTML or Markdown file in a temporary directory outside your project and then publishes it.

Permission modes

Mode	What happens when Claude publishes
Auto	A classifier reviews the publish instead of showing the normal permission prompt.
Manual / Accept edits	Claude Code asks for permission before uploading and publishing the page.

After the first approved publish, Claude can republish the Artifact without asking in normal cases. It may ask again when the page gains runtime capabilities such as connector calls or downloads, or when sharing state changes.

5. Update an Artifact

Artifacts are not necessarily one-time snapshots. You can ask Claude to revise the page, and Claude can republish the updated version to the same URL.

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

Each publish becomes a version. Viewers with the page open can see updates in place. The Share control lets you choose which version viewers see.

Update from another session

If you start a different Claude Code session, give Claude the Artifact URL or attach it with /artifacts.

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

6. Find an Artifact Again

You do not need to keep the original terminal URL forever. Run:

/artifacts

This lists the Artifacts you own and the Artifacts shared with you.

Key	Action
o	Open the selected Artifact in the browser.
c	Copy its link.
Enter	Attach the Artifact to the current session.

The current documentation states that /artifacts requires Claude Code v2.1.208 or later.

7. Share an Artifact

A newly created Artifact is visible only to you. Open it in your browser and use the Share control in the page header when you want others to see it.

Sharing option	Who can see it?
Private	Only you.
Organization	Specific people or everyone in your organization on Team/Enterprise plans.
Public	Anyone with the link, when public sharing is available/enabled.

Plan-specific sharing

• Pro / Max: public link is the sharing method; public links can be opened without Claude.ai sign-in.
• Team / Enterprise: organization sharing is available; public sharing on Team/Enterprise is controlled by organization settings.

Let someone edit with you

On Team and Enterprise plans, a shared person can be changed from viewer to editor. An editor can ask Claude to update the Artifact using its URL or by attaching it through /artifacts.

8. Comments and Claude's Automatic Replies

On Team and Enterprise plans, people you share an Artifact with inside your organization can leave comments on the page.

The current documentation states that comment collection requires Claude Code v2.1.221+ and an organization-shared Artifact.

How comments reach Claude

• You can ask Claude to read the comments.
• An editor can use Send to Claude from a comment thread.
• An editor can mention @claude in a thread.

Read the comments on https://claude.ai/code/artifact/5fbea6f3-...
and make the changes the commenters ask for.

Automatic comment handling

With Claude Code v2.1.228 or later, a running session can watch a published Artifact for comments. Depending on permission mode, Claude can reply and even edit the Artifact automatically when an editor's comment asks for a change.

Situation	Claude behavior
Permission allows automatic response	Claude can read, reply and edit as appropriate.
Approval is required	Claude waits and asks for permission.
Plan mode	Claude pauses automatic replies until you leave plan mode and ask it to act.

The current docs also note a safety limit: after Claude handles 60 sent comments or thread activations on one Artifact within an hour, automatic replies pause until comments age out.

9. Pull Live Data with MCP Connectors

This is one of the most powerful Artifact features. An Artifact can call supported MCP connectors when a viewer opens the page, allowing the page to show current data instead of only the data that existed when Claude built it.

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

Very important: the viewer's account is used

When a published page calls a connector, the call runs through the viewer's own connected account, not the publisher's account.

Question	Answer
Whose connector is used?	The viewer's connected connector.
Does the page receive the viewer's credentials?	No. claude.ai makes the call on the page's behalf.
Does each viewer need their own connector?	Yes.
Can viewers approve access?	Yes, each viewer can be asked for permission before the first call.
Can the connector perform actions?	Yes, supported page controls can invoke connector actions using the viewer's account.

Connector limitations

• Only connectors from the viewer's claude.ai account qualify for page-time connector calls.
• Local MCP servers can help Claude while building the page, but the published page cannot call those local servers.
• Connector-backed Artifacts cannot be shared as public links.
• On Team/Enterprise, they can remain private or be shared within the organization.
• On Pro/Max, connector-backed Artifacts stay private because public sharing is incompatible with them.

If live data is empty

1. Check that the viewer has connected the required connector.
2. Reload if permission was previously declined.
3. Check whether organization administrators disabled Artifact connectors.
4. Check that the page uses tool names the connector actually exposes.

10. Offer a File Download

An Artifact can generate a file for the viewer, such as a CSV export of a table or a PNG generated from a chart.

Add a button that downloads this table as a CSV file.

Typical use cases

11. What Can You Build?

A. Walk Through a Change

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

Great for code reviews where the reviewer needs to understand both the change and the reasoning.

B. Compare Alternatives

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

Instead of discussing four ideas separately, put them on one page for visual comparison.

C. Interactive Controls

Build an artifact with sliders for the easing curve, duration, and delay.
Show the animation live as I move them.

This turns the Artifact into a small interactive experiment.

D. Bring the Result Back to Claude

Make a triage board with open issues as draggable cards across
Now, Next, Later and Cut. Add a "Copy as prompt" button that gives
me the final ordering to paste back here.

This creates a two-way workflow: Claude → interactive page → user decision → prompt → Claude.

E. Track Long-Running Work

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

The Artifact can become a visual progress board while the task continues.

12. Improve the Visual Design

Claude Code applies a built-in design skill when creating an Artifact, giving the page a deliberate palette, typography and layout. The current documentation says this requires Claude Code v2.1.182+.

Use your project's design system

If your project already has a design system in CLAUDE.md or a theme file, Claude can use it when creating Artifacts.

## 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 the project's design system as higher priority than its own default choices, while your direct prompt has higher priority than both.

External fonts

An Artifact can load a typeface from Google Fonts, which is the allowed external font source. Other fonts can be inlined with @font-face data and supplied with fallback stacks.

13. Design Canvas with /design

For UI mockups, screen flows, landing pages or posters, Claude Code provides /design. It drafts the design as artboards on one canvas and publishes the canvas as an Artifact using the research-preview Claude Design editor.

/design a settings screen for a mobile banking app

The current documentation states that /design requires an Artifact-enabled session and Claude Code v2.1.234+.

14. Artifact Page Constraints

Artifacts are intentionally constrained because they are hosted as a single self-contained page. Claude Code wraps the published file in an HTML shell and serves it with a strict Content Security Policy.

Constraint	What it means
Single page	One self-contained page; use in-page anchors instead of multiple routes/files.
No backend	The page cannot act as its own server or authenticate viewers itself.
External requests	Only specific approved external resources are allowed by the CSP.
Images	External images are blocked; embed images as data when needed.
JavaScript/CSS	Inline CSS/JS is supported; external resources are restricted.
Downloads	Use the Artifact download capability rather than ordinary browser download tricks.
Source type	Published source must be .html, .htm or .md with supported UTF encoding.
Rendered size	Must be 16 MiB or smaller.

Allowed external resource pattern

The current documentation says the page can load fonts from Google Fonts and scripts from selected public CDN hosts such as cdnjs, Tailwind CDN, jQuery CDN and selected jsDelivr paths. Other external images, scripts, stylesheets and fonts are blocked by the page's CSP.

Reduce Artifact token/size cost

• Prefer SVG or HTML/CSS diagrams.
• Do not add interactivity you do not need.
• Summarize large datasets instead of embedding everything.
• Avoid unnecessarily large embedded images.

15. Who Can Use Artifacts?

Requirement	Current documentation
Plan	Pro, Max, Team or Enterprise.
Authentication	Session backed by a claude.ai account; CLI/desktop users can sign in with /login.
Provider	Anthropic API; not available through Amazon Bedrock, Google Cloud's Agent Platform or Microsoft Foundry.
Organization policies	CMEK, HIPAA and Zero Data Retention must not be enabled for the organization.
Claude Code	Version 2.1.183 or later.
Claude desktop	Version 1.13576.0 or later.

Some contexts have Artifacts off by default

The documentation states that Artifacts are off by default in Agent SDK, GitHub Action and MCP-server contexts, and when CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC is set.

16. How to Disable Artifacts

Option 1 — /config

/config

Turn the Artifacts setting off. This writes:

"enableArtifact": false

Option 2 — Settings file

{
  "enableArtifact": false
}

The deprecated "disableArtifact": true also disables Artifacts.

Option 3 — Environment variable

CLAUDE_CODE_DISABLE_ARTIFACT=1

Option 4 — Permission rule

Add Artifact to permissions.deny.

17. Practical Real-World Examples

Example A — Spring Boot Deployment Dashboard

Imagine you are debugging a Spring Boot deployment. Instead of keeping all findings in terminal text, ask Claude to build:

Build an artifact showing:
- failed deployments by service
- error counts
- timeline
- likely root causes
- recommended next actions

Keep the page updated as you investigate.

The Artifact becomes a visual investigation board.

Example B — Frontend UI Comparison

Build an artifact with three versions of this dashboard:
1. compact
2. balanced
3. information-dense

Show the advantages and disadvantages below each version.

Example C — Code Review

Make an artifact that walks through the current PR.
Show the relevant diff and place reviewer notes next to each important change.
Group findings into critical, medium and low priority.

Example D — Live GitHub Board

Build a dashboard artifact showing our open pull requests.
Use my GitHub connector to pull the current list whenever the page loads.
Show status, author, age and review state.

18. Best Workflow for Using Artifacts

1. Ask for an Artifact when the result benefits from visual presentation.
2. Give Claude enough context to build the page.
3. Open and inspect the published page.
4. Ask Claude to revise it instead of rebuilding from scratch.
5. Share the correct version with the right audience.
6. Use comments when collaborative feedback is useful.
7. Use connectors only when live data is genuinely needed.

19. Common Mistakes

Mistake	Why it fails	Better approach
Using an Artifact for a backend application	Artifact is a single static/self-contained page.	Deploy a real application when a backend is required.
Adding multiple HTML routes	Artifacts are single-page.	Use in-page sections and anchors.
Using ordinary download links	Viewer blocks page-started downloads.	Ask Claude to use the download capability.
Expecting local MCP servers to work for viewers	Published pages cannot call your local MCP server.	Use supported claude.ai connectors for viewer-time live data.
Publishing private data publicly	Public links can be opened by anyone with the link.	Keep sensitive content private or share internally.
Assuming all viewers see the same connector data	Connector calls use each viewer's account.	Design live sections with per-viewer access in mind.
Creating huge pages	Rendered page has a 16 MiB limit.	Summarize data and reduce embedded assets.
Overusing JavaScript	More code increases complexity and token cost.	Add only the interaction that provides real value.

20. Artifact vs Other Claude Code Features

Feature	Main purpose	Easy mental model
Artifact	Present/share interactive visual output.	“Show the result as a web page.”
Skill	Reusable instructions/workflows.	“Teach Claude how to do this repeatedly.”
Plugin	Package and distribute Claude Code capabilities.	“Bundle my tools and workflows.”
Agent	Specialized Claude worker/configuration.	“Give this task to a specialist.”
MCP	Connect Claude to external tools/data.	“Give Claude access to another system.”

21. Quick Cheat Sheet

Goal	What to use
Create an Artifact	Ask Claude in natural language: “Make an artifact…”
Reopen latest Artifact	Ctrl+]
Find all Artifacts	/artifacts
Open selected Artifact	o in /artifacts
Copy Artifact link	c in /artifacts
Attach Artifact to current session	Enter in /artifacts
Disable in config	"enableArtifact": false
Disable with environment variable	CLAUDE_CODE_DISABLE_ARTIFACT=1
Design canvas	/design ...
Update existing Artifact	Give Claude its Artifact URL or attach it via /artifacts

22. Interview / Revision Questions

1. What is a Claude Code Artifact?
2. When is an Artifact better than terminal output?
3. Is an Artifact a full backend application?
4. How do you explicitly ask Claude to create one?
5. Can an Artifact be updated after publication?
6. How do you update an Artifact from another Claude Code session?
7. What does /artifacts do?
8. What are the different Artifact sharing modes?
9. Which plans support organization sharing?
10. How do editors modify an Artifact?
11. What are Artifact comments?
12. When can Claude automatically respond to comments?
13. How do MCP connectors work inside published Artifacts?
14. Whose connector credentials are used when a viewer opens the page?
15. Can connector-backed Artifacts be public?
16. How do Artifact file downloads work?
17. Why can't a normal blob: download be used?
18. What are the single-page and 16 MiB constraints?
19. What is /design?
20. How can Artifacts be disabled?

23. Practice Exercises

24. Final Memory Map

25. Final Takeaway

The most useful mental model is:

Claude Code
    ↓
does the work
    ↓
creates an Artifact
    ↓
interactive HTML page
    ↓
you review / interact
    ↓
Claude updates it
    ↓
share the result

Once you understand Artifacts, you can move beyond “Claude printed an answer” to “Claude created something I can actually inspect, interact with, share and keep updating.”