0:00
/
Generate transcript
A transcript unlocks clips, previews, and editing.

How to Build Data Dashboard using Claude Artifact

Here is how we moved from a static CSV dashboard to a page that refreshes through MCP connectors.

Claude Artifacts are standalone outputs used to create documents, diagrams, interactive charts, small apps, or single-page websites that you can keep refining by chatting with Claude.

You can turn a spreadsheet into a dashboard, build a calculator to help you make better decisions, convert files between formats, create flashcards for something you are learning, or make a small landing page that other people can access without building a separate website first.

I have mostly used Artifacts when I wanted to turn an explanation or a set of data into something visual. This is how I built my weekly Google Analytics dashboard.

But what most people don’t know is that Anthropic recently released an addition to MCP (Model Context Protocol) and its connectors that makes Artifacts even more useful.

Now it can call an approved connector when the page loads, pull current information from an app, and refresh the view without rebuilding the whole page. Anthropic’s current documentation describes connector-backed Artifacts that load live data through each viewer’s own connected account.

That was the reason we revisited the feature in Episode 24 of One Shot Show.

Dheeraj Sharma built three versions of the same basic idea. The first was a dashboard made from a CSV file. The second pulled current data from his Substack account through a connector. The third took things further using Claude Code, where a comment on the dashboard could ask Claude to change the design.

By the end, the dashboard had become something you could refresh, question, and revise with other people.

I will walk through the same progression, beginning with the version almost anyone can try: a CSV you already understand.

Start With a CSV You Already Understand

Dheeraj started with the smallest useful version.

He had a six-row CSV showing where a newsletter’s subscribers came from during the previous 90 days. The columns included the channel, subscriber count, and percentage share.

He uploaded the file in a regular Claude chat and used a prompt along these lines:

Using the attached CSV of newsletter traffic sources, build a single-page dashboard Artifact. Show each channel, its subscriber count, and its percentage share. Make the page self-contained, with no external scripts or images.

Claude created a visual dashboard from the file. Once Dheeraj published it, he opened the link in a private Safari window where he was not signed in to Claude. The dashboard loaded and he could interact with the page.

That gives you a simple first build to copy:

  1. Export a small dataset you already know.

  2. Upload it to a new Claude chat.

  3. Ask for a self-contained, single-page Artifact.

  4. Check the numbers against the source file.

  5. Publish it only after you have inspected the page and the conversation behind it.

If you want to replicate this, I’d suggest starting with data you’re already familiar with so you can look at the visualized dashboard and quickly judge whether it’s showing the right information and whether it’s actually useful for you.

But there’s one particular issue with this simple artifact.

Even though it looked complete, its data was frozen at the moment Dheeraj uploaded the CSV.

If the subscriber numbers changed tomorrow, the Artifact would still show the old file. Someone would need to upload a new CSV and tell Claude to update the page.

That is fine for a report you only need to read once. But it becomes limiting when the value of the report depends on current information.

That’s why we need to connect Artifact to external connectors so it can stay in sync with the latest data and information.

Build the Live Artifact Version in Cowork

For the second build, Dheeraj moved into Claude Cowork and connected a custom remote MCP server called Subflow AI. It gave Claude read access to his Substack data, including publication statistics, scheduled Notes, subscriber sources, top articles, and subscriptions.

His prompt was essentially:

Build me a live dashboard of my Substack publication using the Subflow AI connector. Show my publication statistics, scheduled Notes, subscriber sources, top articles, and subscriptions. Include a refresh control and show when the data was last updated.

Cowork loaded its Artifact capabilities, called the approved Substack tools, and built the dashboard. When Dheeraj opened it, the page showed current data from GenAI Unplugged. He could access the data live without having to ask Claude to refresh the page or update the data manually.

Anthropic describes Cowork live Artifacts as persistent HTML dashboards that can refresh from connected apps and local files.

This enables us to have live data that will be updated regularly.

Choose the Right Place to Build Your Artifact

At first, I thought Artifact was just a simple feature I could use across all Claude products—Chat, Cowork, and Code. But it turns out there are some limitations you need to understand, depending on which product you’re using to build your Artifact.

