How to Build a Live Dashboard with Claude: 3 Options Compared

Quick Answer: To build a live dashboard with Claude, you have three realistic options: ask Claude for an artifact that pulls data through your connectors, have Claude Code build a web dashboard that you host yourself, or connect a tool over MCP that renders the dashboard for you. The right one depends on who needs to see it, how fresh it has to be, and whether you'll mostly look at it at a desk or on your phone.

Most "build a dashboard with Claude" tutorials show you one path and call it done. That's fine until you try to share the thing with a co-founder, check it from a café, or work out why the numbers haven't moved since Tuesday. This guide lays out all three options side by side, with the trade-offs stated plainly and sourced from Anthropic's own docs where Anthropic's features are involved.

What is a live dashboard with Claude?

A live dashboard with Claude is a visual page of your numbers (KPIs, charts, tables, task lists) that Claude builds for you and that keeps showing current data after the chat ends. "Live" is the hard part. Anyone can get Claude to draw a pretty chart from a CSV you paste in; the question is what happens tomorrow when the CSV is out of date.

There are two ways a dashboard stays current. Either the page itself fetches fresh data when you open it, or something (Claude, a script, a scheduled job) writes new data into it on a cadence. Each option below uses one or both of those, and that choice drives almost every trade-off.

A quick word on MCP

Two of the three options lean on MCP, the Model Context Protocol. The official site describes it as "an open-source standard for connecting AI applications to external systems", and compares it to a USB-C port for AI apps (modelcontextprotocol.io). In Claude, MCP servers show up as connectors. If you want the longer version, we've written up what a remote MCP server is in plain terms.

Why this matters for marketers and founders

A dashboard your agent built is only useful if you trust the numbers and actually look at it. A static chart in an old chat thread fails both tests. You don't know when the data was pulled, and you won't scroll back to find it.

The upside of getting this right is real. Your agent can already query your CRM, analytics, ad accounts and project tools through connectors. A live dashboard turns that into something you glance at, rather than something you prompt for every morning. It also changes who does the work: you describe what you want to see, and your agent handles the plumbing.

The downside of getting it wrong is quieter. A dashboard that silently stops refreshing is worse than no dashboard, because it looks authoritative. The Vibe Product Marketing guide to live artifact dashboards makes the same point: data feeds break, so check them regularly.

The three options at a glance

Here's the short version before we go deep on each.

Option	Where it runs	How it stays current	Code you own	Best for
Claude artifact with connectors	In Claude (web, desktop; viewable in the mobile apps)	Fetches through your connectors when the page loads; can refresh on an interval or via a refresh control	None	Personal or team dashboards inside Claude
Claude Code web dashboard you host	Your hosting (for example Vercel)	Whatever data layer you build: fetch on load, polling, or a scheduled job	All of it	Custom, public or client-facing dashboards
MCP tool that renders it (for example Unorderly)	The tool's own app	Changes when Claude writes to it; you see the latest on open or refresh	None	Checking agent output on your phone

None of these is universally best. They answer different questions, and plenty of people will end up using two of them.

Option 1: Claude artifacts (and what happened to Live Artifacts)

What artifacts are

Anthropic defines an artifact as "anything Claude makes for you that you'd put in front of someone: a design, a deck, a document, a dashboard, or a small interactive tool" (Claude Help Center). It opens beside your conversation, and you refine it by chatting.

For dashboards, the key detail is connections. The same help article says artifacts on Pro, Max, Team and Enterprise can "connect to the apps you've connected to Claude, so they can read from and write to tools like Asana, Google Calendar, and Slack." Free plans can still create artifacts in chat, just without that app connection. Artifacts are saved to an Artifacts tab, and the help centre says you can view them in the iOS and Android apps, with editing done on web or desktop.

The Live Artifacts change

If you followed a tutorial from earlier this year, you probably met "Live Artifacts" in Claude Cowork. Guides like the ChatPRD workflow for a live, auto-updating personal dashboard were built around it.

