Claude Code Artifacts + MCP: Live Dashboards With Viewer-Scoped Auth

On July 16, 2026, Anthropic's ClaudeDevs account posted that Claude Code artifacts can now call MCP connectors — a change that turned a ~495.9K-view thread into the week's most practical question for anyone building internal dashboards from coding sessions:

"Build an artifact once, then it pulls live data via MCP. Artifacts use the viewers' own MCP connectors, so creators don't need to re-run sessions to refresh, and viewers can only see the data they have access to."

That second line is the architectural shift. Before this ship, an artifact was a snapshot: whatever data Claude pulled while building the page was baked into HTML. Now the page is a thick artifact in Thariq Shihipar's sense — a durable shell that rehydrates from live systems every time someone opens it — without the publisher re-running Claude Code or leaking their credentials to viewers.

If you are new to the protocol layer, start with explainx.ai's MCP architecture guide. For the baseline Artifacts feature (sharing, org scopes, HTML constraints), see Claude Code Artifacts: shareable sessions.

TL;DR: what people are asking

What changed: from snapshot to live page

Claude Code Artifacts already let you publish a single HTML page from a session — annotated PR diffs, comparison grids, investigation timelines. The limitation was freshness: if your GitHub open-PR count changed after publish, the artifact did not know unless you asked Claude to republish.

Anthropic's official docs now describe connector-backed pages under Share session output as artifacts:

• The artifact fetches on load and can refresh on an interval or via a viewer-triggered control.
• Responses cache in the viewer's browser — reopening renders cached data immediately, then updates with fresh connector results.
• Claude declares an allowlist of connector names at publish time; the page cannot call undeclared connectors.

The ClaudeDevs announcement framed the builder workflow: "letting you build dashboards and apps that can fetch information and take actions for each viewer on demand." Actions matter — a page can expose controls that invoke connector tools with side effects (post a Slack message, update a Linear issue), and those actions run through whoever clicked the control, not the original author.

How viewer-scoped auth actually works

This is the piece most social threads gloss over. The artifact is a static HTML page under a strict Content Security Policy — no fetch, no WebSockets, no external scripts. The only outbound data path when someone views the page is handing connector calls to claude.ai, which makes the network request on the page's behalf.

Anthropic documents four rules:

That model is why public sharing is disabled for connector-backed artifacts. A public URL has no authenticated viewer to broker OAuth through. Team and Enterprise org sharing works because every viewer signs into claude.ai as an org member.

For enterprise connector setup — who adds org-wide connectors vs who individually authenticates — see How to use Claude connectors and MCP servers. Note that org-level connector credential sharing on claude.ai remains a separate debate from artifact viewer scoping; artifact calls are explicitly per-viewing-account even when the connector was added at org level.

Thick artifacts: why this fits Thariq's stack

Hours before the ClaudeDevs MCP post, Thariq Shihipar (@trq212) posted his thin prompts, thick artifacts, thin skills framework — ~82K views on the same day. explainx.ai covered it in Thin prompts, thick artifacts, thin skills.

The connection is direct:

Thariq has advocated HTML over Markdown for agent output since his unreasonable effectiveness of HTML guide — tables, CSS, interactive controls, shareability. MCP-backed artifacts are the next step: the HTML file stays the durable spec; connectors supply the moving parts.

Thin prompt example (pair with a thick artifact, not a paragraph of requirements):

Build a dashboard artifact of our open pull requests. Pull the live list through my GitHub connector when the page loads. Add a fallback message if the viewer hasn't connected GitHub.

Operational dashboard variant:

Build an artifact of last week's deploy failures by service. Refresh from my monitoring connector every 5 minutes. Include a manual refresh button.

Action-capable board (viewer-scoped writes):

Make a triage board artifact with open Linear issues as cards. Pull live issues on load. Let viewers move a card to Done — that should call the Linear connector to update status using their account.

Build-time MCP vs view-time connectors

Claude Code sessions can use two different MCP surfaces, and conflating them breaks deployments.

Local servers like Desktop Commander or context-mode remain powerful for authoring — Claude can pull real data into the first draft. But the published URL cannot call them. Plan connector allowlists around remote connectors your viewers will also have.

