Build a Dashboard with Claude Artifacts

Turn a CSV into an interactive dashboard using Claude Artifacts.

Introduction

⚡️ 30 Second Summary

You've probably wished you could hand someone a CSV and get back a clean, interactive chart without writing a line of code.

In this project, you will use Claude Artifacts to turn a plain CSV into a live, interactive dashboard, then refine it with follow-up prompts until it looks the way you want.

What You'll Build

An interactive dashboard built entirely inside Claude.ai, using Artifacts to render and iterate on your work without any code, setup, or paid services.

By the end of this project, you'll have:

  • 🔐 A working Claude.ai account and your first conversation.
  • 🎨 A simple HTML greeting card artifact that teaches the render and iterate loop.
  • 📊 An interactive React dashboard that visualizes a CSV using Recharts.
  • 🪄 A polished dashboard you refined with follow-up prompts for color, filters, and theme.
  • 💎 Secret Mission: A public shareable link to your finished dashboard. Want a complete demo of how to do this project, from start to finish? Check out our 🎬 walkthrough with the NextWork team

Do I need to pay to do this project?

No. Artifacts is available on every Claude plan, including the free tier, and publishing a shareable link is free too.

Not sure if this project is right for you? Check if it matches your goals

If you're up for a bit of a challenge, quiz yourself on the key concepts up ahead in this project.

Get Your Claude.ai Account Ready

This project turns a plain CSV into an interactive dashboard using nothing but natural-language prompts inside Claude.ai. Before you can prompt your way to a dashboard, you need a Claude account and a clear idea of where your Artifacts will appear.

In this step, we'll get your Claude.ai account signed in, open a fresh conversation, and make sure the Artifacts side panel is ready to render your dashboard.

In this step, get ready to:

  • Create or sign into a free Claude.ai account.
  • Start a new conversation.
  • Confirm Artifacts is enabled, and toggle it on if it isn't.

Create or Sign Into a Free Claude.ai Account

Your Claude.ai account is the workspace where every prompt, response, and artifact in this project will live. The free tier is all you need.

Head to claude.ai and pick the path that matches you:

✔️ I already have a Claude account

  • Click Log in and enter your email, or choose Continue with Google.
  • Once you land in the Claude.ai home screen, you're ready to go.

ⓧ I'm new to Claude

  • Click Sign up and enter your email (Claude sends a magic link) or choose Continue with Google.
  • Follow the prompts to verify your email and finish onboarding.

Do I need a paid plan?

No. The free tier is enough to complete this entire project. You do not need to enter a credit card.

💡 Pro tip: Start with a fresh quota

Free-tier usage resets roughly every 5 hours. Start this project with a fresh quota so you don't run out mid-dashboard.

🙋‍♀️ Hit an error signing in?

Ask our AI or ask in the Community.

Start a New Conversation

A new conversation gives you a clean slate so your prompts aren't mixed up with older chats.

  • In the left sidebar, click New chat.
  • Notice the model selector at the bottom right of the chat window. The default Claude Sonnet works great for this project, so you don't need to change anything.

What should I see?

An empty chat input in the middle of the screen, a model selector at the top, and your conversation list in the left sidebar. No need to change any settings yet.

Test the Artifacts Side Panel

When Claude generates substantial content (like a dashboard or chart), it opens in an Artifacts side panel to the right of your chat, not inline. Let's run a tiny test so you know it's working before you build anything real.

  • Paste this prompt into your chat and press Enter:
Show me a red square as an artifact.
  • Watch the right side of the screen for the Artifacts side panel to slide open with your red square inside.

Pick the tab that matches what you saw:

✔️ I see the red square in the side panel

You're all set. Artifacts is on by default for most new accounts, and your test confirms it. Move on to the next step.

ⓧ No side panel opened

No side panel? You just need to flip Artifacts on.

  • Click your name or initials in the bottom-left of the sidebar.
  • Select Settings.
  • Open the Capabilities section (sometimes labelled Feature Preview).
  • Flip Artifacts to On.
  • Return to your chat and resend the test prompt to confirm the Artifacts side panel opens with your red square.

Still no side panel?

Refresh the page and try the test prompt again. Why isn't my Artifacts panel opening?

Your Claude.ai account is live and you know exactly where your artifacts will appear. Next up, you'll feed Claude a real CSV and render your first artifact. A proper dashboard, not just a red square.

Build Your First Artifact

Your account is ready and Artifacts is on. But what does an artifact actually look like when Claude makes one? And how do you change it without starting over?

In this step, get ready to:

  • Prompt Claude to build a simple HTML greeting card.
  • Watch the artifact render live in the side panel.
  • Send a follow-up prompt and watch the same artifact update in place.

