What are Claude Code artifacts? A clear guide for 2026

Alicia Kirana Utomo
Written by

Alicia Kirana Utomo

Katelin Teen
Reviewed by

Katelin Teen

Last edited June 21, 2026

Expert Verified
Illustration of a coding session publishing a dashboard artifact to a shareable link

So what is a Claude Code artifact, exactly?

The docs put it plainly: an artifact is "a live, interactive web page that Claude Code publishes from your session to a private URL on claude.ai." It updates in place as your session continues, and you share it from a button in the page header.

The key word is session. Claude Code builds the artifact using everything it already has open: your codebase, any connectors you have wired up over MCP, and the conversation itself. You don't stand up a server, wire a data source, or deploy anything. You describe what you want to see, and Claude renders it.

A Claude Code artifact open in the browser at claude.ai/code/artifact, showing a funnel dashboard titled acme-funnel-fix with the Share menu open and an Everyone at Acme audience selector, as shown in the Claude Code docs
A Claude Code artifact open in the browser at claude.ai/code/artifact, showing a funnel dashboard titled acme-funnel-fix with the Share menu open and an Everyone at Acme audience selector, as shown in the Claude Code docs

There is one line in the docs that tells you more about the design intent than anything else. An artifact is "a capture of work, not an application" (per the docs). It is one self-contained page with no backend. It cannot store what you type into a form, call an API when someone views it, or serve more than one route. That constraint is the whole point: it keeps artifacts cheap to produce and safe to share, and it stops them from quietly becoming production apps nobody is maintaining.

Claude Code artifacts vs the artifacts you already know

Here is where almost everyone gets confused, because "artifacts" has meant two different things at different times.

If you have used the Claude app, you have probably seen chat artifacts: the panel that pops open to the right of the conversation when Claude writes you a document, a chart, or a small React app. Those went generally available in August 2024 and work on every plan, even Free.

Claude Code artifacts are a separate, newer surface. Same name, different beast. The clearest way to see the difference is side by side.

A two-column comparison titled Two kinds of artifacts, contrasting chat artifacts (born in a Claude chat, public or org link, available 2024, all plans) with Claude Code artifacts (built from your coding session, private org-only link, beta in 2026, Team and Enterprise only)
A two-column comparison titled Two kinds of artifacts, contrasting chat artifacts (born in a Claude chat, public or org link, available 2024, all plans) with Claude Code artifacts (built from your coding session, private org-only link, beta in 2026, Team and Enterprise only)

And the same thing as a table you can scan:

DimensionChat artifacts (Claude app)Claude Code artifacts
Where it is bornInside a Claude conversationFrom a Claude Code session (CLI or desktop)
Built fromThe chat promptYour codebase, connectors, and conversation
SharingPublic link, embed, or org sharingOrg-only, no public option
PlansFree, Pro, Max, Team, EnterpriseTeam or Enterprise only
StatusGenerally available since 2024Beta, launched June 2026
Can store dataYes, on Pro and up (20 MB per artifact)No, it is a static capture
Typical useApps, tools, games, documentsPR walkthroughs, dashboards, audits

So when someone says "Claude Code artifacts," they almost always mean the new developer-facing one that ships with the Claude Code CLI and desktop app. That is the one this guide is mostly about.

How Claude Code artifacts actually work

The flow is short, which is the nicest thing about it. There is no build step and nothing to host.

A four-step pipeline showing how a Claude Code artifact is made: your session (codebase, connectors, conversation), Claude writes one HTML or MD file, publishes to a private claude.ai URL, then you share it inside your org with the same URL updating in place
A four-step pipeline showing how a Claude Code artifact is made: your session (codebase, connectors, conversation), Claude writes one HTML or MD file, publishes to a private claude.ai URL, then you share it inside your org with the same URL updating in place

Walking through it:

  1. Create. You ask in plain language, something like "make an artifact that walks through this PR with the diff annotated inline." Claude writes an .html, .htm, or .md file into your project, asks permission before publishing a new artifact, prints the URL, and opens your browser. It even picks a title and an emoji tab icon for you (docs).
  2. Update. Ask for a change ("add a per-region breakdown below the chart and republish") and Claude edits the file and publishes to the same URL. Anyone who has the page open sees the update in place. Each publish is a new version with full version history, so you can restore an old one any time.
  3. Share. A new artifact is visible only to you. The Share control in the page header lets you grant access to specific people or to everyone in your org.

That last step is where the headline limitation lives. Sharing stops at your organization. Viewers must be signed in to claude.ai as a member of the same org, and there is no public option at all. Artifacts are viewable, not co-edited, so you stay the only writer. If you really do need to send one outside the company, you ask Claude for the HTML file and share that file the old-fashioned way.

