Artifacts and Canvas — the side panel that runs your work
Claude Artifacts and ChatGPT Canvas turned chat into a workspace. Code runs. Documents render. Edits happen in place. This is where AI stops being chat and starts being a tool.
::TL;DR · the whole lesson in three lines
- MOVEClaude Artifacts and ChatGPT Canvas turned chat into a workspace. Code runs. Documents render. Edits happen in place. This is where AI stops being chat and starts being a tool.
- DRILLBuild something you actually want today. Not a demo, not a tutorial example — a small tool that fits your real life. The drill is to go from idea to working tool to saved file in one sitting.
- WINA working tool renders in the Artifact or Canvas panel and you can actually use it inside the chat window.
::concept · what's actually happening
For the first two years of mainstream AI chat, every output was text in a scrolling transcript. If the model wrote you a webpage, you copied the HTML, pasted it into a file, opened the file in a browser, and only then saw the result. If it wrote you a document, you read it as a long wall of chat. The chat window was the only surface, and it was the wrong surface for most actual work.
read full concept · 4 more paragraphs →collapse concept ↑
Artifacts (Claude) and Canvas (ChatGPT) fix this by splitting the screen. Your conversation stays on the left. A second panel opens on the right and renders the thing the AI is building — a working HTML tool, a React component, an SVG diagram, a document you can edit, a code file you can scroll through. The AI writes into the panel, you point at parts of the panel and say change this, and the panel updates in place. Gemini does the same trick through its Workspace integrations, where the output lives in a Google Doc you can collaborate on directly.
What this unlocks is small custom software. Not enterprise apps — disposable tools that solve a specific thing you need today. A unit converter that knows the three units you actually use. A regex tester pre-loaded with your sample data. A calorie tracker shaped exactly like how you eat. A landing page mockup for the idea you had ten minutes ago. The barrier between I wish there was a tool for this and there is one now drops from hours to about ninety seconds. You describe it, the AI builds it, the panel runs it, you use it.
The mental model shift: chat is the operating room, the artifact is the patient. You don't keep rewriting from scratch each turn — you say make the button bigger and the same artifact updates. You can ask for explanations of specific lines, request a dark mode, swap the data source, add a feature. The artifact becomes a living document that the conversation iterates on. Most users discover this and immediately want to know why every chat doesn't work this way. The honest answer: it does now, but most people are still typing prompts like they're using the 2023 version.
The catch — and this is where most people get burned — is that artifacts live inside the conversation. When that conversation rotates out of your sidebar, gets archived, or hits a context limit and the older messages get summarized away, the artifact can go with it. The code that took you forty-five minutes to dial in disappears because you never saved it outside the chat. The AI did the work; you didn't take possession of the work. Treat every artifact you actually plan to use as something you copy out — into a file, into a gist, into a notes app — the moment it works.
::drill · do the thing
Build something you actually want today. Not a demo, not a tutorial example — a small tool that fits your real life. The drill is to go from idea to working tool to saved file in one sitting.
::L25 drill · copy-paste into any AI chat
Build me a working [tool type — e.g., unit converter / regex tester / habit tracker / tip calculator / color palette generator / markdown previewer] as a single self-contained HTML file I can run by double-clicking. Specifics: [list 3 to 5 details about how YOU need it to work — e.g., "converts between fluid ounces, milliliters, and cups," "shows match count and highlighted matches in real time," "tracks five habits with a 7-day view and dark mode," "splits the tip three ways with adjustable percentages"]. Render it in the Artifact/Canvas panel so I can use it right now. Keep all CSS and JavaScript inline — no external files, no CDN dependencies. After you build it, also paste the full HTML in the chat as a code block so I have a copy outside the panel.
::steps
- 01Pick a tool you genuinely want — something you'd actually use this week. Boring is fine; specific is better than clever.
- 02Open Claude (claude.ai) or ChatGPT (chat.openai.com). For Claude, Artifacts is on by default. For ChatGPT, you may need to type 'open this in Canvas' or click the Canvas button.
- 03Paste the prompt above with your bracketed slots filled in. Watch the right-side panel render the tool while the AI writes it.
- 04Use the tool inside the panel. Click buttons, type input, see if it actually does what you wanted.
- 05Refine in place: type follow-up messages like 'make the font bigger,' 'add a reset button,' 'use a darker background.' The same artifact updates — you don't start over.
- 06Once it works, copy the full HTML from the chat code block (not just the panel). Save it as a .html file on your desktop.
- 07Double-click the saved file. Confirm it opens in your browser and works offline, with no chat needed.
- 08Bookmark or filename it so future-you can find it. The whole point is you own a tool now, not a transcript.
::outcome · what should be true
- A working tool renders in the Artifact or Canvas panel and you can actually use it inside the chat window.
- You successfully iterated — at least one follow-up message changed the artifact in place rather than producing a new one from scratch.
- You have a saved .html file on your machine that opens in a browser without needing the chat conversation to exist.
- You can describe out loud what the tool does and why it's shaped the way it is, because you specified it yourself.
- Next time you think 'I wish there was a small tool for this,' your first move is to open Claude or ChatGPT instead of searching for an app.
::trap · the most common failure
The disappearing-artifact trap: you spend an hour refining a beautiful little tool inside the chat panel, never copy the code out, and then the conversation rotates out of your sidebar, hits a context limit, or you accidentally start a new chat. The artifact is gone — not because the AI deleted it, but because you treated the chat as storage. The artifact lives in the conversation, not in your files. Until you copy the code out and save it as an actual file on your machine, you don't own the tool — you're renting it from a conversation that will eventually end.
::other lessons at User level
Multi-turn conversations — letting the chat build a model of the task
At User level, a single prompt is rarely the win. A 5–10 turn conversation that builds a working model of your task is.
Documents in chat — when paste vs. upload matters
AI is at its best when reading something specific. Knowing how to feed it documents is the next leverage step.
Your first paid tier — which one, when, why
Free tier is enough for most humans for 30+ days. When you outgrow it, you pay for ONE tool. Not four.
Image-in-chat — paste the screenshot
Most people describe what they see when they could just paste the screenshot. The AI reads pixels better than you can describe them. Stop typing the picture.
Voice mode — when speaking beats typing
Real-time conversation with AI is a different shape than chat. Knowing when to switch modes is the actual skill.
Projects and Custom GPTs — stop re-explaining yourself
Every chat starts cold. A Project remembers your background, your style, your files. Create one for the work you actually do every week, and stop pasting the same context twelve times a day.
::part of the AtomEons /learn curriculum · 45 lessons · 5 levels · cc-by 4.0