Prompt Claude for a Greeting Card Artifact

An artifact is a piece of substantial, self-contained content, like code, HTML, a React component, an SVG, or a full markdown doc, that Claude renders in a side panel instead of burying it inline in the chat.

  • Open a new chat in Claude.ai.
  • Paste this prompt into the chat box and press Enter:
Build me a simple HTML greeting card as an artifact. It should say "Hello, world" in a friendly, large font, have a soft pastel background, and a single button that does nothing yet. Keep it to one file.

Within a few seconds, a side panel slides open with a live preview of your greeting card.

No side panel opened?

Make sure Artifacts is toggled on in Settings, then resend the prompt — Claude sometimes returns a code block inline if Artifacts is off. Still no panel?

Claude automatically opens an artifact when the response is a substantial, standalone file you'd want to reuse, edit, or share. Short code snippets stay inline. A full HTML page gets its own panel so you can actually see it run.

What makes something an artifact instead of an inline code block?

Artifacts are for substantial, self-contained content, like anything you'd want to iterate on, reuse, or view rendered. Claude decides based on length, completeness, and whether the output is something you'd likely save or share.

Inspect the Artifact Panel

Every artifact panel has two views: a Preview that shows the live rendered result, and a Code view that shows the raw source. Flipping between them is how you confirm Claude built what you actually asked for.

  • At the top of the artifact panel, find the Preview and Code toggle.
  • Click Code (the </> icon on the right) to see the raw HTML Claude generated.
  • Click Preview (the eye icon on the left) to flip back to the rendered card.

Do I need to edit the HTML directly?

No. You can, but the whole point of this workflow is that you talk to Claude in plain English and let it edit the file. You only read the Code view to understand or verify what Claude did.

Send a Follow-Up Prompt and Watch It Update

The same artifact panel updates in place when you iterate. You don't get a new chat, a new file, or a new tab. You get a new version of the same artifact, stacked behind a version selector.

  • Back in the chat box, paste this follow-up prompt and press Enter:
Change the background to a warm gradient and make the greeting say "Welcome to my first Claude artifact!" Keep everything else the same.

What just happened?

This is the render → iterate loop. You prompt, Claude renders an artifact, you prompt again in plain English, and the same artifact updates. No copy-paste. No lost context.

You've seen the loop in action on something tiny. Next, you'll turn a boring CSV into a real interactive dashboard using the exact same loop.

Build an Interactive CSV Dashboard

You know the loop works on a greeting card. But the whole point of Artifacts for beginners is turning messy data into something you can actually look at. Let's drop real data in and ask Claude to make sense of it.

In this step, you'll paste a sample CSV into the chat and prompt Claude to build a full interactive React dashboard using Recharts, with charts, summary tiles, and tooltips.

In this step, get ready to:

  • Copy the sample CSV into your chat.
  • Prompt Claude to build an interactive React dashboard with Recharts.
  • Interact with the rendered dashboard by hovering, clicking, and filtering.

Write Your Dashboard Prompt

A clear, specific prompt is what turns a pile of rows into a real dashboard with summary tiles, a bar chart, a pie chart, and tooltips. We'll write the prompt first, then drop the CSV underneath it. LLMs like Claude read your message top-to-bottom, so giving them the task before the data helps them know exactly what to do with the rows when they get there.

  • Paste this prompt into your Claude.ai chat input:
Using the CSV I'll paste below, build me an interactive React dashboard as an artifact. Use Recharts for the charts. Include:

1. A row of 2-3 summary tiles at the top showing headline numbers (e.g., total spending, number of transactions, top category).
2. A bar chart of total spending per month.
3. A pie or donut chart of spending by category.
4. Hover tooltips on every chart.

Make it clean and readable. Use the data exactly as it is. Don't invent extra rows.
  • Do NOT press Enter yet. You'll add the CSV right below this prompt in the next substep.

Why are we asking for Recharts specifically?

Recharts is a charting library that's pre-loaded in the Artifacts React runtime, so Claude can use it with zero setup. Naming it in your prompt avoids Claude reaching for a library that isn't available.

Paste the CSV Below Your Prompt

Artifacts can work with data you type, paste, or upload. For this project, we'll paste a sample spending CSV directly into the chat so Claude has real rows to visualize.

  • Copy the CSV block below in full.