A couple of small but handy mechanics: press Ctrl+] to reopen the most recent artifact from the terminal, set CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 if you don't want your browser popping open every time (one of many environment variables Claude Code respects), and find everything you have made in the gallery at claude.ai/code/artifacts.

What you can actually build with them

The rule of thumb from the docs is to reach for an artifact when "terminal text is the wrong medium," where the output is easier to look at and click than to read line by line. The named use cases are the ones worth knowing:

  • Walk a reviewer through a PR with diffs annotated inline and color-coded by severity.
  • Render a dashboard from data your session already pulled.
  • Lay out several options side by side, like layouts, copy variants, or API shapes.
  • Keep an investigation timeline that fills itself in while a long task runs.
  • Run a license or dependency audit as a browsable page instead of a JSON dump.

Because the page can include sliders, toggles, and inputs (just no backend), you can also build little interactive things: a triage board with a "copy as prompt" button that hands text back to your terminal, or a checklist that ticks items off as a long task completes. Claude even applies a built-in design skill, looking for an existing design system in your project first, so the result doesn't look like raw Bootstrap. You can record your design tokens in your CLAUDE.md config and they take precedence (docs).

Claude Code itself runs across the terminal, VS Code, the desktop app, and the web, but artifacts publish from the CLI or the desktop app specifically.

The Claude Code desktop app showing the session sidebar with pinned and recent tasks, a worktree toggle, and a command input
The Claude Code desktop app showing the session sidebar with pinned and recent tasks, a worktree toggle, and a command input

The fine print: what an artifact can't do

This is the part worth reading twice, because the constraints define what artifacts are for. Each one is a single self-contained page wrapped in an HTML shell and served under a strict Content Security Policy (docs).

ConstraintWhat it means in practice
No external requestsThe CSP blocks external scripts, stylesheets, fonts, and images, plus fetch, XHR, and WebSocket. CSS and JS are inlined, images embedded as data URIs.
No backendIt is a static page. It cannot store form input, authenticate viewers, or call an API at view time.
Single pageRelative links don't resolve, so multi-section content uses in-page anchors.
File typesThe source must be .html, .htm, or .md.
Size limitThe rendered page must be 16 MiB or smaller. Big embedded images are the usual cause of a size failure.

One more practical note: generating a styled page uses more output tokens than plain terminal text, so a heavy artifact costs more. The docs suggest preferring SVG and HTML/CSS over raster images, dropping interactivity you don't need, and summarizing large datasets instead of inlining them. If your team is keeping an eye on spend, this is the same muscle as tuning your model configuration.

Who can use Claude Code artifacts right now

As of June 2026, artifacts are in beta and gated behind a short list of requirements. You need all of them (docs):

  • Plan: Team or Enterprise. On Team they are on by default; on Enterprise an admin enables them.
  • Auth: signed in to claude.ai via /login. API key, gateway token, or cloud-provider credential sessions cannot publish.
  • Model provider: Anthropic's API only. Not Amazon Bedrock, Google Vertex AI, or Microsoft Foundry.
  • Org policy: CMEK, HIPAA, and Zero Data Retention must not be enabled.
  • Surface: the Claude Code CLI or the desktop app (v1.13576.0+). Off by default in the Agent SDK, GitHub Action, and MCP-server contexts.

For admins, there is real governance here, which matters if you are rolling this out across a team. You can toggle artifacts under Settings > Claude Code > Capabilities, scope them to specific roles with Enterprise RBAC, set separate retention for private versus shared artifacts, and watch claude_artifact_* events in the audit log. There is even a compliance API for listing and deleting artifacts programmatically. If you are setting policy across an org, our guides to admin controls and Claude Code permissions cover the surrounding settings.

A quick history: how artifacts got here

It helps to see the whole arc, because "artifacts" has quietly grown for two years.

A horizontal timeline titled How artifacts evolved, with five points: June 2024 first preview, August 2024 generally available, June 2025 AI-powered apps, October 2025 MCP and storage, and June 2026 Claude Code artifacts highlighted at the end
A horizontal timeline titled How artifacts evolved, with five points: June 2024 first preview, August 2024 generally available, June 2025 AI-powered apps, October 2025 MCP and storage, and June 2026 Claude Code artifacts highlighted at the end

Artifacts started as a feature preview alongside Claude 3.5 Sonnet in June 2024, then went generally available on August 27, 2024 with "tens of millions" already created. By June 2025 they got their own space in the app and, more importantly, the ability to embed Claude's own intelligence, turning a static artifact into an AI-powered app. Anthropic showcased Rick Rubin's "The Way of Code" project, 81 meditations paired with interactive artifacts, as the flagship example.

