Artifacts — Create Things While You Chat

Artifacts display content generated by Claude in a dedicated panel to the right of the chat. You can create documents, code, charts, and even interactive mini-apps while continuing the conversation.

Available on all plans, including Free. No programming knowledge required — just describe what you want in plain language.

What Are Artifacts?

In a normal chat, Claude's responses appear inline. With Artifacts enabled, substantial, self-contained content appears in a separate right-side panel instead.

How Are Artifacts Different from Regular Responses?

When Does Claude Create an Artifact?

Claude automatically generates an Artifact when content meets these criteria:

• Substantial length (roughly 15+ lines)
• Likely to be referenced or revised later
• Self-contained (makes sense on its own without the conversation)

Short responses and quick answers stay in the chat as usual.

Enabling Artifacts

If Artifacts don't appear, check your settings:

1. Click your account name/initials at the bottom left
2. Open "Settings"
3. Select the "Capabilities" tab
4. Toggle "Artifacts" on

Tip: Even with Artifacts enabled, short responses won't generate an Artifact. Use prompts that request substantial output, like "Write a detailed summary of..." or "Create a comprehensive plan for..."

Types of Artifacts

Documents (Markdown)

Reports, proposals, meeting notes, manuals — text-based documents with formatted headings, lists, and tables.

Examples: "Create a sales plan for our new product launch" / "Summarize last week's meeting notes"

Code

Python, JavaScript, HTML, CSS, and other programming languages. Non-engineers may not use this directly, but it powers the interactive apps described below.

HTML Apps (Interactive)

Web pages and mini-apps that run right in the browser. Click buttons, enter data, and interact — all without writing a single line of code.

Examples: Calculators, checklists, timers, simple games

SVG Images and Diagrams

Scalable vector graphics for flowcharts, org charts, icons, and infographics.

Examples: Business process diagrams, organizational charts, infographics

Mermaid Diagrams

Flowcharts, sequence diagrams, and Gantt charts generated from text using Mermaid.

Examples: Project timelines, system flow diagrams

Basic Operations

Creating

No special steps needed. Just ask Claude, and Artifacts are generated automatically based on content type.

Write a project proposal draft.
Topic: "Improving customer onboarding with AI"
Structure: Background / Objectives / Proposed Solution / Timeline / Budget Estimate

Editing Through Conversation

After an Artifact appears, keep chatting to refine it:

"Make section 2 more specific"
"Rewrite the whole thing in simpler language"
"Add an alternative budget scenario to the cost section"

Each revision updates the Artifact.

Switching Between Versions

As you make revisions, navigation arrows (← →) appear at the top of the Artifact panel. Click to browse previous versions.

Useful when the previous version was better.

Copy and Download

Buttons at the bottom right of the Artifact panel let you:

• Copy: Copy text to your clipboard
• Download: Save as a file — Word (.docx), PDF, Excel (.xlsx), PowerPoint (.pptx), etc., depending on content type

Sharing and Publishing

Share completed Artifacts by generating a link. Anyone can view and interact with shared Artifacts — even without a Claude account.

Click "Share" at the top of the Artifact panel to generate a public link. You can also get embed code for websites.

Note: Once you make an Artifact private, you cannot re-publish the same Artifact. You'd need to create a new one. Save important share links before making things private.

Use Case: Business Documents

Artifacts excel at creating proposals, reports, meeting notes, and manuals.

Creating a Proposal

Copy this prompt directly:

Create a business proposal for internal stakeholders.

Topic: Implementing an AI chatbot for customer support
Background: Customer inquiries exceed 500/month, and the team can't keep up
Goal: Automate first-response handling to reduce team workload by 30%
Audience: VP of Operations, IT Director
Structure: Background & Challenge / Proposed Solution / Expected Impact / Timeline / Cost Estimate

Formatting Meeting Notes

Paste raw meeting notes or a transcript and get organized minutes:

Below is a transcript from today's meeting.
Create formatted meeting minutes with this structure:
- Date, Attendees, Agenda
- Discussion points for each topic (bullet points)
- Decisions made
- Action items (with owners and deadlines)

[Paste transcript here]

Creating an Operations Manual

Create an operations manual for our expense reporting system.
Audience: New employees in their first year
Tone: Patient and step-by-step, accessible for people unfamiliar with the system
Key operations: Submitting receipts / Creating expense reports / Checking approval status

Tip: Vague prompts let Claude fill in the blanks with assumptions. Specify your audience, desired structure, and length upfront to minimize revisions.

Use Case: Data Visualization

Create charts and dashboards from your data — no programming needed.

Charts from CSV Data

Attach a CSV file and ask:

The attached CSV contains monthly sales data for January-December 2025.
Create:
- A bar chart showing monthly sales (with year-over-year comparison)
- A pie chart showing revenue by product category
- Use clear color coding so overall trends are easy to spot

Visualizing Numbers Directly

No CSV needed — just paste numbers:

Create a line chart showing monthly active users over time.
Add a target line at 5,000 users.

January: 3,200
February: 3,800
March: 4,100
April: 4,600
May: 4,900
June: 5,300

KPI Dashboards

Create a simple HTML dashboard showing these KPIs.
Display "Current" and "Achievement %" for each.
Color code: below 80% = red, 80-100% = yellow, above 100% = green.

Revenue: $850K (Target: $1M)
New Customers: 42 (Target: 50)
Retention Rate: 94% (Target: 95%)
NPS Score: 52 (Target: 50)

Tip: Don't like the colors or design? Just say "Use only blue and orange," "Make the background white," or "Increase the font size."

Use Case: Mini-Apps and Tools

The most surprising Artifacts capability: interactive web apps, built without writing code.

Building a Calculator

Create an HTML pricing calculator with:
- Service tier dropdown (Basic / Standard / Premium)
- Quantity input field
- Discount slider (0-30%)
- Real-time calculation of subtotal, tax, and total
- A "Print Quote" button
- Clean, professional design that works on mobile

Checklists and Forms

Create a new employee onboarding checklist app:
- Tabs for: Before Start / Day 1 / Week 1 / Month 1
- Checkbox for each task (grayed out when checked)
- Progress bar showing overall completion %
- Counter showing completed vs remaining tasks

Quizzes and Learning Tools

Create a security awareness quiz app:
- 5 multiple-choice questions (4 options each)
- Show correct/incorrect after each answer with explanation
- Display total score at the end
- Show "Pass" if score is 80% or higher

Questions:
1. What is the minimum recommended password length? → Answer: 12+ characters
2. How do you identify phishing emails? → Answer: Check the sender's domain
(add more questions)

Tip: Test your app right inside the Artifact panel — click buttons, fill in forms. If something doesn't work right, just say "The discount slider isn't updating the total — please fix it."

Artifacts Catalog — Use What Others Built

At claude.ai/catalog/artifacts, browse and use Artifacts published by users worldwide — for free.

What You Can Do

• Browse: Explore published Artifacts by category — tools, education, games, visualizations
• Use instantly: Open any Artifact to try it. No Claude account required
• Customize: Open a catalog Artifact while logged in and ask Claude to modify it for your needs

Publishing Your Artifacts

1. Click "Share" at the top of the Artifact panel
2. Select "Publish to catalog"
3. Add a title and description, then publish

Tip: Want to customize a catalog Artifact? Open it and tell Claude what to change: "Add a tax rate setting to this calculator." Claude will modify the original code for you.

Next Steps

• Claude Web Guide — Overview of all Claude Web features
• Deep Research — Delegate complex research for sourcing your documents
• Memory — Save your preferred Artifact styles so you don't repeat instructions