Anthropic's help centre now describes live artifacts as "artifacts made in Claude Cowork before August 19, 2026." They "stay in your Artifacts view and keep working, and you can still open and share them, but you can't edit them in place." Artifacts made on or after that date work like any other artifact (Claude Help Center). So the concept lives on; the separate label doesn't. If you have an old live artifact you want to change, plan to rebuild it as a regular one.

Artifacts from Claude Code

Claude Code can also publish artifacts. Anthropic's docs describe one as "a live, interactive web page that Claude Code publishes from your session to a private URL on claude.ai", which "updates in place as the session continues" (Claude Code Docs). The feature launched in June 2026 in beta for Team and Enterprise (Claude blog); the current docs list Pro, Max, Team and Enterprise, with a few conditions such as signing in with a claude.ai account.

The most dashboard-relevant section is about connectors. Per the docs, an artifact "can call MCP connectors each time someone views it, so the page shows current data rather than a snapshot." The page "fetches data when it loads and can refresh on an interval or when a viewer uses a refresh control on the page." Only claude.ai connectors qualify; local MCP servers from your project config can feed data while Claude builds the page, but the published page can't call them.

Trade-offs to know

Viewers use their own connections. Each connector call runs through the viewing account, so two people can see different numbers on the same dashboard, and a viewer without the connector sees empty sections.
Sharing depends on plan. The Claude Code docs say a connector-backed artifact can't be shared to a public link on any plan. On Pro and Max, where public links are the only sharing mode, it stays private to you; on Team and Enterprise you can share it within your organisation.
One page, no backend. Anthropic is clear that an artifact is "one self-contained page with no backend." For a hosted tool with a backend, the docs say to deploy it on your own infrastructure.

For most solo founders and marketers who live in Claude already, this is the fastest route from "I want a dashboard" to having one.

Option 2: Claude Code builds a web dashboard you host

This is the classic route, and it's what most "build a KPI dashboard with Claude Code" searches are really after. Claude Code writes a real app (often React with a charting library), you push it to a repo, and a host serves it at your own URL.

The Claude Code Club guide is a good walkthrough: start from the data, not the design, build in stages, then swap sample data for a live source. It also flags the decision that bites people later: whether the dashboard fetches once on load or keeps updating via polling or WebSockets. Pick early, because changing it means rebuilding the data layer.

Hosting is easier than it used to be. On Vercel, for example, "each commit or pull request (on supported Git providers) automatically triggers a new deployment" once you've connected a repo (Vercel docs). Claude Code can run the CLI for you.

Trade-offs to know

You own everything. Layout, auth, data connections, uptime and cost are yours. That's the point, and also the catch.
Freshness is your problem. A hosted page has no connectors by default. Someone has to write the code that pulls from your CRM or analytics, store the keys safely, and keep it working when an API changes.
Security is on you. If the dashboard shows revenue or customer data, you need proper authentication before it goes on a public URL.
It's the most flexible. Public investor pages, client portals, embedded reports: only this option really suits them.

Choose this if the dashboard is a product in its own right, or if people outside your Claude account need to see it.

Option 3: Connect a tool over MCP that renders it for you

The third option flips the model. Instead of Claude generating a page, Claude writes data and layout into a separate app through that app's MCP server, and the app renders it with its own components. You don't host anything, and there's no HTML for anyone to maintain.

This is how Unorderly works. It's an iPhone app (it adapts to iPad) where your agent publishes dashboards. You add your Unorderly MCP URL, shown in the app, to Claude as a custom connector (or to Claude Code), then sign in once with your Unorderly account. No API keys get pasted into chat. If you've not added a connector before, our guide on how to add a custom connector in Claude walks through it.

From there Claude builds workspaces, views and widgets using tools such as create_workspace, put_surface and upsert_records. It picks from nine native widget types: KPI (with sparkline), chart (bar, line, area, pie, funnel, horizontal bar), table, kanban, to-do, calendar, notes, form and approval. It can't ship code or web pages to your phone, which is a limitation and also a safety property.

Trade-offs to know

