Much like my real-life chats with humans, my conversations with Claude are long-running and filled with tangents. This is all fine and good until I need to revisit an earlier portion of our chat—like the code snippet or diagram I asked it to generate. It's not impossible to work with these outputs within the chat, but when they're sandwiched between other irrelevant text boxes, things get messy.
That's where Claude Artifacts save me from chaos. They allow you to work on substantial, standalone content in a separate window next to your main conversation.
Here's everything you need to know about how to use Claude Artifacts.
Table of contents:
What are Claude Artifacts?
Claude Artifacts are self-contained outputs that are generated from a Claude chat and appear in a dedicated window next to the main conversation.
Let's say you ask Claude to write an article about a given topic. It'll respond to your request in the chat and automatically display that article (the artifact) in a dedicated window alongside your chat.
How to use Claude Artifacts
Here's a quick summary of how to get started with Claude Artifacts (keep scrolling for more details).
Go to claude.ai, and log in or sign up (it's free).
Prompt Claude as you normally would. Claude will automatically detect if it should generate an artifact, or you can explicitly tell it to create one.
Once the artifact appears in a dedicated window next to your chat, you have a handful of options:
Enter a new prompt to modify it
Like or dislike the response
Get a new artifact with the same prompt
Download the artifact in Markdown
Copy the artifact
Save it as a PDF
Publish and share your artifact
Close the artifact
Now let's take a closer look at the finer details of using Claude artifacts.
1. Create your Claude account
To get started, you need a Claude account (it's free). Go to claude.ai, and sign up with your Google account or email address.
2. Prompt Claude to create an artifact
Chat with Claude as you normally would. Claude will automatically generate an artifact if the content is substantial. In this case, substantial includes content that's:
Over 15 lines
Complex and can stand on its own
Something you'll likely want to edit, iterate on, or reuse later
If Claude doesn't generate an artifact, you can explicitly prompt it to do so.
Note: If you're on a Team or Enterprise account, your account may have disabled artifacts. So if you can't generate artifacts, this is probably why.
3. Interact with your Claude artifact
Your artifact will appear in a dedicated window next to your main chat. From there, you have a number of options.
Below Claude's response in the main chat, you can:
Enter a new prompt. Tell Claude how you want to modify the artifact by entering a new prompt in the main chat.
Like or dislike the response. Click the Give positive feedback or Give negative feedback icon, which looks like a thumbs up or thumbs down, to let Claude know if the response was helpful or unhelpful.
Get a new artifact. If the output isn't quite what you're looking for, and you want to use the same prompt, click Retry.
Download the artifact. Click Download to download the artifact in raw Markdown.
In the dedicated artifacts window, you can:
Copy the artifact. Click the Copy icon (top-right corner) and paste it wherever you want to use it.
Save it as a PDF. There's no straightforward way to save your artifact as your PDF, but there is a workaround. Click the down caret (
⋁) next to Copy, and click Print as PDF. In the print settings, set the destination to Save as PDF, and then click Save.Publish and share your artifact. Click the down caret (
⋁) next to Copy, and click Publish to share it with anyone on the internet (your chat stays private). In the popup, click Publish & copy link, and share the link as you normally would.Close the artifact. Click X at the top of the artifact window to hide it.
Types of Claude Artifacts
Claude currently generates six types of artifacts:
Code snippets. Claude can create an artifact with code in all major programming languages, including Python, JavaScript, and C#. For larger projects, I recommend asking Claude to modularize your code by generating functions or classes to keep things organized.
Single-page HTML websites. Claude can generate single page websites using HTML (for structure), CSS (for styling), and JavaScript (for interactivity) all in the same artifact. This way, you can create anything from simple static pages to design-focused, interactive websites. You can even upload a reference—anything from a pencil sketch on a napkin to a Figma mockup—and ask Claude to generate the code based on it.
Scalable vector graphics (SVG) images. Claude can create scalable vector graphic (SVG) images, which is helpful if you need to create a brand logo or graphics for your site. I recommend keeping your image requests simple. Otherwise, expect to get some…interesting renderings.
Diagrams and flowcharts. Claude can generate artifacts containing diagrams, flowcharts, or Gantt charts in a matter of seconds using Mermaid. You can also upload your own draft diagram or chart and have Claude recreate it using Mermaid.
Interactive React components. Claude can create prototypes and build interactive, reusable UI elements. Let's say you have a customer satisfaction model. You can prompt Claude to create a simulator to calculate how much impact the various components have on overall satisfaction in various scenarios.
Build safely on Claude with Zapier
Claude Artifacts offer a powerful way to capture and share what Claude creates. But if you want Claude to act—not just respond—use Zapier.
With Zapier MCP, you can take action across 9,000+ apps directly from Claude (or any other AI chatbot). Access data from other apps, have Claude help you analyze it, and then send data from Claude back to your tech stack—all without leaving your chat. No credentials exposed to your model, no integrations to build—just your AI taking action across your entire app stack, safely. Learn more about how to automate Claude.
Zapier is the most connected AI orchestration platform—integrating with thousands of apps from partners like Google, Salesforce, and Microsoft. Use forms, data tables, and logic to build secure, automated, AI-powered systems for your business-critical workflows across your organization's technology stack. Learn more.
Related reading:
This article was originally published in November 2024 by Briana Brownell. The most recent update was in May 2026.
