After seeing so many posts on Twitter on how Anthropic Artifacts (Claude AI) can build mini apps, games, and even Figma plugins in no time at all, I had so many questions!

'What are Artifacts? How far can these things go? Do they replace developers? Or is it just more AI hype?'

If Artifacts can build a full-blown Figma plugin in 2hrs, what else is possible? Caught up in the hype myself, I dived in to see if it's possible to build a little game from start to finish with AI. Here's what I ended up with:

While I used Artifacts the groundwork, I discovered its limitations and when its better to use other tools. This post therefore aims to cut through any hype to show what Artifacts are, when it's good to use them, and plenty of fun use cases and examples!

Let's start with what Artifacts are:

What are Claude Artifacts?

As seen above, Claude Artifacts lets us create and instantly run mini-apps, games, and web tools - hugely reducing the work needed to create a functioning app. Unlike the code snippets and advice you get from ChatGPT or GitHub Copilot, here your ideas are built without leaving the chat. No separate IDE, project setup, or complex environments required.

Artifacts allow Claude to share substantial, standalone content with you in a dedicated window separate from the main conversation. Artifacts make it easy to work with significant pieces of content that you may want to modify, build upon, or reference later. - Anthropic

The way it runs the code it generates really lowers the barrier to creating and running software for anyone - both for experienced developers or people completely new to coding. At the same time, the code Artifacts blend a form of development process with the chat interface:

Ad

Letter

An AI-assisted newsletter builder for content creators, designers, and developers.

This article is supported by Letter.

---

Blending dialogue and development

Artifacts are additional content that sit alongside the chat interface in its own dedicated window. In this way, Claude follows the same conversational flow as ever, but is able to provide more complete answers such as actual web designs, runnable code, or documents.

Imagine a workspace where AI doesn’t just spit out snippets, but actively participates in the development process

Toggle on the feature and you're good to go:

Artifacts takes coding conversations a step further by providing runnable apps right in the chat. As you discuss and refine your ideas, the app is rebuilt, always ready for you to interact with the latest version.

Clever interface - does a lot in the background

In the background, Claude handles many typical development tasks, incorporating elements familiar to coders into the chat interface. While not an IDE, it has features such as version control, all within the context of your conversation. Some of these aspects include:

• Installation of dependencies – code artifacts install necessary dependencies such as React, Framer Motion, Shadcn etc

• Version History – Artifacts have version history so you can go back to previous iterations - especially useful when refining code!

• Publish and Remix – find interactive code artifacts from the community and run them in your own account. Ask a few more questions and customise someone else's artifact.

Learn more in the blog:

Introducing Claude 3.5 Sonnet

Introducing Claude 3.5 Sonnet—our most intelligent model yet. Sonnet now outperforms competitor models and Claude 3 Opus on key evaluations, at twice the speed.

Artifact Examples

Artifacts are ideal for small single-purpose applications such as dashboards, SVGs, forms (including the small components such as date pickers or volume sliders), visualizations, and a combination of all of those. Here's a few examples:

Design Generator Apps

A popular use case, especially for designery folk are things like SVG generators. Here Kevin Cannon creates a 'Dieter Dots web app', based on PJ Onori's originals:

🔘 Dieter Dots

You can play with the Artifact here. There's more like this around Twitter, but that's one of the cooler ones, where the remixable Artifact is shared. Daniel Destefanis even went onto turn this into a Figma plugin – not sure Claude is used here though:

🎨 Website color palette generator

Here's one more generator example for color palettes. I quickly came up with this in 10 mins, complete with color swatch pickers that adjust the text color to keep it accessible. This only took 3-4 prompts:

PDF to Dashboards

Another awesome use case of Artifacts is converting PDFs or any long-form content into interactive dashboards. In the following example, I've pasted in the entire book, Dreams by Henri Bergson (available on Project Gutenberg), and asked to generate a dashboard:

🌚 Bergson's Dreams Dashboard

This dashboard visualizes various aspects of Bergson's dream theory, comparing waking and sleeping states:

My prompts asked for a few features to make the app interesting and more useful/informative:

• Night toggle: to switch between the dream and awake states of a person (also changing dark mode to light mode)

• Explanations: the scales used in the app are estimations based on Bergson's book, so explanations and disclaimers are important

• Quotes: I also ask for some quotes to really tie in the visualizations back to Bergson's book.

Try it here.

Little Fun Design Detail Components

Another fun thing to do is make smaller interactive components. Here's an example based on the Tunnel Bear password field. The bears eyes follow the text position in the input fields, and close when the user is typing their password:

🐻 Bear Input Field Animation

