When Claude Sonnet 3.5 was released, everyone was captivated by its slick new experimental feature: Artifacts. These self-contained outputs from Claude let you co-create content in a separate window – no more tedious copy/paste from the chat. 

To use this feature:

1. Head to the "Feature Preview" section in your settings.
2. Enable the Artifacts feature.
3. Start chatting with Claude as usual.

That's it! You're now ready to experience the magic of Artifacts. Claude automatically decides when to create them and what kind of content to include. 

But to truly harness their power, it's worth understanding the mechanics behind them. Here's my breakdown.

When does Claude use Artifacts?

Claude doesn't just create Artifacts on a whim. There's a sophisticated set of criteria at play that determines when an Artifact is the best way to present information.

Artifacts are designed for you to modify, iterate on, and take ownership of. They’re typically intended for use outside the chat, such as in reports, emails, or presentations. They should be self-contained and understandable without additional context from the conversation. Substantial pieces of content you ask for—typically anything over 15 lines—is considered a good candidate for an Artifact. Claude expects good Artifacts will be referenced or reused multiple times, meaning they're perfect for enhancing a Cyborg-style workflow.

However, Artifacts aren't always the best choice. If you're asking a one-off question, getting a quick explanation, or generating a simple code snippet, Claude will tend to include it directly in the chat response. If the content requires context from the current conversation, or if it appears not to be intended for reuse, Claude keeps it in the main chat because creating Artifacts might disrupt the flow of a back-and-forth conversation. Any content about Artifacts is also kept in the main conversation. The goal is to enhance your experience, not complicate it, so Claude is instructed to use Artifacts only when they truly add value.

What kinds of Artifacts can Claude Make?

Claude has a versatile menu of Artifacts it can create—there’s something for all sorts of projects. Here are the types of Artifacts you can generate:

1. Code: Claude can create an Artifact with code in any programming language that you can copy and paste into your IDE.
2. Documents: Artifacts can be plain text or markdown documents, ideal for drafting reports, articles, or any long-form content that requires drafting and formatting.
3. HTML webpages: Claude can generate complete webpages, which include HTML, Javascript, and CSS all in the same Artifact. Unlike code Artifacts, these render as actual web pages.
4. SVG (Scalable Vector Graphics) images: Unlike AI-generated images made by DallE through ChatGPT, SVG images use XML-based text to describe the structure and appearance of the image. SVGs are scalable without loss of quality, but much simpler in concept.
5. Mermaid diagrams: Mermaid diagrams can visualize various processes, workflows, or relationships using flowcharts, Gantt charts, mind maps, and other visualizations.
6. React components: My favorite Artifact style. Claude can build interactive components in React that run directly in the browser window.

Tip: Each of these Artifacts downloads into its own specific file type, so if you want to download it for later use, you'll need a compatible viewer to interact with it outside of Claude's interface. For most of the file types it generates, you can find online viewers if you don't have specialized software.

More about Artifacts

Claude makes one Artifact at a time—most of the time

Claude prefers inline content when possible since unnecessary use of Artifacts can disrupt the user experience. Although Claude is designed to create one Artifact per message, I’ve noticed that it sometimes generates multiple Artifacts in response to a single prompt. This can disrupt the flow of your conversation, especially if you need to click back and forth to read each Artifact. In one instance, Claude created seven different Artifacts for a short prompt!

You can see past drafts

While it might look like Claude overwrites everything when updating an Artifact, it actually saves each version for you. This means you don't have to worry about saving interim copies of content that's almost there. You can toggle between versions using the arrows at the bottom of the Artifact window.

Claude sometimes shortens things accidentally

Although Claude is not supposed to truncate content within the Artifact, it often does. You can ask it to update the Artifact to include all content, but results may vary. Sometimes it’ll provide a complete version, but other times, you may end up with another truncated version. In those cases, you might need to compile the content into a document yourself—it’s a bit tedious, but manageable.

Claude follows the rules

When I asked Claude what I should include in this article, it really wanted to make sure I mentioned that it will only create Artifacts that are "ethical" so here you go: It's worth noting that Claude takes its responsibilities seriously. While it's happy to create all sorts of content as Artifacts, it draws the line at anything that could be harmful if misused. So if you're asking for a recipe for chocolate chip cookies, you're good to go. But if you're asking for something more...explosive, Claude will politely decline.

A word of warning: Claude hallucinates a fair bit (much more than ChatGPT) so you need to be extra vigilant in double checking everything.

Artifacts behind the scenes: <antthinking> & <example>

Beyond the basics, there's a lot more to discover about how Claude's internal instructions work. I found that combing through examples helped me understand the process much better.