The Way of Code, two side-by-side artifact versions: a black-and-white geometric pattern that becomes a vibrant colored version after the prompt asks to make it more colorful, as taken from Anthropic's announcement
The Way of Code, two side-by-side artifact versions: a black-and-white geometric pattern that becomes a vibrant colored version after the prompt asks to make it more colorful, as taken from Anthropic's announcement

That AI-powered version came with a clever billing twist that the community loved: usage of a shared app counts against each viewer's own subscription, not the creator's. As Simon Willison put it, "apps built as Claude Artifacts now have the ability to run prompts of their own, billed to the current user of the app, not the app author." Build a tool, share the link, and you don't foot the bill for everyone who uses it. October 2025 added MCP connections and persistent storage (20 MB per artifact, text only). Then, in June 2026, the new Claude Code surface landed.

For chat artifacts, the sharing story is also where the older surface is more generous. You can publish one to a public link that anyone can open with no account, get an embed snippet for your own site, or share inside your org.

The Artifact published dialog in the Claude app, showing a public claude.ai link, a Copy link button, an Unpublish option, and a note that once unpublished an artifact cannot be republished
The Artifact published dialog in the Claude app, showing a public claude.ai link, a Copy link button, an Unpublish option, and a note that once unpublished an artifact cannot be republished

There is one sharp edge worth flagging on the chat side: once you unpublish an artifact, the same artifact cannot be published again. You have to create a new one. Worth knowing before you click unpublish on something you have already shared widely.

What people actually make of them

The community reaction has been warm, with a consistent set of gripes. On the love side, the loudest theme is non-web-developers shipping working things from a prompt.

Reddit

"Claude Artifacts are mind-blowing to me. I'm a C/Python programmer, though my web development skills are very limited. So the fact that it just busts out these web apps is so much fun."

u/Longjumping-Gap-3254, r/ClaudeAI

The other recurring win is using artifacts to communicate, replacing slides, wireframes, and Miro boards for getting an idea across:

Reddit

"Mock-ups, data stories, wireframes, calculators, site maps, research. Normally use for temporary communication with a client. I use it a lot for lo-fi wireframes to ensure client and I are on the same page... Used to do this step in Miro."

u/GullibleSavings3621, r/ClaudeAI

The frustrations are just as consistent, and they map almost exactly onto the constraints above. The biggest one, especially for teams, is the lack of granular sharing controls:

Reddit

"Right now, when you share an artifact specifically, it's accessible to anyone internally who has an account and the link. From what I can tell, there's no way to limit access to a specific person or group."

u/Either-Difference839, r/ClaudeAI

And power users hit a ceiling on how much one artifact can do in a single shot, which is exactly why the Claude Code surface exists for bigger work. Simon Willison, who built a tool a day with artifacts for a week, was clear-eyed about the limit on Hacker News: "for one-shot apps like these there's a strict limit to how much you can get done purely through prompting in a single session." That gap is the honest one to keep in mind. Artifacts are for capturing and communicating work, not for shipping your next production service.

Where this leaves you, and where eesel fits

Claude Code artifacts are a smart addition: a low-ceremony way to turn a coding session into something a colleague can click. If your team is on Team or Enterprise and lives in Claude Code, try them on your next PR review or postmortem. Just go in knowing they are a capture of work, deliberately static and org-bound, not an app platform.

That last distinction is the one I care about most, because it is exactly the line between a page that shows you something and an agent that does something. An artifact renders a dashboard. It can't pick up a customer ticket, look up an order, and resolve it.

That action-taking layer is what we build at eesel. If you like the "describe what you want and get a working thing" feeling of artifacts, eesel applies the same idea to customer support: you connect your helpdesk and docs, set up an AI agent in plain language, and it drafts and resolves real tickets. The part artifacts can't offer (because they are static by design) is the part we lean on hardest: you simulate the agent against thousands of your past tickets before it goes live, so you see exactly what it would have done. One eesel customer, a mobility startup, had us resolving 73% of their tier-1 requests in the first month. It connects over MCP and 100+ integrations the same way Claude Code talks to your tools, and you can try it free.

The eesel AI helpdesk dashboard overview, showing connected integrations and ticket activity
The eesel AI helpdesk dashboard overview, showing connected integrations and ticket activity

Frequently Asked Questions

