TL;DR
Artifacts turn a Claude reply into a persistent side-panel deliverable you can edit, version, run, publish, and download — instead of scrolling a chat for “that good version” and pasting it elsewhere. As of June 2026, Artifacts run on every plan (Free, Pro, Max, Team, Enterprise), and you can embed Claude itself into an Artifact to ship an AI-powered app that anyone can use without an API key. The catch worth knowing: shared AI apps bill against each user’s Claude subscription, not yours. This guide covers the types, the exact sandbox limits, the billing model, and a build-and-ship loop that survives iteration.
What an Artifact actually is
An Artifact is a significant, self-contained output that Claude (claude.ai or the desktop/mobile app) renders in a panel beside the chat. Claude auto-creates one when the content is reusable and roughly 15+ lines — otherwise it stays inline. You then edit by chatting, flip through version history, copy the source, or download the file.
Supported Artifact types (as of June 2026):
| Type | What you get | Renders live? |
|---|---|---|
| Code (any language) | Editable source you copy out | No (source only) |
| Markdown / plain text doc | Formatted document | Yes |
| Single-page HTML site | Working page in the panel | Yes |
| React component | Interactive UI preview | Yes |
| SVG image | Editable vector graphic | Yes |
| Mermaid diagram | Flowchart / sequence / ERD | Yes |
A separate (newer) capability — file creation — lets Claude build real .docx, .pptx, .xlsx, and .pdf files you download. That shipped free to all plans on Feb 11, 2026, with a 30 MB per-file ceiling. It is not the same as a classic interactive Artifact; if you want a downloadable Office file, ask for it explicitly. See Claude file generation eats quota for the cost side.
Who this is for
Anyone shipping a real output from a chat: single-page web tools, calculators, comparison tables, polished READMEs, slide outlines as Markdown, Mermaid diagrams, SQL or regex you will keep tweaking — or a small interactive app you want to hand to non-technical people. If your current loop is “chat in Claude, then paste everything into Notion / VS Code / Google Docs,” Artifacts shortcut it.
Weak fits: free-form prose answers, quick lookups, and brainstorming, where the panel just adds friction.
The 2026 upgrade: AI-powered apps
The headline change since launch (Anthropic shipped embedded AI in Artifacts on June 25, 2025, and users have since created over half a billion Artifacts) is that an Artifact can now call Claude from inside itself. You describe an app — a flashcard generator, an adaptive coding tutor, a text adventure, a writing critique tool — and Claude wires the model in. Three things make this usable, not a toy:
- No API keys. The viewer never pastes a key; they authenticate with their existing Claude account.
- You don’t pay for other people’s usage. When you publish and share an AI-powered Artifact, each call counts against that viewer’s Claude subscription limits, not yours. Whether 10 or 10,000 people use it, your cost is zero.
- It’s free to publish on any plan. Publishing creates a public link; recipients without a Claude account can still view static Artifacts, and account-holders can remix (fork an editable copy).
Two advanced features sit behind paid tiers (Pro, Max, Team, Enterprise as of June 2026): persistent storage (state that survives across sessions, capped at 20 MB per Artifact, text-only) and MCP integration (connecting an Artifact to external services). Free-tier Artifacts are stateless between sessions.
What the sandbox can and can’t do
This trips people up constantly. A classic interactive Artifact runs frontend code in a sandboxed iframe. That means:
- No arbitrary external API calls and no backend / database / Node.js. The exception is calling Claude itself via the AI-powered-app path above.
localStorageandsessionStorageare blocked — reads/writes throw or silently fail. For temporary state, use ReactuseState; for state that must survive a refresh, you need the paid persistent-storage feature.- It’s a preview, not hosting. There’s no deploy step; to put it on the open web you publish the share link or export the source to your own host.
So: prototype and demo in the Artifact, then move production code to a real project or to Claude Code.
Build-and-ship workflow
- Spec the deliverable in one sentence, with format and constraints. Example: “Create an Artifact: single-file HTML pricing page, Tailwind via CDN, 3 tiers, no external CSS.” Vague asks (“make me a website”) produce generic output you rewrite from scratch.
- Wait for the panel. If Claude inlines the code in chat, reply: “Move this to an Artifact.”
- Iterate by named part, not vibes. “In the Pricing component, change the middle tier to $29 and add a ‘Most Popular’ badge” beats “make it nicer.”
- Force in-place edits. When Claude rewrites the whole file, push back: “Edit in place, don’t rebuild from scratch — show only the changed lines.” This preserves version history and earlier fixes.
- For an AI app, ask explicitly: “Make this an AI-powered app — when the user submits a topic, call Claude to generate 10 flashcards.” Then publish and test the share link in a private window to confirm it works without your session.
- Get the source out. Download via the panel menu, or copy the code, and store it in Git / Notion / Drive. Artifacts live inside the chat; if the chat is deleted, the work is gone (publishing does not back up the source for you).
Quality check before you trust it
- Does it open / render / compile with no manual fixes? If you have to debug before you can read it, the spec was too vague.
- Spot-check 3 facts, numbers, or links against your source. Claude can place plausible-but-wrong details inside a polished output.
- Test one edge case on interactive Artifacts — empty input, a very long string, a zero value — before relying on it.
- Flag human-judgment risks explicitly: image copyright, financial math, anything touching a live system.
FAQ
Do my viewers need a Claude account to use a shared AI app? To run an AI-powered Artifact, yes — calls count against their own subscription, so they sign in. To merely view a static Artifact (an HTML page, a doc), no account is needed.
Who pays when 1,000 people use my published AI app? They do. Each user’s calls hit their own Claude usage limits; the creator pays nothing for viewers’ usage. That’s the whole point of the no-API-key model.
Why does my code Artifact keep losing imports? Claude can truncate very long files. Ask for “the full file with every import,” or split it into multiple Artifacts. Anything past ~300 lines is also slow to debug in-panel — pull the source out.
Can Artifacts call external APIs or use localStorage?
A classic sandboxed Artifact can’t reach arbitrary external APIs and can’t use localStorage/sessionStorage. It can call Claude (the AI-app path). For cross-session state you need the paid persistent-storage feature (20 MB cap, text only).
What if the Download button gives a 0-byte file? Known issue — see Claude Artifact download fails / empty file. Fallback: copy the source straight from the panel.
Can I version-control Artifacts? Not inside Claude beyond its own version history. Export to Git after each meaningful change.
Common mistakes
- Regenerating from scratch each turn instead of asking for in-place edits — slow, and you lose earlier fixes.
- Not specifying the format up front, so Claude returns Markdown when you wanted HTML.
- Assuming a published share link backs up your source — it doesn’t. Export the code yourself.
- Expecting an interactive Artifact to hit your database or save data locally; the sandbox blocks both.
- Trusting calculations or data inside an Artifact without checking them against the source.