date,category,amount_usd,notes
2026-01-04,Food,42.80,Groceries
2026-01-07,Transport,18.50,Subway pass top-up
2026-01-09,Subscriptions,9.99,Streaming
2026-01-12,Entertainment,24.00,Movie night
2026-01-15,Utilities,78.40,Electricity
2026-01-18,Food,31.20,Groceries
2026-01-22,Transport,12.75,Rideshare
2026-01-26,Food,58.10,Dinner out
2026-01-29,Subscriptions,14.99,Cloud storage
2026-02-02,Utilities,64.20,Internet
2026-02-05,Food,46.30,Groceries
2026-02-08,Entertainment,32.00,Concert ticket
2026-02-11,Transport,22.40,Rideshare
2026-02-14,Food,72.00,Restaurant
2026-02-17,Subscriptions,9.99,Streaming
2026-02-20,Food,38.90,Groceries
2026-02-23,Utilities,55.80,Electricity
2026-02-26,Entertainment,18.50,Streaming rental
2026-03-01,Transport,18.50,Subway pass top-up
2026-03-04,Food,44.60,Groceries
2026-03-07,Subscriptions,14.99,Cloud storage
2026-03-10,Entertainment,28.00,Game pass
2026-03-13,Food,33.10,Groceries
2026-03-16,Utilities,81.20,Electricity
2026-03-19,Transport,15.00,Rideshare
2026-03-22,Food,52.40,Dinner out
2026-03-25,Entertainment,40.00,Event ticket
2026-03-28,Food,36.20,Groceries
2026-03-30,Subscriptions,9.99,Streaming
  • Paste the full CSV into your chat input on a new line below your dashboard prompt.
  • Press Enter to send the full message.
  • Watch the Artifacts side panel slide open on the right and start streaming React code.
  • Wait for Claude to finish. The panel will switch from the code view to a rendered preview with your charts and tiles.

Can I upload a .csv file instead?

Yes. Click the + or paperclip icon in the chat input and attach a .csv file from your computer. Pasting is friction-free for this project, but either works.

✔️ My dashboard rendered

You should see at least 2 summary tiles at the top and two charts below them, all populated with the spending data from your CSV. Nice work, your dashboard is live.

ⓧ I see an error or blank panel

That's okay! Let's troubleshoot:

  • Check the Artifacts panel for a red error message. Claude will often offer a one-click fix.
  • Ask Claude to retry with a simpler layout.
  • Refresh the artifact by clicking Rerun at the top of the side panel if available.

Still stuck?

Get help with your error or share your error with the NextWork community!

Interact With Your Live Dashboard

A rendered dashboard is cool. An interactive one is the payoff. Artifacts makes every chart clickable, hoverable, and filterable with zero extra code from you.

  • Hover over any bar in the bar chart to see an exact value in a tooltip.
  • Hover over a slice of the pie or donut chart to see the category and amount.
  • Click a legend entry on either chart to toggle that series on or off.
  • If Claude added filter buttons, month toggles, or category chips, click through them to see the charts update live.

How is this interactive with no code?

Claude wrote a full React component using Recharts. Hover tooltips and legend toggles are built into Recharts by default, and Artifacts runs the component live in the side panel. You got all of it by writing a single prompt.

You just turned a plain spreadsheet into a live, interactive dashboard, with zero code and zero installs. Works, though, isn't the same as polished. Next up, you'll iterate on your dashboard with follow-up prompts until it's something you'd actually put on your portfolio.

Iterate Your Dashboard with Follow-Up Prompts

Your first-pass dashboard is rendered, but it still looks like a first pass. Real design work is iteration, and that's exactly where Claude Artifacts shine. Each follow-up prompt edits the same artifact in place and stacks a new version you can flip back to any time.

In this step, you'll steer your dashboard from "rough draft" to "polished" with three targeted prompts: a color refresh, a category filter, and a theme swap.

In this step, get ready to:

  • Ask Claude to change the color scheme to a palette of your choice.
  • Ask Claude to add a filter.
  • Ask Claude to add a dark/light mode toggle.

Refine the Color Scheme

Claude picked default colors on the first render. Let's swap them for a palette that matches your taste so your dashboard feels like a real product instead of a demo.

  • In the same conversation as your dashboard, paste this prompt into the chat input. Swap in any palette you want, like warm autumn tones, pastel candy, or monochrome blue:
Update the color scheme to [[YOUR_COLOR_SCHEME="enter color scheme"]]. Keep all existing data and charts.
  • Press Enter to send the prompt.

Claude updates the artifact in place. Look at the top of the Artifacts side panel and you'll spot a new version selector that has appeared, showing a new version stacked on top of the original.

Add a Filter

A dashboard becomes far more useful when the viewer can slice the data themselves. Let's ask Claude to add a single dropdown that controls every chart at once.

  • Paste this prompt into the chat and press Enter:
