# How do you use Claude Artifacts to build a small app?

Date: 2024-06-28 · Author: Robert Scales · https://guidetoartificialintelligence.com/en/learn/use-claude-artifacts-build-small-app/

**Answer:** Turn on the Artifacts feature preview in Claude.ai, describe the small app you want in plain language, and Claude writes the code and runs it in a panel beside the chat, where you can try it immediately. You then improve it by conversation, one change per message, until it works the way you want.

Artifacts arrived on Claude.ai on June 20, alongside the Claude 3.5 Sonnet model. When you ask Claude for something substantial, such as a document, a diagram, a code snippet or a web page, the result now opens in its own window next to the conversation instead of scrolling past in the chat. For web code, that window does more than display text: it runs the page, so a calculator you asked for is a calculator you can click.

That makes Artifacts a gentle way into building small tools without installing anything. Simon Willison, a developer who tested it on launch day, noted that Claude can now build web pages and single-page apps and show them working right in the interface. Here is a complete beginner's build, start to finish.

## Step 1: Turn it on

Artifacts is a feature preview, which means Anthropic is still testing it and you switch it on yourself. In Claude.ai, open the account menu in the left-side panel, find the feature preview options, and enable Artifacts. Start a new chat afterward so the setting applies.

## Step 2: Describe the app

Be concrete about what goes in, what comes out and how it should look. Asking for a single self-contained HTML file keeps the result easy to save later.

```prompt
Build a tip calculator as a single self-contained HTML file
(HTML, CSS and JavaScript together, no external libraries).

Inputs: bill amount, tip percentage (buttons for 10, 15, 18 and 20%,
plus a custom field), and number of people.
Outputs: tip amount, total, and amount per person, updating as I type.
Round to two decimals. Show a friendly message instead of an error
if the bill is empty or the number of people is zero.
Design: clean, large text, works on a phone screen.
```

Within a few seconds, the artifact window shows the calculator. Type a bill of 84.50, choose 18% and split it four ways; with the arithmetic done correctly you should see a tip of 15.21, a total of 99.71 and 24.93 per person. Checking one case by hand like this is a habit worth keeping: the app looks finished long before you know it is correct.

## Step 3: Improve it by conversation

Each follow-up message produces an updated artifact. Change one thing per message, so that if something breaks you know which request caused it.

| Round | What you notice | What you send |
|---|---|---|
| 2 | The custom tip box accepts negative numbers | "Don't allow negative values in any field." |
| 3 | You want to round up the per-person amount | "Add a 'round up per person' checkbox that rounds each share up to the next dollar and shows the adjusted tip." |
| 4 | It should match your café's colors | "Use dark green (#1f5f4a) for buttons and a cream background." |
| 5 | You want French as well | "Add an EN/FR toggle that switches all labels." |

You can also ask questions about the code itself, such as "Explain how the rounding works," and Claude answers in the chat while the app stays open. Anthropic describes the larger code window and live previews as especially useful for reviewing front-end code, and that is the point: you see the result and the code side by side.

> **Try it:** Build the calculator above, then ask for one feature it doesn't have, such as a field for tax before the tip. Test the new feature with numbers you can check on paper before you trust it.

## What it can and cannot do

An artifact lives inside your conversation and runs in Claude's window. That suits calculators, quizzes, flashcards, simple games, unit converters and small data visualizations built from numbers you paste in. It is not a hosting service: other people cannot visit it as a website, and nothing is set up to store what users type or to manage accounts. Keep sensitive data out of it. For an app that must save information or serve many people, treat the artifact as a working prototype and a clear specification for whoever builds the real thing.

## How do you share or reuse what you made?

The simplest path is to save the code. Switch the artifact window to its code view, copy everything, paste it into a plain text editor and save it as `tip-calculator.html`. Because you asked for one self-contained file, double-clicking that file opens the working app in any web browser, with no installation. You can email it to a colleague, put it on a USB key for a café's tablet, or upload it to any ordinary web host to give it an address.

To reuse it inside Claude, keep the file and paste it back into a new conversation with your next request, for example "Here is my tip calculator; add a receipt view." If you use Claude's Projects feature, introduced on June 25 for Pro and Team plans, you can add the file to a project's knowledge so it is available in every chat in that project. On Team plans, you can also share a snapshot of the conversation to the project's activity feed, where colleagues can see how the app was built and borrow the prompts.

Whatever route you choose, test the saved copy outside Claude before you hand it to anyone, and read through the code once, or ask Claude to explain each section, so you know what you are sharing.

## Sources

- Claude 3.5 Sonnet: https://www.anthropic.com/news/claude-3-5-sonnet
- Collaborate with Claude on Projects: https://www.anthropic.com/news/projects
- Claude 3.5 Sonnet: https://simonwillison.net/2024/Jun/20/claude-35-sonnet/