1. Claude Chat

Use it first for a report, calculator, visual, or dashboard built from an uploaded file. The result is usually a snapshot, and it can’t connect to external apps. Free, Pro, and Max users can publish public links, while Team and Enterprise accounts can share within their organization.

2. Claude Cowork

Use it for a personal dashboard that refreshes from connected apps or local files. Pro and Max live Artifacts stay private. Team and Enterprise can share them inside the organization.

3. Claude Code

Use it for a live page connected to an active dashboard that needs code-level revision and team feedback. Remember that artifact pages using live connectors cannot be shared via public link. Internal comments and collaborative editing require a Team or Enterprise plan.

How Sharing Claude Artifacts Actually Works

One of the coolest parts of Claude Artifacts is that you can send someone a link to a dashboard, calculator, visual report, or small app and let them interact with what you built.

We saw the simplest version during the first demo. Dheeraj published the static CSV dashboard, copied its link, and opened it in a private Safari window where he was not signed in to Claude. The page still loaded and worked.

Once an Artifact uses Claude or a connector, the sharing rules change. Here are the details I would check before sending the link for other people to access.

A Published Chat Artifact Can Be Public

On Claude Free, Pro, and Max plans, you can publish a Chat Artifact and give anyone the public link. Anthropic’s publishing guide says people can view and use its basic functions without creating a Claude account.

If the Artifact uses Claude for an AI-powered feature, the viewer needs to sign in. The clearest example of this is Dheeraj’s compliment bot, where the Artifact is an AI bot that connects to Claude as the underlying model. If you share this type of Artifact with other people, it will consume their tokens instead of the tokens of the person who built it.

Team and Enterprise accounts use internal sharing instead. Viewers need to sign in through the same organization before they can open the Artifact.

Live Data Comes With Tighter Sharing Rules

Cowork live Artifacts stay private on Pro and Max. Team and Enterprise users can share them inside their organization, while external public links are unavailable.

Claude Code Artifacts can also be shared, but a page that calls a connector cannot be published to the open internet. On Team and Enterprise, you can share that connector-backed page with people inside your organization. A regular Claude Code Artifact without a connector can support a public link, as long as it isn’t attached to a connector.

This is what happened when Dheeraj tried to share his live Substack dashboard. The public-link option was disabled because the page called his Substack connector.

Each Viewer Brings Their Own Connector and Data

When someone opens a shared connector-backed Artifact, Claude calls that person’s connector and respects their permissions. The creator’s login and data do not travel with the page.

If Dheeraj and I opened the same Substack dashboard, he could see GenAI Unplugged while I could see AI Maker, assuming we had each connected the same tool. We would share the dashboard’s interface and logic while the data inside it would come from our individual accounts.

A viewer who has not connected the required service will see an empty or failed live section.

Turn Comments Into Dashboard Revisions

The final demonstration was the part I did not expect.

Dheeraj opened the Claude Code version of the dashboard and added a comment requesting a visual change. The comment reached the Claude Code session that had published the Artifact. Claude updated the chart, replied to the thread, and marked the request as resolved.

I could immediately see the team use case. Someone reviewing a report can point to the exact visual, ask a question, or request a change without explaining which chart they mean in a separate message.

The current implementation has several conditions:

  • Comments are available on Artifacts shared inside a Team or Enterprise organization.

  • Reading comment threads requires Claude Code 2.1.221 or later.

  • Automatic replies and edits require Claude Code 2.1.228 or later.

  • The publishing Claude Code session must still be running to react immediately.

  • Your permission mode decides whether Claude proceeds, asks for approval, or waits until you leave plan mode.

The Smallest Dashboard I Would Build First

If you want to build artifact, start with one decision you already make from a recurring file.

Maybe you export newsletter traffic each week, download a project-status CSV, or receive a simple sales report. Choose a file you already inspect manually and build a static dashboard from it.

Your first version only needs to answer three questions:

  • What changed?

  • What needs attention?

  • Which source row or category explains it?

Use that static version for awhile. Correct the labels, remove any chart you ignore, and make sure the dashboard helps you make the real decision faster.

