DEV Community

Cover image for What is this thing #1: Artifacts
Nanda Kresnatara
Nanda Kresnatara

Posted on

What is this thing #1: Artifacts

Recently, since using Claude, I've come to notice that it generates code, charts, and docs in an interactive way. For example, usually, when I asked Claude to generate a simple navigation bar, it would spoon-feed me with codes that if I paste it into my IDE, and test it myself, it would show a simple navigation bar as requested. However, the recent experience has been different. Instead of showing the code, it creates me a navigation bar that I can view it directly on the conversation along with the code to be downloaded.

A simple artifact of navigation bar
Here's another example of a CSV file

An artifact of a CSV file on game

In the csv file above, it has variations since I asked to generate products, users, orders, and rating.

The navigation bar and the csv files are known as Artifacts

An artifact is a structured output that an LLM, especially Claude, generates during your conversation — something meant to be used and modified, not just read

Now you might wonder: "Does that mean all generated text is an artifact?" Not quite. Regular text responses are just called AI responses. An LLM typically returns text you can read and copy, and that's about it. An artifact goes further than that. It's interactive, editable, and often exportable.

Think of it this way:
AI response = a text message someone sent you. You read it, maybe copy it.
AI artifact = a file someone sent you. You open it, edit it, and maybe download it.

Another example of Artifact

TinaCMS Installation Summarization on Markdown

In the screenshot above, I asked Claude to visit the TinaCMS docs and summarize the installation steps as a Markdown document. As you can see, the output isn't just text in the chat. You can view it in a dedicated panel, download it as an .md file, or even export it as a PDF.

Common examples of artifacts

  1. Code snippet
  2. Document
  3. Single-page HTML website
  4. SVG image
  5. Diagram and flowcharts
  6. Interactive React component

Conclusion

An artifact is what happens when an LLM stops telling you something and starts making something usable for you. It's a difference between AI sending you text and AI that hands you something you can actually use.

Top comments (0)