Ask Claude for a mortgage calculator and something slightly strange happens. You get a normal reply in the chat, and then a second panel opens on the right with sliders you can drag, numbers that update as you move them, and a small toggle to see the code underneath. That panel is an artifact, and for a lot of people it’s the moment Claude stopped feeling like a clever text box and started feeling like a tool.
Here’s what artifacts actually do, where they hold up, and the limits you’ll bump into around week two.
What Claude AI artifacts actually are
Anthropic introduced artifacts in June 2024, shipped alongside Claude 3.5 Sonnet. The reasoning behind them was almost embarrassingly practical: some answers aren’t really answers. A 200-line HTML file pasted into a chat window is technically a response, but you can’t use it there. You scroll, you copy, you paste into a text editor, you save it as .html, you open a browser, you spot a typo, and you start over.
Artifacts move that output into a dedicated window beside the conversation. The chat keeps the explanation. The artifact holds the thing itself, rendered live, with the source code one click away.
Preview, code, and versions
Three controls do most of the work. The preview tab shows what you built running in a sandboxed frame. The code tab shows the actual file, and you can edit it by hand if you’d rather fix a stray hex colour yourself than write another prompt. The version selector keeps every revision, so when v4 turns out worse than v3 you can step back instead of re-prompting from scratch.
Publishing and remixing
Finished artifacts can be published and shared as a link, which is how a lot of people are now sending interactive things to colleagues instead of screenshots. Anyone with the link can remix it into their own copy. That single feature quietly turned artifacts into a lightweight distribution channel for internal tools.
Getting one on purpose
Claude decides on its own when something crosses the threshold into artifact territory, and it’s usually a decent judge. Ask for a two-sentence explanation of compound interest and you’ll get plain text. Ask for a compound interest calculator and the panel opens.
When the judgement call goes the wrong way, a short nudge fixes it. “Build this as a single HTML artifact” works. So does “put the checklist in an artifact so I can keep it separate from the chat.” You can also specify the technology up front, which saves a round trip: “React component, Tailwind for styling, no external libraries.”
What people actually build in that panel
- Single-file HTML tools. Tip splitters, invoice builders, countdown timers, a pomodoro clock with a start button that genuinely works.
- React components. Pricing tables, admin dashboards with charts, form layouts, tab interfaces. React, Tailwind and a handful of charting and icon libraries are available inside the sandbox.
- SVG diagrams. A labelled cross-section of a plant cell, a floor plan, a custom icon set drawn to your brand colours.
- Mermaid flowcharts. Onboarding sequences, org charts, decision trees that render as clean vector graphics instead of ASCII mess.
- Formatted documents. Project briefs, meeting notes, a one-page summary of a lease, all in Markdown you can copy straight into Notion.
- Small games. Memory match, snake, a typing speed test. Not the useful category, but a good way to learn how the sandbox behaves.
One run-through, start to finish
I used artifacts recently to build a shared-expenses splitter for a flat of four. The first version took one prompt and got the maths right, but treated every person as an equal sharer, which is useless when one person pays for the internet and another buys all the cleaning supplies.
Version two added a per-person weight field. Version three added a category dropdown so rent, groceries and utilities could be split by different rules. Somewhere around version four I asked for a CSV export, and Claude built a download button using a Blob and a client-side link, which is the correct way to do it inside a sandbox with no server. Fifteen minutes of conversation produced something I would otherwise have built in a spreadsheet over an afternoon, badly.
The important part wasn’t the speed. It was that I could point at a specific behaviour (“the weights reset when I change the category”) and get that one thing fixed without breaking the rest.
Chat and artifact do different jobs
A lot of people treat the artifact panel as the main event and the chat as setup. It’s closer to the reverse. The conversation is where you think out loud, argue with yourself, and work out what the tool should actually do. If you want a sense of where Claude’s conversational side is strong and where it drifts, there’s a useful breakdown in what the Claude AI chatbot is actually good at. Artifacts inherit all of that reasoning and then give it somewhere to live.
The failure mode is jumping straight to “build me an app” with no thinking phase. You get something that looks plausible and solves the wrong problem, and unpicking it costs more than planning it would have.
Limits you’ll hit eventually
Artifacts run in a sandboxed frame with no network access. That means no fetching from an external API, no calling a database, no loading an arbitrary script from a CDN you found. The available libraries are a fixed set, and if you ask for one outside it, you’ll get a broken preview and a polite explanation.
There’s also a size ceiling. Push a single file past a few thousand lines and things get sluggish or truncated. State doesn’t persist between reloads either, so anything that needs to remember data has to use browser storage, and even that is fragile.
Free accounts can create artifacts, but the ceiling arrives faster than you’d expect. If you’re weighing up whether to pay, what you actually get on Claude AI free covers the real numbers rather than the marketing ones.
How it stacks up against the alternatives
ChatGPT’s Canvas and Gemini’s interactive tools solve overlapping problems, and the differences matter more than the feature lists suggest. Canvas leans toward document editing and inline rewriting. Artifacts lean toward building something that runs. If you’re deciding between them for daily work, this Claude vs ChatGPT comparison from someone paying for both gets into the practical gaps, and Claude vs Gemini for how you actually work covers the Google side of the same question.
Getting a usable artifact in one or two passes
Most disappointing artifacts come from vague prompts, not from model limits. A few habits close the gap:
- Name the stack. “Single HTML file, no frameworks” or “React with Tailwind” removes a whole category of miscommunication.
- Describe interactions, not appearance. “The total updates as I type” is more useful than “make it look modern.”
- Supply seed data. Three example rows beat a paragraph explaining what a row contains.
- Iterate on one behaviour at a time. Bundled requests produce sprawling diffs you can’t review.
- Switch to the code tab for trivia. Renaming a label is faster by hand than by prompt.
The habit that makes artifacts worth the trouble
The people getting real value out of this feature aren’t writing better prompts. They’re treating the panel as a place to keep things. A running set of small tools sits in their history: a unit converter for a specific industry, a checklist for a process they repeat monthly, a diagram they redraw every quarter with new numbers.
That’s the shift worth noticing. Before artifacts, a conversation with Claude evaporated when you closed the tab. Now some of it stays, in a form you can open, use, and hand to someone else without explaining what you meant. The next time you catch yourself building the same ugly spreadsheet for the third month running, that’s your signal. Describe it to Claude, ask for a single-file artifact, and spend the saved afternoon on something that isn’t a spreadsheet.