Artifacts

When an answer is something you look at rather than read, artifacts open a side panel next to the conversation and render it there: a working web page, an SVG diagram, a small React component, a chart.

How to use it

Toggle the artifacts badge under the prompt box, then ask for something visual or runnable:

• "Build a landing page for a coffee shop" renders the actual page.
• "Draw the OAuth flow as an SVG diagram" shows the diagram.
• "A React component for a pricing table" mounts the component live.

The panel shows the rendered result and the source code side by side. Switch between them with the tabs at the top.

Iterating

Keep talking. "Make the header darker", "add a third column": each follow-up updates the artifact in place, and you can flip back through earlier versions.

Getting it out

Copy the source or download it as a file directly from the panel. For multi-file projects, ask the model to consolidate into one file or export piece by piece.

When artifacts beat plain chat

Use artifacts when correctness is visual: layouts, diagrams, animations, interactive widgets. For pure logic or data work, the code interpreter is the better tool, since it actually executes code.