The original (see below) has much better graphics, but the functionality of the Artifact is impressive in how it managed to follow the input field within a couple prompts.

👀 Googly Eyeballs

You can go even smaller, and just create single components. Here's an Artifact by Jess Rosenberg of googly eyes which actually prompted me (no pun intended) to try and make the above Tunnel Bear interaction:

Vizualizations and Explainers

Artifacts are also great for visualizations to present data and theories in different ways - from simple charts to more complex stuff. So many different theories can be explained interactively, but probably the main thing we need explaining is how to centre a div:

1. How to centre a div 🤓

I made this one in a few iterations - pretty cool how it's added dropdowns for method, and tabs to switch between the demo, code, and explanation:

There's even a ranking section to show which methods of centering a div are most effective. Try it and remix it here.

2. VC Liquidation Simulation 📈

In comparison to centering a div, this example from Ethan shows the explanation of a more complex theory with multiple variables:

That's pretty cool, but for sports fans, below is a simpler one I made from some football stats:

3. Ronaldo vs Messi stats comparison ⚽

I pasted in stats for Ronaldo and Messi and asked for some comparison charts - it's not the prettiest, but Artifacts gave some labelled visualizations made with recharts in React:

Try the published Artifact here. The prompt including the pasted data from messivsronaldo.app looked like this:

4. Visualizing Deep learning by elvis 🤖

Here's one more visualization that also highlights some limitations of Artifacts:

In the Twitter/X discussion, the creator mentions hitting Claud's message Capacity, and goes on to say how he moved the resulting HTML code to Gemini 1.5 Pro and GPT-4o to expand it for his project.

That's something I experienced myself, so it's important to know Artifacts are supposed to be single page apps and not anything larger:

Limitations: Artifacts are small, and self contained

When I first saw all the hype (and even after generating those mini apps myself), I thought anything was possible - no more developers needed? However, as projects start to grow beyond 4 or 5 questions, the limitations of Artifacts become more evident such as:

• Size limits: There's character limits for single message responses, so it's not possible to generate very long pieces of code, limiting code Artifacts to smaller apps

• Limited access to 3rd party modules: Sometimes Claude can't install a dependency, so the app cannot run within the chat, showing an error.

• Rewrites each time: Each time you ask for changes, it rewrites the entire app, often introducing new issues and bugs. You don't really know what'll come out

• Input limits: I couldn't paste a whole book in for Bergson's Dream Dashboard.

These constraints ensure each Artifact can be standalone and self-contained, without the need for additional context. This scope keeps them clear and focused, so they're easily shared and remixed.

You basically have to be able to get the entire contents of the code for the Artifact within a single prompt. - Toms Guide

I found Artifacts was a really good starting point and scratchpad to come up with (and actually see) bits of working code live. To go further with a single idea though, I had to jump into different AI tools, as the word limits stop Claude producing runnable Artifacts.

The Threshold of Usefulness

In all, as with many AI tools, the results are impressive (especially in a well constructed demo) but they can also be hit and miss.

With Artifacts, when you reach a point where more customisations are needed in an app or game, the environment become limiting because it's still tied to a chat with word count. As shown below, there's a ceiling on the usefulness of Artifacts depending on what you make:

Maybe this curve will change as new features arise with Claude aiming to shift from conversational AI to collaborative work environment:

This preview feature marks Claude’s evolution from a conversational AI to a collaborative work environment. It’s just the beginning of a broader vision for Claude.ai, which will soon expand to support team collaboration. In the near future, teams—and eventually entire organizations—will be able to securely centralize their knowledge, documents, and ongoing work in one shared space, with Claude serving as an on-demand teammate.

For now though, with some creativity, you can still do novel and amazing things within the messaging limit (like the example from Heather's below), but generally it's constrained to POCs and small form-based apps.

If you're a developer, it might even be seen as an alternative to v0 from Vercel for landing pages or interactive components like dropdowns and datepickers.

v0 by Vercel

Generate UI with simple text prompts. Copy, paste, ship.

Where to go beyond Claude

Anything that goes beyond something form-related (input -> output) though, and you have to start exploring the code yourself (or asking AI to!). I had to move back to a code editor to get use capabilities which are beyond chat interfaces:

• upload sounds, images/icons

• add new files and components

• Navigate and link files together

For the game I showed at the very beginning of this post, I found myself in Cursor - an AI powered IDE where you can continue leveraging Claude or even combine other AI models.

Websim is another tool to check out for creating larger websites and interactive environments that go way beyond the scope of Claude Artifacts.

Cursor

The AI Code Editor

websim.ai

null

I found it's best to use many different AIs, not just one!

Thanks for reading, for more sign up to the newsletter or find me on Twitter and LinkedIn.