Categories
Tutorials

What is Artifacts in Claude 3.5 Sonnet?

Anthropic’s new feature, Artifacts, is pretty cool because it goes beyond what ChatGPT can do.

The hype captured my attention and after discovering what it does, I’d say it can help increase your workflow efficiency if you use AI for these supported uses:

  • Documents (Markdown or Plain Text)
  • Code snippets
  • Websites (single page HTML)
  • SVG generation
  • Diagrams and flowcharts
  • Interactive React components

I bolded three uses above because these are the two areas where they go a step ahead of ChatGPT. I’ll explain next.

What is Claude’s Artifacts?

Claude’s Artifacts gives you a preview window where you can see your code transformed into a graphic or a website.

It’s not mindblowing nor did it shock me, but I did exclaim about how it’s so much better than the current ChatGPT workflow.

Let’s say you want to generate a webpage with ChatGPT, and you want to preview it. Here are the steps:

  1. Prompt ChatGPT to generate a web page
  2. Copy the code into VS Code
  3. “Go Live” to launch a live server where you can see your website
  4. If you want something fixed, repeat the three steps above.

Steps 2 and 3 are burdensome, especially if you have many iterations.

That’s the pain that Claude’s Artifacts cuts out. Your workflow is more direct-to-result:

  1. Prompt Claude
  2. Preview in Artifacts window
  3. If you want something fixed, repeat first two steps.

How Claude’s Artifacts Saves You Time

The more iterations you need, the more the time saved using Claude’s Artifacts.

For example, I was creating a piano with interactive keys and a theme song player. Claude generated a React component.

The first iteration threw an error. So I told Claude,

got an error: Application error: a client-side exception has occurred (see the browser console for more information).

The next iteration could render but its keys were dead and theme songs wouldn’t play. So I told Claude,

f3 and below don't work
also, the themes don't work.

It managed to fix the theme songs, but some keys still didn’t work. But, being a free user, I hit the wall…

Claude’s Artifacts Creates Website

Here’s the prompt:

Create a website with this information: 
h1: An App Created By Claude + Artifacts/ChatGPT 
h2: Testing... 
p: [Claude/ChatGPT, please write something about yourself and Artifacts]
button: [Claude/ChatGPT, please create a button that onclick will change the background color to a random color]

at the bottom of the page use a <p> and say "Copyright Xuyun Zeng 2024"

Please delete “Claude + Artifacts” or “ChatGPT”, depending on which one you run it through.

Claude outputs this:

claude sonnet artifacts generates web page

ChatGPT outputs this and tells you “You can copy and paste this code into an HTML file and open it in a web browser to view the website.”

chatgpt generates webpage

Claude’s Artifacts Generates SVG

Draw an SVG which looks like the windows xp wallpaper with green grass, blue sky, fluffy white clouds.

Claude draws an SVG depiction of the Windows XP wallpaper.

claude sonnet artifacts generates svg

ChatGPT throws out some code and tells you to copy it to a HTML file to see it. I did that just for my dear readers:

chatgpt generates svg

Build Calculator In Claude’s Artifacts

roadside assistance calculator

Activate Claude 3.5 Sonnet Artifacts Feature Preview

If you aren’t getting the preview window despite running the exact same prompt, you might need to activate the beta feature.

Go to the left sidebar > hover over your profile picture > Feature Preview > Artifacts = On.

I’m on the free plan and it works for me.

Have a project in mind?

Websites. Graphics. SEO-oriented content.

I can get your next project off the ground.

See how I have helped my clients.