Then connect live data if you want the artifact to reflect real data that you can monitor regularly.

Show Details

Show: One Shot Show

Episode: 24

Topic: Building static, live, and collaborative dashboards with Claude Artifacts

Hosts: Wyndo and Dheeraj Sharma

Live schedule: Wednesdays at 10:00 AM ET on Substack

Timestamps

  • 00:00: Episode 24 introduction and the promise of live Claude Artifacts

  • 00:04: What an Artifact is and why sharing a visual beats sending raw data

  • 00:09: Wyndo on the shift from Markdown output to interactive visual pages

  • 00:11: Artifact examples, from file converters to learning tools

  • 00:13: AI-powered Artifacts and live connectors

  • 00:15: The differences between Chat, Cowork, and Claude Code Artifacts

  • 00:19: Enabling code execution and connector capabilities

  • 00:20: When to use an Artifact instead of hosting an HTML page

  • 00:25: Who pays for AI usage when an Artifact is shared

  • 00:27: Sharing and embedding an AI-powered chatbot Artifact

  • 00:31: The privacy risk when files from the original conversation are shared

  • 00:32: Building the first dashboard from a static CSV

  • 00:35: Connecting Cowork to Dheeraj’s Substack MCP

  • 00:37: Why the first prompt returned an HTML page

  • 00:39: Publishing and testing the static dashboard in a private browser

  • 00:43: Rebuilding the live dashboard through Claude Code

  • 00:46: Exploring the live Substack dashboard

  • 00:49: Why connector-backed dashboards use each viewer’s account

  • 00:50: Adding comments to an Artifact

  • 00:55: Anup asks how automatic comment replies work

  • 00:56: Dheeraj explains what he had not fully tested

  • 00:58: Claude changes the dashboard from a comment and resolves the thread

  • 01:02: When Dheeraj still uses n8n for deterministic automation

  • 01:03: Wyndo connects the discussion to Claude Routines and external automation tools

  • 01:05: Next episode schedule

Resources Mentioned

  • Claude Artifacts: Shareable documents, code, visuals, and interactive single-page tools created inside Claude. The session covered static, AI-powered, live, and Claude Code versions. Pricing was not discussed.

  • Claude Cowork live Artifacts: Desktop-only dashboards that can refresh from connected apps and local files. Dheeraj used Cowork for the live Substack build. Available on paid Claude plans.

  • Claude Code Artifacts: Interactive pages published from a Claude Code session. The demonstration used one for connector-backed data and comment-driven revisions.

  • Claude Chat, Claude Desktop, and Claude Mobile: The regular Claude surfaces discussed when comparing where Artifacts can be created and opened. Live Cowork Artifacts remain desktop-only.

  • Artifact capabilities and Artifact design Skills: Built-in Claude Skills loaded during the Cowork and Claude Code demonstrations to create the dashboards.

  • MCP and Claude connectors: Connections that let Claude retrieve data or take actions in other services. The live dashboards depended on approved connector tools.

  • Subflow AI and the custom Substack MCP: Dheeraj’s remote connector for reading publication statistics, Notes, articles, subscribers, and subscriptions from Substack. Pricing was not discussed.

  • CSV traffic-source file: The six-row sample used to build the first static dashboard. It contained channel, subscriber count, and percentage-share data.

  • HTML, CSS, and inline JavaScript: The web technologies behind a self-contained interactive Artifact.

  • Markdown, SVG, YAML, JSON, and XML: File and data formats mentioned while discussing documents, diagrams, and conversion tools people can build as Artifacts.

  • Five Whys analysis: The root-cause exercise Dheeraj used as an example of an AI-powered Artifact that interviews the user.

  • Compliment bot: The simple AI-powered Artifact used to demonstrate that a shared page can call Claude and charge usage to the signed-in viewer’s limits.

  • iFrame embed code: The method shown for embedding a published, compatible Artifact inside another website. Dheeraj recommended static, self-contained tools for the cleanest embedded experience.

  • Visual Studio Code: The editor Dheeraj opened while inspecting the CSV and starting the Claude Code build.

Discussion about this video

User's avatar

Ready for more?