Fixed components. You get what the nine widget types can express. If you need a bespoke visualisation, Option 2 is the answer.
It updates when Claude writes. Views change when your agent writes to them, and the app shows the latest when you open it or pull to refresh. It is not a streaming feed, and there are no push alerts today; background refresh, Home and Lock Screen widgets and push alerts are listed as coming soon.
iPhone only for now. There's no Android or web version, and the app is pre-launch with a waitlist.
Something has to trigger the writes. Claude only updates the view when it runs. In Cowork, Anthropic says scheduled tasks can run hourly, daily or weekly, "even when your computer is asleep or the Claude app is closed", and have access to connected tools (Claude Help Center). That's one way to keep any connector-fed view current.

The other difference is that you can act, not just read. You can tick to-dos, drag kanban cards, and approve or reject items from the phone.

What marketers and founders actually need from a Claude dashboard

Before picking an option, answer these. Your answers usually make the choice for you.

Question	If the answer is...	Lean towards
Who needs to see it?	Just me, or my team inside Claude	Artifact with connectors
Who needs to see it?	Clients, investors or the public	Self-hosted web dashboard
Where will I look at it?	At my desk, in a browser tab	Artifact or self-hosted
Where will I look at it?	Mostly on my iPhone, between meetings	An MCP tool with a native app
How custom is the design?	Standard KPIs, charts and tables	Artifact or MCP tool
How custom is the design?	Bespoke visuals and interactions	Self-hosted web dashboard
Do I need to act on it?	Approve, tick off, move cards	MCP tool or a self-hosted app with a backend
How much maintenance can I stomach?	None	Artifact or MCP tool

A quick checklist for any option:

One clear question the dashboard answers (for example, "is paid acquisition working this week?")
Three to six KPIs, not twenty
A visible "last updated" time, so you never trust stale numbers
A known refresh mechanism: on load, on a schedule, or when Claude runs
A plan for who else sees it, and with what access

Step-by-step: how to build a live dashboard with Claude

These steps work whichever option you choose. Where they differ, the difference is called out.

Write down the one question. Before opening Claude, write the decision this dashboard supports and the five or so numbers that inform it. Claude is good at layout; it can't read your mind about what matters.
Connect your data sources. Add the connectors your numbers live in. Anthropic's custom connectors guide says custom connectors over remote MCP are available on Free, Pro, Max, Team and Enterprise, with Free limited to one. In Claude Code, the MCP docs show claude mcp add --transport http <name> <url> for remote servers, with /mcp to sign in, and claude.ai connectors carry over when you're logged in.
Pick where the dashboard lives. Artifact, self-hosted app, or an MCP tool that renders it. Use the tables above. If you're unsure, start with an artifact; it's the cheapest to throw away.
Brief Claude like a designer. Spell out sections, order, time windows, what to highlight and what to hide. For an artifact from Claude Code, name the connector and say it should pull data "when the page loads", which mirrors Anthropic's own example prompt. For an MCP tool, say which widget type you want for each number.
Add a freshness signal. Ask for a "last updated" label on the page, or rely on the tool's own. Unorderly shows which agent wrote each view and when (for example, "Claude wrote this 2 min ago"), which saves a lot of second-guessing.
Set the update rhythm. Decide what makes the numbers move: page load (connector-backed artifact), your own code (self-hosted), or a scheduled Claude task that writes new data (MCP tool, or refreshing any view). Write it down so future-you knows.
Check it on the device you'll actually use. Open it on your phone and your laptop before you call it done. A dashboard that's lovely in a wide browser tab can be unreadable on a narrow screen.

What good looks like

A good Claude dashboard answers its question in under ten seconds. You open it, see three to six numbers with a trend, and know whether to act. Anything deeper sits below the fold or in a linked table.

It tells you how fresh it is. Every good dashboard shows when its data was last pulled or written. If you can't tell, you'll stop trusting it, and then you'll stop opening it.

It lives where you look. If you check numbers on the train, a dashboard in a desktop tab won't get checked. If you do deep analysis at a desk, a phone-sized view won't be enough. Many founders end up with a detailed desktop version and a small phone view of the handful of numbers that matter daily.

And it's cheap to change. The advantage of your agent building it is that "add a CAC column" is one sentence. If every change needs a deploy and a code review, you've quietly picked Option 2's costs.

