X
Innovation

Why Claude's Artifacts is the coolest feature I've seen in generative AI so far

The Artifacts feature is now available to all Claude users across the Free, Pro, and Team plans - on desktop and mobile. Here's how it works and why it's such a game-changer.
Written by Lance Whitney, Contributor
Claude AI's artifacts in action
Screenshot by Lance Whitney/ZDNET

You can ask any of today's AI chatbots to help you design a web page, work with code, or write a report. But then you typically have to copy and paste the results into a separate program or file to see how they look, return to your conversation to tweak your request, and then keep going back and forth. How clumsy is that?

Also: How to use Claude (and how it's different from ChatGPT)

Now, Claude AI's new capability aims to streamline that process. With its newly built-in Artifacts feature, Claude AI can create and display the fully formatted results of your request in real time and side-by-side with your conversation.

Launched as a web-based preview in June, the Artifacts feature is now fully baked and available to all Claude users across the Free, Pro, and Team plans. You can also tap into Artifacts not only on the Claude website but in the iOS and Android apps.

"Artifacts turn conversations with Claude into a more creative and collaborative experience," Claude AI developer Anthropic announced on Tuesday. "With Artifacts, you have a dedicated window to instantly see, iterate, and build on the work you create with Claude. Since launching as a feature preview in June, users have created tens of millions of Artifacts."

Also: How does Claude work? Anthropic reveals its secrets

You can use Artifacts to create and visualize code snippets, flowcharts, graphics, websites, and interactive dashboards. A few examples cited by Anthropic include:

  • Developers can create diagrams from codebases
  • Product managers can generate interactive prototypes to test new features
  • Designers can conjure up visualizations for prototyping
  • Marketers can design campaign dashboards.
  • Salespeople can generate sales pipelines complete with forecasting.

Probably the best way to appreciate the power of Artifacts is to use the example of webpage creation. Let's say you want to generate a webpage based on a certain theme and description. Head to the Claude AI website or fire up the iOS or Android app. At the prompt, type your request, such as "Create a webpage about London with space for photos and maps and a numbered list of the top ten places to visit."

In response, Claude generates the necessary HTML and CSS code and then displays the formatted webpage so you can see how it looks. The generated page appears next to your chat so you can view and work with everything on the same screen.

Need to tweak the results? Just submit another request, and Claude will modify the page with the new information. In my example, I told Claude to add a description to each of the top ten places, and it regenerated the page with that in mind.

Also: Why you shouldn't buy the iPhone 16 for Apple Intelligence

At first, Claude displayed placeholders for the images and maps. I had to work with the AI for some time to get it to replace the image placeholders with royalty-free pictures and add an actual interactive map based on any free mapping API. So, as with any AI, you'll likely have to work with your original code or text to fine-tune the results. But seeing the results appear in real time makes the process quick, simple, and satisfying.

In the case of a webpage, you can easily switch between the raw HTML code and the finished page. You can also directly modify the HTML and CSS if you need to manually adjust the code. When done, you can publish your creation on Anthropic's Artifacts website where you and other people can check it out.

I've seen a host of developments in generative AI over the past couple of years. Some excited me, while others left me feeling blah. But Claude's new Artifacts feature is one of the first to inspire me to say: "Wow, that's really cool."

Editorial standards