Artifacts and canvases
A workspace beside the chat where the AI creates a standalone thing you can see, edit and reuse, such as a document, chart, small web page or interactive tool.
Also called: Artifacts · Canvas · side panel · live preview · documents in chat
Connections
Understand first
Ideas this one builds on.
Leads on to
Ideas that build on this one.
Related
Often used together or easily confused.
Resources that teach it
- The AI Fluency Index (garden)
- Claude 101 (garden)
- A guide to AI prototyping for product managers (garden)
- What people are vibe coding (and actually using) (garden)
- Use My /Human-Review Skill to Edit HTML and Markdown Files Visually (garden)
- Build Beautiful Slides with Claude Code in 12 Minutes (12 Formats + 3 Templates) (garden)
Competency
Find artifacts and canvases on the commons map ↗
You may know it from
- design a mock-up Something concrete enough to react to, cheap enough to throw away.
- consulting a draft deliverable on the table
In products
The same idea, under different names in different tools.
| Provider | What they call it |
|---|---|
| Anthropic | Claude Artifacts |
| OpenAI | ChatGPT Canvas |
| Gemini Canvas |
In plain words
In a normal chat, the AI’s work is buried in a scrolling conversation. Artifacts and canvases pull the output into its own panel: a document you can edit in place, a chart, a checklist, or even a small working app such as a budget calculator or a quiz. You can keep refining it, copy it, or share it.
You can ask for a one-page tool, try it, and say “make the totals update when I change a number.” For many people, this is the first software they have ever made.
Research on real conversations found that when AI produced polished, finished-looking outputs, people questioned its reasoning and checked facts less. The more professional it looks, the more deliberately you should check it.
Example
A training coordinator asks for an interactive checklist for new-hire first weeks, grouped by day, with tick boxes. She tries it as if she were new, spots a missing IT step, and asks for it to be added before sharing it.
How it connects
- A way of shaping outputs from prompting into usable objects.
- The doorway to vibe coding, where artifacts grow into real apps.
- A natural place to build the smallest useful version first.
Try it
Ask for a small interactive tool you would use, like a meeting-cost calculator. While it builds, write down one thing you expect it to get wrong. Then test it and check your guess.
Read this card as plain Markdown: /concepts/con-artifacts.md. Know a parallel from your own field, or a product that implements this? Add it.