What are Claude Code artifacts in simple terms?
A Claude Code artifact is a live, interactive web page that Claude Code builds from your session and publishes to a private URL on claude.ai. Think of it as a way to turn terminal output, like a PR walkthrough or a dashboard, into something a teammate can actually click through. It is different from the chat artifacts you get in the Claude app.
Are Claude Code artifacts free?
No. As of June 2026 they are in beta and require a Team or Enterprise plan, plus a session signed in to claude.ai. Chat artifacts in the Claude app are broader and work on Free, Pro, Max, Team, and Enterprise. If you are weighing the cost of the plans that include Claude Code, our Claude Code overview walks through it.
How are Claude Code artifacts different from chat artifacts?
Chat artifacts are born inside a Claude conversation and can be published to a public link or shared in your org. Claude Code artifacts are built from your full coding session (codebase, connectors, and conversation), only ever shared inside your organization, and have no public option. See the comparison table above for the full breakdown.
Can I share a Claude Code artifact outside my company?
Not directly. Sharing stops at your organization, so viewers have to sign in to claude.ai as a member of the same org. To send one outside, you ask Claude for the underlying HTML file and share that file yourself. This org-only limit is the most common complaint people raise about artifacts.
What can you actually build with Claude Code artifacts?
Single-page things that are easier to look at than to read in a terminal: annotated PR walkthroughs, dashboards from session data, incident timelines, side-by-side option comparisons, and dependency or license audits. They cannot store data, call an API at view time, or run a backend. If you want an AI that takes real actions in your helpdesk instead of rendering a page, that is closer to what an AI agent does.

Share this article

Alicia Kirana Utomo

Article by

Alicia Kirana Utomo

Kira is a writer at eesel AI with a Computer Science background and over a year of hands-on experience evaluating AI-powered customer service tools. She focuses on breaking down how helpdesk platforms and AI agents actually work so that support teams can make better buying decisions.

Related Posts

All posts →
Claude Code terminal workflow with Anthropic logo on warm off-white editorial background
AI Tools

Claude Code review (2026): Anthropic's agentic coding tool, tested

We tested Claude Code across every surface and plan. Here's what the $17/mo Pro plan actually delivers, when the $100/mo Max plan makes sense, and our honest take on the rate limits.

Stevia PutriStevia PutriJun 4, 2026
Editorial illustration of Claude Opus 4.8, Anthropic's flagship AI model
AI

What is Claude Opus 4.8? A clear-eyed look at Anthropic's flagship model

Claude Opus 4.8 is Anthropic's latest flagship model. Here's what changed, what it costs, and what a smarter model actually means for AI customer support.

Riellvriany IndriawanRiellvriany IndriawanJun 17, 2026
Editorial illustration of Claude Opus 4.8 for business use
AI

Claude Opus 4.8 for business: what it changes, and what it doesn't

Claude Opus 4.8 is Anthropic's flagship model. Here's a practical, operator's read on what it means for your business, what it costs, and where it falls short.

Alicia Kirana UtomoAlicia Kirana UtomoJun 17, 2026
Two people speaking different languages with a live sound wave bridging them, illustrating Gemini 3.5 Live Translate
AI

What is Gemini 3.5 Live Translate?

Gemini 3.5 Live Translate is Google's real-time speech-to-speech translation model for 70+ languages. Here's what it does, how it works, and where it fits.

Riellvriany IndriawanRiellvriany IndriawanJun 17, 2026
Illustrated hero banner for an OpenAI Codex free access explainer, with terminal and code editor motifs
AI

OpenAI Codex free access, explained: what you actually get for $0

Is OpenAI Codex free? Yes, if you sign in with a ChatGPT Free account. Here is exactly what the free tier gives you, where the wall is, and the limits.

Alicia Kirana UtomoAlicia Kirana UtomoJun 18, 2026
A developer at a terminal directing Claude Code, an agentic AI coding assistant, through an explore-plan-implement-commit workflow.
AI tools

How to prompt Claude Code: a practical guide to better results

A practical guide to how to prompt Claude Code: be specific, plan before you code, give it a way to verify, and manage your context window like a budget.

Rama Adi NugrahaRama Adi NugrahaJun 17, 2026
Illustration of a person directing blocks of code that assemble themselves, representing vibe coding
AI

What is vibe coding? A plain-English guide for 2026

Vibe coding means describing what you want to an AI and letting it write the code. Here's what it is, where it came from, the risks, and when to actually use it.

Alicia Kirana UtomoAlicia Kirana UtomoJun 17, 2026
Claude Code VS Code extension hero illustration
AI coding

Claude Code VS Code extension: a complete guide (2026)

A practical 2026 guide to the Claude Code VS Code extension: install, features, the CLI question, pricing, and the gotchas real users hit.

Rama Adi NugrahaRama Adi NugrahaJun 5, 2026
Image alt text
Trending

A complete overview of the Claude Code plugin ecosystem

This guide will walk you through the whole Claude Code plugin ecosystem. We’ll get into what a Claude Code plugin is, break down its core parts, see how teams are using them in the wild, and cover some key limitations you should be aware of.

Stevia PutriStevia PutriJan 9, 2026

Ready to hire your AI teammate?

Set up in minutes. No credit card required.

Get started free