M3: Artifacts — Mini-Apps Right Inside the Chat

Level: Free Duration: ~15 minutes You need: Free claude.ai account (from module 1)

What you'll accomplish

• Build a mini-app (calculator, landing page, or dashboard) in 5–10 minutes without writing code.
• Share it with a client via a Claude link or deploy it to free hosting.
• Learn the 6 Artifact categories and know exactly when to use each in your freelance work.

By the end you'll have a real published Artifact, ready to drop into a proposal.

What an Artifact is

An Artifact is any self-contained block of content that Claude generates and that can live outside the chat: an interactive React component, an SVG, an HTML document, a code snippet, a CSV spreadsheet, or a long-form text like a contract.

What makes it different isn't just that Claude generates it — it's that it generates in a separate side panel with a real-time preview. And since May 2025 you can publish with one click to claude.ai/share/... (public link, no login required).

The 6 Artifact categories

1. React components — interactive mini-apps with state, buttons, forms. The most powerful type.
2. SVG — vector graphics: icons, diagrams, simple infographics.
3. HTML — full static pages: landing pages, thank-you pages, email mockups.
4. Code — code snippets in any language, ready to copy.
5. Markdown — long-form documents (contracts, briefs, reports) with formatting.
6. CSV/text — tabular data, price lists, contact databases.

Use cases for freelancers

• Social media management: a 7-slide carousel as SVG with exact dimensions for Instagram.
• Design: a real-time pricing calculator for client quotes.
• Copywriting: a post-purchase thank-you page as HTML that the client can publish directly.
• Marketing: a metrics dashboard in React with manually pasted data.
• Client onboarding: an interactive onboarding form for new clients.

Step by step: create your first Artifact

1. Ask Claude to create an Artifact

Claude automatically detects when output should be an Artifact. But you can ask explicitly:

"Create a React Artifact with a pricing calculator for social media management services. Inputs: hours per month and hourly rate. Output: monthly and annual total with a visual breakdown."

2. Edit the Artifact

You'll see the code and preview in the side panel. Request changes in the chat:

"Change the primary color to #D97148. Add a percentage discount field."

3. Publish the Artifact

Click "Publish" in the top corner of the panel. Claude generates a claude.ai/share/... link that anyone can open without logging in.

Mini-exercise (15 minutes)

1. Ask Claude for an Artifact suited to your work (calculator, mini-landing, interactive FAQ).
2. Iterate twice with specific change requests.
3. Publish using the Publish button.
4. Share the link with a teammate or paste it in a test DM.

Current limitations

• Free: Artifacts available, Publish available.
• Size: very complex components (>500 lines) may get truncated.
• External APIs: React Artifacts can't call external APIs from the browser (CORS). For live data, fetch calls need to go server-side.