Add a dropdown filter at the top of the dashboard that filters every chart by category. When I select a category, every chart should update to show only that category's data. Include an "All" option.

Once the new version finishes rendering in the Artifacts panel, try the dropdown for yourself.

  • Click the new dropdown at the top of the dashboard and select a category.
  • Switch the dropdown back to All to see the full dataset again.

Every chart on the dashboard should update to show only the selected category's data.

Why does one dropdown control every chart?

Claude wires the dropdown's selected value into the data each chart reads from, so changing the category once re-filters the entire dashboard. This is called shared state, where one source of truth drives multiple views.

🙋‍♀️ Filter not wiring up to every chart?

Ask our AI or ask in the Community.

Add a Dark/Light Mode Toggle

A one-time theme change is just a recolor. A real product lets the viewer choose. Let's level up the iterate loop by asking Claude to wire in a dark/light mode toggle so anyone opening your dashboard can flip themes on the fly.

  • In the same chat, paste this prompt and press Enter:
Add a dark/light mode toggle button at the top right of the dashboard. Clicking it should switch the entire dashboard between light mode (clean white background, dark text) and dark mode (near-black background, light text). Make sure all charts, tiles, dropdowns, and text adapt cleanly to both themes.
  • Wait for the Artifacts panel to re-render with the new toggle in place.
  • Click the toggle a few times. Confirm every chart, tile, and the filter dropdown swap themes cleanly each time.

Why is a toggle a bigger change than a recolor?

A recolor is a one-shot edit. A toggle is real interactivity, with Claude wiring up React state, conditional styling across every component, and a control to drive it. You went from "change my colors" to "build me a feature" in a single prompt.

Your dashboard is polished, filtered, and laid out like a real product. Ready for the final flex? Publish it and share the link with the world. That's your Secret Mission.

Secret mission

Your dashboard is live inside Claude.ai, but right now only you can see it. What if you could drop a single link into a LinkedIn post or a portfolio and let anyone play with it?

In this secret mission, get ready to:

  • Open your finished dashboard artifact in Claude.ai.
  • Publish it with the built-in Publish and Copy Link flow.
  • Test the public link in a new browser window or incognito tab.

Publish & Share Your Dashboard

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your chat and dashboard running, pause them to come back later, or delete them entirely. This project runs entirely inside Claude.ai on the free tier, so there are no ongoing costs.

Resources you used:

  • Your Claude.ai chat from this project.
  • The dashboard artifact(s) created in the chat.
  • Your published dashboard URL (if you completed the Secret Mission).
  • Your free-tier Claude.ai account.

✔️ Keep everything running

No action needed. Choose this if you're still actively building or want to keep the dashboard as a reference.

Your chat auto-saves in Claude's history and your published URL stays live. Come back any time.

✋ Pause - I'll come back to this later

Close the tab and come back later. Choose this if you're done for today but want to pick up where you left off.

  • Close your Claude.ai browser tab.
  • Nothing to shut down. Your chat auto-saves in Claude's history.
  • Your published dashboard URL stays live with no action needed.

To pick up again, open Claude.ai, find this project's chat in the sidebar, and keep going.

ⓧ Delete - I don't want to use this again

Remove everything and start fresh. Choose this if you don't plan to revisit this project.

  • Open Claude.ai and find this project's chat in the sidebar.
  • Hover the chat and click the ⋯ menu.
  • Select Delete.

Deleting the chat also deletes your published artifact URL.

The published dashboard link is tied to the chat. If other people are using your URL, it will stop working the moment you delete the chat.

  • (Optional) Delete your Claude.ai account entirely from Settings, then Account, then Delete account.

That's a wrap!

That's a wrap!

Nice work! 🚀 You just built a live, shareable interactive dashboard with nothing but natural-language prompts. No code, no local setup, no paid services.

You've learned how to:

  • 🔐 Create a Claude.ai account and find the Artifacts side panel.
  • 🎨 Render your first HTML artifact and iterate on it with a follow-up prompt.
  • 📊 Turn a raw CSV into an interactive React dashboard using Recharts.
  • 🪄 Refine your dashboard through targeted follow-up prompts for color, filters, and a dark/light mode toggle.
  • 💎 Publish your dashboard to a public shareable link (Secret Mission).

Ready to quiz yourself? 💪

p.s. Does it say "Still tasks to complete!" at the bottom of the screen?

This means you still have screenshots left to upload, or questions left to answer!

  1. Press Ctrl+F (Windows) or Command+F (Mac) on your keyboard.
  2. Search for the text Return to later.
  3. Jump straight to your incomplete tasks!
  4. 🙋‍♀️ Still stuck? Ask the community!