Claude Code: Build Live Dashboards With MCP Artifacts

Claude Code artifacts just got a serious upgrade. A published artifact — that self-contained HTML page Claude builds and hosts for you — can now call your MCP connectors every time someone opens it. Which means the GitHub PR dashboard you built last Monday still shows your current open pull requests today, not Monday's list. That's a live dashboard, and you didn't write a single line of server code to get it.

This feature arrived with Claude Code v2.1.209 and I'd been waiting for it since artifacts launched. The original version was powerful but baked-in data only — whatever Claude pulled during the session. Now the page can reach out and fetch fresh data on every load.

1What does "live data in artifacts" actually mean?

Artifacts have always been snapshots: Claude pulls your GitHub data, builds an HTML page around it, and publishes it. The page is accurate for the moment it was built. Tomorrow the data is stale. With MCP connectors, Claude wires up the page to call your connectors every time it loads — the same tools Claude uses during a session, but now they run when a viewer opens the page. The viewer sees today's data every time, not last week's session output.

2What do you need to get started?

Three things: Claude Code v2.1.209 or later (check with claude --version), a paid plan (Pro, Max, Team, or Enterprise), and at least one MCP connector configured on claude.ai under Settings → Connectors. The connector that matters most for your dashboard must be connected to your claude.ai account — not just to your local Claude Code. The local-only MCP servers in your .mcp.json can supply data while Claude builds the page, but the published page can't call them once it's live.

3How to build your first live dashboard

Name the connector and the data you want. That's the whole prompt pattern. Claude handles everything else: declaring which connectors the page may call, writing the fetch logic, and publishing. Try this exact prompt if you have a GitHub connector:

Build a dashboard artifact of our open pull requests that pulls the live list through my GitHub connector when the page loads.

4How does live data work for your viewers?

Here's the part that surprised me: live calls use the viewer's own connectors, not yours. When your teammate opens the PR dashboard you shared, the connector call goes through their GitHub connection — they see what their account can see. This is intentional: their credentials never leave their account, and you never see data they can't access. It also means two people can open the same dashboard and see different things based on their permissions.

Each viewer approves connector access before the page's first call. A viewer who hasn't connected a required service still sees the page — just without the live sections. If you know your audience, include a fallback when prompting Claude, like 'show a note naming the connector if data doesn't load'. That way viewers know exactly what to connect instead of seeing an empty panel.

5What can you build with live artifacts?

Anything where 'current data' matters more than 'interactivity'. The page can fetch on load, refresh on a timer, or respond to a refresh button. Actions that write data also work — a button that closes a GitHub issue or posts a Slack message runs through the viewer's own account. Some patterns worth trying:

The constraint is still one HTML page with no real backend — it can't store form input and can't serve multiple routes. But that's enough for the dashboards most teams actually need: the morning standup view, the deployment tracker, the sprint summary. The hard part used to be the backend. Now it's just the prompt.