Claude Artifacts: The Beginner's Guide

Last updated on: July 11, 2024

Anthropic launched Claude 3.5 Sonnet, a groundbreaking AI model that surpasses OpenAI's GPT-4o in most tests. Alongside the new model, Claude introduced several innovative features, including projects and the standout AI innovation of the year — Artifacts.

What are Claude Artifacts?

Claude Artifacts are outputs generated by Claude 3, an advanced AI model created by Anthropic. These can range from text, images, and data visualizations to more complex outputs like interactive content and automated reports. They are highly valuable across various industries, from marketing and content creation to data analysis. These may include:

  • Code snippets or scripts
  • Markdown documents
  • HTML pages
  • SVG images
  • Mermaid diagrams
  • React components

They are displayed in a dedicated window separate from the main chat, making it easy for users to modify, build upon, share or remix them.

How can I use Artifacts?

An Artifact created by Claude appears in a dedicated side window next to the main chat. This allows for easy access to view, copy, and manipulate the Artifact's content.

Here's how to work with Artifacts:

  • Request Claude to make changes or improvements to the content, and see these updates in the side window.
  • Changes do not affect Claude's original content memory, and you can view different versions using the selector at the Artifact's bottom left.
  • Open and view several Artifacts in one go by clicking the upper right slider icon, then choose the Artifact for Claude to reference, and resume your discussion.
  • Claude updates Artifacts based on your messages, with the side window reflecting the most current content.
  • Access the Artifact's code, copy content to your clipboard, or download it for later use. These features are located at the Artifact's bottom right.

How to Share Claude Artifacts?

When Claude creates an Artifact, it is displayed in a dedicated window to the right of the main chat. You can share an Artifact by:

  • Navigating to the Artifact in the Artifacts section on the right side of the screen.
  • Finding the "Publish" button associated with that particular Artifact version.
  • Clicking "Publish" to make this version of your Artifact available to the public.
  • Copying the provided link to share with others for viewing and remixing.

How to Remix Claude Artifacts?

The remix feature allows users to iterate on and improve any Artifact created by any user. To remix an Artifact:

  • View a published Artifact and click the "Remix this Artifact" button.
  • This will initiate a new Claude conversation with the content of the Artifact.
  • Interact with and modify the Artifact as desired.

Creative Application Examples (Prompts)

  • Fitness Tracker: Create an interactive app to track exercise and fitness data.
  • Recipe Roulette App: Generate an app that randomly selects recipes for users to try.
  • Breathing Exercise: Develop an interactive tool to guide users through breathing exercises.
  • Zen Garden Simulator: Design a simulator that allows users to create their own digital Zen gardens.
  • Language Flashcards: Produce flashcards to assist users in learning new languages.