What are Claude Artifacts?

Just like your real-life conversations with other people, conversations with Claude are often lengthy and full of digressions. Everything is fine until you need to review a part of a previous conversation – like a code snippet or diagram you asked it to generate. It's not impossible to work with these results directly within the chat window, but when they're sandwiched between other irrelevant text boxes, things get messy.

 

That's where Artifacts come in. They allow you to work on valuable, independent content in a separate window alongside your main conversation.

Here's everything you need to know about using Claude Artifacts.

What are Claude Artifacts?

Claude Artifacts are independent results generated from conversations with Claude and appear in a separate window alongside the main conversation.

Suppose you ask Claude to summarize a PDF file . It will respond to your request in the chat—for example, "I've created an article summary to focus on the most important aspects of [topic]" —and automatically display that summary (Artifact) in a separate window.

 

Claude automatically creates Artifacts when it determines that content is important enough to need to be separated from the main conversation. "Important" in this case could mean it contains more than 15 lines of content, is a complex piece of content that can stand alone, or is something you might want to edit, repeat, or reuse later.

How to enable Claude Artifacts

If you are using Claude 3.5 Sonnet, Artifacts will be enabled by default. Otherwise, here's how to enable Claude Artifacts:

1. Visit Claude.ai and log in or register (you can access Claude Artifacts with a free account).
2. Click on your profile in the sidebar.
3. Click on Settings .
4. In the Profile tab , scroll down to the Enable artifacts section . Toggle the switch on the right to turn it on.

 

How to use Claude Artifacts

1. Talk to Claude as usual.
2. Claude will automatically generate Artifacts for specific types of content (more on this later). The Artifacts will then appear in a separate window next to the main chat window.
3. Otherwise, you can instruct Claude to export the Artifact by explicitly stating that in the prompt.

How to edit Claude Artifact

You can edit your Artifact in a few ways:

1. Create a new Artifact . If the result isn't quite what you wanted and you want to use the same prompt, click Retry below Claude's last response in the main chat window.
2. Enter a new AI prompt . Let Claude know how you want to modify Artifact by entering a new prompt in the main chat window.
3. Improve a specific element . In the Artifact window, highlight the specific element you want Claude to edit. In the floating toolbar that appears, click Improve , and then enter your prompt.

 

No matter how you edit, Claude will create a new version of the Artifact—it won't overwrite previous versions. You can switch between versions using the arrows at the bottom of the Artifact window.

How to interact with Claude Artifacts

In addition to editing your Artifact, you also have several other options for interacting with it.

 

1. Copy the Artifact . Click the Copy content icon , which looks like a paperclip, and paste it wherever you want to use it. Note: If you copy an Artifact that contains a schematic, it will copy the schematic code.
2. Download Artifact . Click the Download to file icon , which looks like a downward-pointing arrow in a box.
3. Export Artifact . Click Publish to share your Artifact with anyone on the Internet (your conversation will remain private). In the pop-up window that appears, click Publish & Copy Link , and share your link as usual.
4. Hide Artifact . Click the X at the top of the Artifact window to close it.
5. Ask Claude to explain an element in Artifact . Select an element in the Artifact window (text or code). On the floating toolbar that appears, click Explain , and Claude will analyze the selected element in the main chat window.

Claude Artifacts

Currently, Claude has created 6 types of Artifacts:

1. Code snippet
2. Document
3. One-page website
4. Scalable vector graphics (SVG)
5. Diagrams and flowcharts
6. React interactive components

Code snippet

True to one of its main strengths (code generation), Claude can create an Artifact with code in all major programming languages, including Python , JavaScript , and C#. For larger projects, you should ask Claude to break your code down into modules by creating functions or classes to keep things organized.

 

Previously, you needed to run the code in an external environment to execute it. But Anthropic recently released an analysis tool in Claude that allows it to write and run JavaScript code. But first, you have to enable this feature.

1. Click on your profile in the sidebar.
2. Click on Feature Preview .
3. Flip the switch next to Analysis tool to turn it on.

Document

Because Claude has a large context window, it's a great AI productivity tool for handling large amounts of text and distilling it into streamlined content. Whether you ask Claude to create article summaries, travel itineraries, or any type of lengthy content, it will generate these artifacts as plain text or Markdown documents.

One-page website

Claude can create single-page websites using HTML (for structure), CSS (for styling), and JavaScript (for interactivity) all within the same Artifact. This way, you can create anything from simple static pages to design-focused interactive websites. For example, Claude helped create a working calculator website using only HTML and JavaScript with a single prompt. Pretty cool!

 

If you want more control over your website design, you can upload a reference document—anything from a pencil sketch on a napkin to a Figma mockup—and ask Claude to create the code based on it.

SVG image

Need to create a logo for your brand, or perhaps want to liven up your website with eye-catching graphics? With Claude, you can create scalable vector graphics (SVG) that are exported as Artifacts. In experience, Claude struggles more with complex images. Hopefully, this will improve, but for now, you should keep your image requirements simple.

Diagrams and flowcharts

If you want to visualize your workflow, Claude can create Artifacts containing diagrams, flowcharts, or Gantt charts in just seconds using Mermaid. You can also upload your own draft diagrams or charts and have Claude recreate them using Mermaid.

React interactive components

React components are the ultimate type of Artifact that Claude can create. Using these Artifacts, you can prototype and build interactive, reusable UI elements. For example, let's say you have a customer satisfaction measurement model. You could ask Claude to create a simulation software to calculate the impact of different components on overall satisfaction in various scenarios.