What Are Claude Artifacts and How to Create Them
It’s no secret there’s been an explosion of AI platforms and tools. While ChatGPT, Copilot, and Gemini might dominate the discourse, many smaller companies are finding incredible ways to bring the power of AI to the broader public. One of those companies is Claude.ai.
On June 20, 2024, Claude announced their latest model, Claude 3.5 Sonnet. With this incredible model, they introduced a fantastic concept called Claude Artifacts. These artifacts enable people to share AI-generated output seamlessly and intuitively. People can also use these shared artifacts to collaborate and improve upon what others have done.
Let’s examine these Claude artifacts and how you can leverage them to create unique AI experiences. We’ll also look at five of the best artifacts people have made so far!
What Are Claude Artifacts?
The concept behind Claude Artifacts is simple: This system allows you to create a self-contained package of AI-generated work using natural language. You can then share these artifacts, iterate on them, and reference them in other conversations.
Think of an artifact as the output of an AI process. For example, you may ask Claude to create a simple image for use in a game. Claude cannot make a binary image like a PNG, but it can write the code for simple SVGs. SVGs are merely text files containing markup text to describe how to render the image.
If you ask Claude to create an SVG, you’ll get some code as output.
That output is the artifact.
You can then iterate upon that artifact within the same chat conversation. For example, you can ask Claude to modify the colour of the SVG or change its appearance.
You can publish the artifact output when you have perfected it. After publishing, you’ll receive a link. It is then internet-accessible, so please ensure that anything you publish does not contain confidential or proprietary information.
When someone opens the artifact link, they can remix or download it. Remixing means that Claude will import the artifact into a new chat session. Since artifacts are code snippets under the hood, Claude can easily import them into its context. You’ll then be able to extend and tweak the artifact as necessary.
Please note that you can unpublish an artifact. Once you do, it’s gone online forever. You cannot republish it if you change your mind.
In short, it’s a fantastic way to share AI output. It’s simple and seamless. These artifacts also make collaboration much more straightforward.
How to Create Claude Artifacts
Trying out Claude artifacts is remarkably simple. You do not even need a paid account to access this feature! All you need is a free account with Claude.ai.
The best way to illustrate the creation of these artifacts is to walk through an example.
First, you’ll need to enable the artifact experiment on your account. To do so, click the “Try it now” link in the promotional banner below your chat prompt.
Next, you’ll want to set the toggle to the on position.
After that, close the dialogue window. You should see an experiment indicator in your prompt text box if all goes well.
With artifacts enabled, let’s create one!
Suppose you want to create a simple HTML space game. For this game, you’ll need a spaceship image. Claude cannot create PNG or similar binary images for you as Stable Diffusion can, but Claude can draw simple SVGs (scalable vector graphics).
Let’s ask it for a spaceship and observe the output.
On the right side, you’ll notice an image displayed. That’s the artifact of this conversation. At the bottom, there will be an option to publish the artifact. Click that button to bring up this dialogue.
Click on “Publish & Copy Link.” Your artifact will now be visible to the world.
Here’s the link to the artifact created while making this little tutorial.
5 Cool Claude Artifacts to Try
Even though this feature was released recently, AI enthusiasts have already begun building some incredible artifacts. Some people have used Claude to design full games and other immersive experiences. Multiple artifacts are wowing people and showing how powerful these AI models are.
Here are five of the most astonishing Claude artifacts so far.
1. Flappy Chicken
Imagine an entire “Flappy Bird” clone built entirely with AI running in the browser.
That’s what an incredibly talented developer did with Flappy Chicken. The goal is simple: keep your chicken from hitting the poles using the spacebar.
It’s hard to understate just how impressive this achievement is. Collision detection works, and the game randomizes the levels to create a new experience each time.
Even though artifacts are code snippets, Claude renders them in a dedicated window that runs the entire artifact as single page HTML. In other words, when you create a Claude artifact with JavaScript, assets, and more, you can share that as a whole entity that just runs in the browser automatically.
You can try out this artifact here.
2. Virtual Piano
Are you the next Mozart? Find out with this excellent AI-generated virtual piano.
This example showcases one of the key features of Claude artifacts: the ability to create all-encompassing experiences. So far, we’ve seen visual examples, but Virtual Piano takes it to the next level by providing audio.
Claude artifacts do not include audio. So, how does this example work?
JavaScript includes an AudioContext capability. The AI created code that used this capability to play a note when the user either clicks on the piano key or presses the correct key on the keyboard.
You could expand upon this example to have AI programmatically generate music and other sounds in the browser.
If you want to play the piano, this Claude artifact is for you! I also shared this artifact in my AI newsletter, I’d love it if you signed up.
3. Pomodoro Timer
Artifacts are valuable for more than just fun and games. You can use them to create real-world utilities and applications quickly.
One example is a Pomodoro timer that someone made using Claude AI.
For those unfamiliar with the Pomodoro method, it’s a simple time-tracking mechanism. The idea is that you do focused work for specific intervals. Focus time is typically 25 minutes. After those 25 minutes, you take a break, typically for 5 minutes.
Every time you complete one of these focus-break cycles, you complete one Pomodoro.
People typically aim to do a certain number of Pomodoros in a day. For example, you might be looking to knock out an essay and use this method to focus for two hours (four Pomodoro cycles). Others use it for their entire 8-hour workday.
You can enhance productivity by structuring your work using these cycles.
One inspiring person used Claude 3.5 Sonnet’s conversational AI to create a simple web-based Pomodoro timer. Not only does it run everyone and is functional, but it also looks fantastic. Claude has style!
4. Lunar Lander
If you play games, you’ve likely heard of Lunar Lander. It’s a simple game where you pilot a rocket ship landing on the moon.
The objective of the game is simple – land the rocket softly. There are many variations of the game, but the player typically only has the option to initiate the engine thrust upwards. The engine thrust pushes the lander up, but it also costs fuel.
In some versions of the game, there is limited fuel, so players need to time the thrust right so that it breaks the lander’s fall for a soft landing while also not using too much fuel.
Hit the thrusters too early, and you’ll run out of fuel and crash. Hit the thrusters too late, and you’ll crash due to gravity and rapid acceleration downwards.
Someone used Claude 3.5 Sonnet to create a simple AI version of this game. It works decently well and evokes fond memories for those who played it as a kid.
You can try this AI generated content here!
5. Audio Visualiser
This example is awe-inspiring, as it’s hard to believe that AI could build this.
With this Claude artifact, you can upload a music file and have it visualise the beat. If you’ve used audio visualisers before, you know what to expect.
What makes this so impressive is that it runs self-contained in the web browser and that AI built it. The JavaScript clearly does some complex data analysis to produce these visuals from the sound waves the audio file generates.
Use Claude artifact’s preview feature to see these visualisations for yourself!
How Do I Use and Iterate Upon the Code Snippets in Artifacts?
Let’s suppose you want to iterate upon the artifacts listed above. Claude makes that easy!
You only need to look for the “Remix Artifact” button in the bottom right.
Click that button to create a new chat session with that artifact. Claude will take the output and put in a default prompt asking for three ways to improve it. You can try out those three suggestions or ask it to modify the artifact however desired.
See below for how this initial prompt looks. Note that clicking this link brings up the artifact window so you can see the output and the conversational AI chat log with prompts. You can then continue with this existing artifact to use it in a new creation or iterate upon it.
Note that since all artifacts are code snippets under the hood, you can look at the artifact’s source. You can put it in another AI application or modify it by hand.
Claude Artifacts: A Powerful New Way to Share Output from AI Models
Claude artifacts are a compelling way to share AI work. With a simple button press, you can share games, artwork, and more. People can take your creations and iterate on them to build something even better.
The examples above show how powerful this feature is. It is mind-blowing how good Claude 3.5 Sonnet is. Artifacts make this latest update that much sweeter.
If you want to try Claude artifacts, sign up for a free Claude.ai account. You’ll be amazed at what you can make!