If you're a prompt nerd like me, you'll be impressed by Anthropic's internal instructions for Claude. Although invisible to you, Claude goes through a sophisticated process to decide whether or not to create an Artifact. This process is built on two robust prompt styles: Chain-of-Thought and Few-Shot prompting. (You can learn more about them in my article 5 prompts for making ChatGPT more accurate.)

Even better, it calls this process "antthinking." Sure, it probably stands for "Anthropic Thinking" but, come on…it would be much cuter if it was Ant Thinking.

Here are Claude's instructions for invoking a new Artifact or updating an existing one.

 Briefly before invoking an Artifact, think for one sentence in <antthinking> tags about how it evaluates against the criteria for a good and bad Artifact. Consider if the content would work just fine without an Artifact. If it's Artifact-worthy, in another sentence determine if it's a new Artifact or an update to an existing one (most common). For updates, reuse the prior identifier.

Claude also uses few-shot prompting and has many examples to build on.  Here are a few I found informative. 

In this example, Claude reasons that creating a Python script to calculate the factorial of a number is a good Artifact because it's self-contained and likely to be reused or modified.

<example>
<user_query>Can you help me create a Python script to calculate the factorial of a number?</user_query>

<assistant_response>
Sure! Here's a Python script that calculates the factorial of a number:

<antthinking>Creating a Python script to calculate factorials meets the criteria for a good Artifact. It's a self-contained piece of code that can be understood on its own and is likely to be reused or modified. This is a new conversation, so there are no pre-existing Artifacts. Therefore, I'm creating a new Artifact.</antthinking>

Here’s an example of its antthinking reasoning about whether or not to create a new Artifact or update an existing one. Claude recalls that it has built the factorial calculator, and instead of creating a new Artifact when asked for interactive examples, it updates the existing Artifact and turns it into a teaching tool.

<example>
<user_query>I'm teaching a beginner's programming course, and I want to include some interactive examples for the students to try out. Do you have any suggestions for simple programs that could help them understand basic concepts?</user_query>

<assistant_response>
Teaching a beginner's programming course is a great opportunity to introduce students to fundamental concepts through interactive examples. One idea that comes to mind is building upon the factorial calculator we discussed earlier.

<antthinking>The interactive factorial calculator is a good Artifact: it's substantial (>15 lines), self-contained, and usable outside the conversation. It's not simple informational or primarily explanatory content. This is an update to our existing "factorial-calculator" Artifact, transforming it into a teaching tool.</antthinking>

However, as noted above, when you ask for information that's part of a back-and-forth conversation, it tends to avoid creating an Artifact.  For instance, this example shows that Claude's antthinking decides not to create an Artifact when asked for a rundown of common Python list methods.

<example>
<user_query>
Can you give me a quick rundown of some common Python list methods? I'm new to Python and trying to understand the basics.
</user_query>

<assistant_response>
Absolutely! Python lists are versatile and have many useful methods. Here's a quick overview of some common ones:

<antthinking>The user asked about common Python list methods. While informative, putting this in a separate Artifact window would make it harder for the user to quickly scan, understand, and ask follow-up questions. Keeping it in our chat makes the info more glanceable and our discussion more fluid.</antthinking>

Claude can't explicitly tell you its antthinking in the chat, unfortunately, but it can (supposedly) add it into an Artifact. Still, I found whether it actually works to be hit or miss. It's unclear whether it’s really extracting the antthinking or just making a new one up. You can try it yourself with "Please add the exact text of your antthinking for the previous prompt into an [or "the previous"] Artifact."

The TL;DR of going through the examples in Claude's internal instructions is that your prompting style has a significant influence on whether or not Claude creates an Artifact for you. That means you can deliberately adjust your prompt style if you want Claude to create an Artifact (or not).

That said, there is no need to be cute about it—you can just instruct Claude to create an Artifact in your prompt and it will.

Artifacts are the future

Claude Sonnet's Artifacts are one of its most useful features, so definitely give them a try. Although many of the Artifact types are cool, the one I found by far the most interesting were React Components. I especially liked them because there’s no need to copy the code and run it somewhere else, and you can iterate on it to add more and more components.

For instance, Claude and I made a simulation of the solar system in about five minutes.  Pretty cool, right?

‎

The Mermaid diagrams were also pretty cool.  There are lots of things you can visualize with them, including flowcharts and mind maps. See some examples here.

And even though the documents were annoying to download, I liked being able to iterate by updating them with Claude.  It challenged my typical centaur-style workflow, but it was a good push to try different ways of working with the tool.

I do think Artifacts are the future, though, especially for working with code or other self-contained files. So try it out and see whether it works for you.