Mistakes to avoid

Building before deciding the question. You'll get a wall of charts that looks impressive and answers nothing. The consequence is a dashboard you open twice and abandon.

Assuming "live" means always updating. Most options fetch or change on a trigger: page load, a refresh control, a schedule or a Claude run. If nothing triggers, the numbers sit still. The consequence is confident decisions made on last week's data.

Following an outdated tutorial. Claude's features have moved quickly this year, and the Live Artifacts label is now legacy. The consequence is an hour lost looking for a button that's been renamed. Cross-check tutorials against Anthropic's help centre.

Sharing without checking what viewers see. A connector-backed artifact runs on each viewer's own connections, so a colleague without the connector sees empty sections. On a self-hosted page, skipping auth can expose revenue data. The consequence ranges from confusion to a genuine data leak.

Putting API keys in chat. If a setup asks you to paste secret keys into a conversation, stop. Prefer connectors that use OAuth sign-in, or environment variables for self-hosted apps. The consequence of skipping this is credentials sitting in chat history.

When you want it on your phone, not in a desktop tab

This is the question most tutorials skip. Artifacts and self-hosted pages are web pages at heart, built for a browser. They can work on a phone, and Claude's mobile apps let you view artifacts, but they're designed around a screen you sit in front of.

If your pattern is "glance between meetings, approve something, move on", a native app built for that job tends to feel better. That's the gap Unorderly aims at: your agent does the building, and the iPhone app gives you views made from native components, with a record of which agent wrote what. We've gone deeper on this in our piece on AI agent dashboard apps for iPhone.

Be honest with yourself about where you'll look. If it's mostly a laptop, stick with an artifact or a hosted page.

How Unorderly helps

If you want Claude's dashboards on your iPhone without hosting anything, Unorderly lets Claude publish them over remote MCP from native widgets you can read and act on. It's pre-launch and free to start; see how it works, or join the waitlist from the home page.

Frequently asked questions

Can Claude build a live dashboard without code?

Yes. In the Claude apps you can describe the dashboard in plain English and Claude builds it as an artifact, and on Pro, Max, Team and Enterprise plans artifacts can read from apps you've connected to Claude. You never touch the HTML. The only "technical" part is connecting your data sources as connectors first.

What happened to Live Artifacts in Claude Cowork?

Anthropic's help centre says live artifacts are artifacts made in Claude Cowork before 19 August 2026. They keep working and you can still open and share them, but you can't edit them in place. Artifacts made on or after that date work like any other artifact.

How do I build a KPI dashboard with Claude Code?

You have two routes. Ask Claude Code to publish a dashboard artifact, which lives at a private URL on claude.ai and can pull fresh data through claude.ai connectors when it loads. Or have Claude Code build a full web app, then deploy it to a host such as Vercel and own the data pipeline yourself.

Does a Claude artifact dashboard update automatically?

A connector-backed artifact fetches data when the page loads, and Anthropic's Claude Code docs say it can also refresh on an interval or via a refresh control on the page. A plain artifact without connector calls only changes when Claude republishes it. Either way, nothing updates while the page is closed.

Can I see my Claude dashboard on my phone?

Anthropic's help centre says you can view artifacts in the Claude iOS and Android apps, with editing done on web or desktop. A self-hosted web dashboard works in any mobile browser if you've made it responsive. A native app built for the phone is a third option if you check your numbers mostly away from the desk.

Do I need a paid Claude plan to build a live dashboard?

Free plans can create artifacts in chat, but connecting artifacts to your apps is listed for Pro, Max, Team and Enterprise. Custom connectors over remote MCP are available on Free too, limited to one. Check Anthropic's current plan pages before you commit, as features and tiers shift.

How does Unorderly fit into a Claude dashboard workflow?

Unorderly is an iPhone app, currently pre-launch with a waitlist, that Claude connects to over remote MCP. Claude builds views from native widgets such as KPIs, charts, tables and kanban boards, and you read them on your phone. Views change when Claude writes and show the latest when you open the app or pull to refresh.