Interactive artifact

An interactive artifact is a live-rendered HTML / React / SVG / Mermaid surface inside an LLM chat — Claude Artifacts and OpenAI Canvas popularized the pattern in 2024-2026, turning chat from text into running mini-apps.

Pre-Artifacts, chat answers were text. Artifacts let the model emit a runnable React component, an SVG diagram, an HTML demo, a Mermaid graph — and the client renders it live in the sidebar. The user can iterate on it ('make the button blue'), version it, share it. Engineering challenges: sandboxed render (untrusted React code can't access auth tokens), library availability (which React libs ship in the sandbox?), persistence (artifacts survive across conversations), sharing (publish to a public URL). By 2026 the pattern is mainstream — Claude Artifacts, OpenAI Canvas, v0 (Vercel), Bolt, Lovable, Replit — and powers a new category of throwaway / shareable interactive prototypes.

When to use interactive artifact

• Building shareable interactive demos.
• Quick visualizations or one-off UIs.

Common mistakes

• Treating artifacts as production code — they're prototypes, not maintainable apps.
• Pasting auth tokens into artifacts — sandbox blocks most exfiltration but not all.

FAQ

Related terms

• Live preview — Live preview is the IDE / chat feature where rendered output (web page, React component, Mermaid diagram, SVG, plot) updates in real time as the user or LLM edits the source — Claude Artifacts, v0, Bolt, Lovable, Storybook are 2026 examples.
• Generative UI — Generative UI is the pattern where a language model dynamically chooses, configures, and renders UI components in real time based on the user's intent — instead of returning text, it returns a UI.

Last updated: 2026-06-01. Raw markdown: https://promtable.com/glossary/interactive-artifact.md.