GenAIHub
EN | PT
← Back to Technical Section

Artifacts in Claude

Live, interactive outputs — code, documents, diagrams, and apps — rendered inside your conversation

✨ Artifacts

Claude generates self-contained, renderable outputs — React apps, SVGs, Mermaid diagrams, HTML pages, and markdown documents — displayed live in a side panel you can preview, copy, or download.

Official Docs →

1. What Are Artifacts?

Artifacts are self-contained outputs Claude generates alongside a conversation. Instead of embedding code or long documents inside the chat, Claude renders them in a dedicated side panel where you can interact with, preview, copy, or iterate on the output — without polluting the conversation thread.

✨ Artifacts = Live preview + Self-contained output + Iterative editing

2. Types of Artifacts

Code

Any programming language — Python, JS, SQL, bash. Syntax highlighted and ready to copy.

def greet(name):
  return f"Hello, {name}!"

React / HTML Apps

Interactive components rendered live in the preview panel. Buttons, forms, charts — fully functional.

Diagrams

Mermaid flowcharts, sequence diagrams, entity-relationship diagrams — rendered instantly.

graph TD
  A-->B-->C

Markdown Documents

Reports, READMEs, specs, release notes. Rendered with full formatting — headers, tables, lists.

SVG Graphics

Scalable vector graphics — icons, illustrations, infographics — rendered and downloadable.

Spreadsheet / CSV

Structured data outputs rendered as tables — ready to copy into Excel, Sheets, or Notion.

3. Triggering & Iterating on Artifacts

Claude automatically generates an artifact when the output is self-contained and long enough. You can also prompt explicitly:

Trigger phrases

  • "Create a React component that…"
  • "Generate a Mermaid diagram of…"
  • "Write a markdown report about…"
  • "Build an interactive calculator…"

Iteration phrases

  • "Update the artifact to add dark mode"
  • "Add error handling to the function"
  • "Make the chart responsive"
  • "Add a new column to the table"

4. Sharing & Publishing Artifacts

Copy

Copy the raw source code or text to clipboard with one click

Publish Link

Generate a shareable URL so anyone can view the rendered artifact

Download

Download the artifact as a file (.html, .svg, .md, .py, etc.)

5. Best Practices

  • → Be specific about format — "as a React component", "as a Mermaid diagram", "as an HTML page" gives Claude clear rendering intent.
  • → Iterate, don't restart — reference "the artifact" in follow-ups so Claude updates the same output rather than creating a new one.
  • → Use for self-contained outputs — artifacts work best when the output can stand alone; conversational answers should stay in the chat.
  • → Publish to share quickly — use the publish link for rapid prototyping and stakeholder feedback without deploying anything.