Claude 3.5 Sonnet lets users work on generated outputs as though they were independent files — a step forward in large language model user interfaces.
What’s new: Anthropic introduced Artifacts, a feature that displays outputs in a separate window of Claude 1.5 Sonnet’s web interface, outside the stream of conversation that creates and modifies them. Artifacts can include documents, code snippets, HTML pages, vector graphics, or visualizations built using JavaScript.
How it works: Users can enable artifacts from the “feature preview” dropdown in their profile menu at Claude.ai. Then, asked to generate an output that’s likely to act as standalone content and undergo further work, Claude opens an artifact window next to the chat frame, populates it with an initial output, and further updates it according to subsequent prompts.
- Text or code artifacts are typically at least 15 lines long. Visual artifacts created using a programming language or markup can be viewed selectively as code or a rendered display. Users can interact with multiple artifacts (or multiple versions of the same artifact) and switch between them.
- For instance, asking Claude to “create an 8-bit crab” creates an artifact that shows a downloadable vector image of a crab. Ryan Morrison of Tom’s Guide used artifacts to create pixel art, a simple 2D game, and a tool that builds a family tree one relative at a time.
- Developer and designer Meng To showed a tool built with help from Artifacts that enables users to customize a diagram of a vector field in real time by adjusting sliders and menu options.
- Pliny the Prompter, who regularly shares jailbreaks on X, found what appears to be a part of Claude’s internal instructions concerning artifacts. The instructions suggest that Claude avoids rendering an artifact if a chat response will do, avoids creating new artifacts in favor of updating existing ones, renders one artifact per text unless requested otherwise, and deliberates silently about whether to create an artifact by generating text between specific XML tags that hide it from the user. (Artifacts themselves are enclosed in a different set of tags.)
Why it matters: Artifacts make working with a large language model more fluidly interactive. Large language models (LLMs) have long been able to generate code but, outside of AI-assisted development environments like GitHub with Copilot, executing generated code typically requires further steps such as copy-pasting the code into a development environment. The additional steps add friction for developers and confusion for non-developers. Keeping and running the code in a separate window makes for a convenient, low-friction experience. Likewise when generating images and other kinds of visual output.
We’re thinking: It’s rare when a user interface update makes a tool more useful for casual and hardcore users alike. It’s even more exciting to see it happen to an LLM!