For wiring local servers into Claude Code sessions, see Claude Code MCP servers: connect any tool.

Page constraints that still apply

Connector calls are an exception to the artifact CSP — everything else is unchanged. From Anthropic's Page constraints:

• No external requests for scripts, styles, fonts, images, or arbitrary APIs — Claude inlines CSS/JS and embeds images as data URIs.
• No backend — the page cannot store form submissions or run server-side logic; MCP is the only live data path.
• Single page — no multi-route apps; use in-page anchors for sections.
• 16 MiB rendered size cap — large embedded raster images are the usual publish failure.

Token cost also rises: styled interactive pages cost more output tokens than terminal text. Prefer SVG and CSS over inlined PNGs when building connector dashboards.

Troubleshooting empty live sections

When the shell renders but live blocks stay blank, Anthropic lists three causes:

1. Viewer hasn't connected the connector — add it under Settings > Connectors on claude.ai, reload.
2. Viewer declined the permission prompt — denial lasts for that page load only; reload to re-prompt.
3. Org disabled artifact connectors — Owners check Enable artifact connectors under Settings > Capabilities.

GitHub issues in the Claude Code tracker document additional edge cases from early Cowork artifact builds — for example, read-only SQL queries still triggering per-call Allow/Deny gates when execute_sql is classified as a write-capable tool. Treat connector tool permissions as per-artifact-context, not guaranteed to inherit global "Always Allow" settings.

Security and governance

Viewer-scoped auth solves credential leakage — viewers never inherit the publisher's tokens. It does not solve authorization design in your MCP server. If your custom connector returns all rows to any authenticated user, every viewer still sees all rows.

explainx.ai's MCP security guide still applies:

• Least-privilege tools — expose read-only list tools for dashboards; gate writes behind explicit UI actions.
• Prompt injection via tool results — artifact JavaScript that renders connector JSON into innerHTML without sanitization is a XSS surface; treat tool output as data.
• Audit logging — Team/Enterprise audit logs capture claude_artifact_* publish and share events; pair with your connector server's own invocation logs.

Anthropic's connector authentication docs cover OAuth DCR, CIMD, and static header patterns for custom remote servers you want teammates to connect individually.

Plan and version requirements

Earlier Claude Code versions still publish artifacts, but pages show build-time data only — no live connector refresh.

What this does not replace

Artifacts remain session captures, not hosted applications. They cannot replace:

• A production app with its own auth, database, and deployment pipeline
• Local-only MCP workflows (screenpipe memory, Desktop Commander terminal control) at view time
• Public dashboards for customers or internet strangers

For full-stack generation with external hosting, dedicated builders still win. Artifacts win when the audience is your org, the spec lived in a Claude Code session, and each viewer should see only what their connectors allow.

Getting started today

1. Upgrade to Claude Code v2.1.209+ and confirm /login to claude.ai.
2. Connect remote MCP under Settings > Connectors — start with official connector setup.
3. Prompt for a connector-backed artifact — name the connector and the live data explicitly; ask for fallback copy per connector.
4. Share inside your org (Team/Enterprise) or keep private (Pro/Max).
5. Verify as a second user — open the link with a teammate's account and confirm they see their data slice, not yours.

Browse additional servers on explainx.ai's MCP server directory when evaluating what to connect before you publish.

Related on explainx.ai

• Thin prompts, thick artifacts, thin skills — Thariq framework · HTML vs Markdown — Thariq guide
• Claude Code Artifacts: shareable sessions · Claude Code MCP servers setup
• What is MCP? Complete architecture guide · MCP security guide 2026
• Claude connectors complete guide · context-mode MCP sandboxing
• screenpipe local work memory via MCP
• DoorDash dd-cli — commerce CLI for agents (Jul 16)

Official docs: Claude Code artifacts · Artifact MCP section · Claude Help Center — artifacts and MCP · Connectors overview

Plan availability, version floors, and connector behavior are accurate as of July 16, 2026. Confirm current requirements on code.claude.com before shipping production dashboards.