Jonathon's AI Wiki

Claude.ai Artifacts — Live Code & Document Sandbox

11 min read

Source: wiki synthesis: cowork-live-artifacts, nate-herk-every-level-of-claude, 04-projects-files-artifacts; raw/x-account-claudedevs-2072770790114914317.md (2026-07-02 Pro/Max expansion); raw/x-account-bcherny-2072777472970563995.md (2026-07-02, Boris Cherny first-party usage patterns); raw/x-account-claudedevs-2076789349145092230.md (2026-07-13, @ClaudeDevs — Artifacts multiplayer editing + Claude Tag creation, added to Key Takeaways); raw/x-account-claudedevs-2077489907350856038.md (2026-07-15, @ClaudeDevs — artifacts can call MCP connectors per-viewer, first surface of the MCP-connector feature); ai-research/claude-blog-artifacts-in-claude-code.md (2026-07-16, Anthropic first-party blog post claude.com/blog/artifacts-in-claude-code — the canonical launch announcement corroborating and substantially expanding the X-sourced Claude Code bullet below); ai-research/claude-code-docs-whats-new-w29-2026-07-17.md (2026-07-17, official W29 digest — confirms MCP-connector capability as a headline feature with public sharing links and editor roles)

Artifacts are the right-hand side panel on claude.ai where Claude renders structured output — code, documents, HTML pages, React components, SVGs, diagrams — as a live, persistent object you can iterate on without losing chat context. The recent upgrade (persistent storage + API access + public sharable links) elevates Artifacts from “ephemeral side-panel” to a first-class primitive: build a customer-feedback tracker in chat, save it, send a public link — “no Lovable, no Bolt, no custom development, just a conversation.”

Key Takeaways

  • Artifacts are the structured-output canvas. When you ask Claude for something structured (table, doc, code, mockup, dashboard), it opens an Artifact pane on the right where output is rendered, editable, and iteratable separately from the conversation.
  • The persistent-storage + API-access upgrade is the unlock. Previously Artifacts lived only inside a single chat. Now they save as standalone objects, can call APIs from inside the artifact (Connectors, custom MCPs), and refresh data on each open — turning one-shot canvases into durable mini-apps.
  • Sharable public links ship Artifacts as products. Build it in chat, hit save, send a URL. The receiver doesn’t need a Claude account to view it. This is what makes Artifacts the “Level 2 cheat code” in Nate Herk’s 5-level framework — non-coders can ship working frontends without touching Lovable, Bolt, or custom code.
  • Distinct from inline rendered output. Charts and diagrams built directly inside the chat thread are ephemeral — they live in the conversation, don’t save as files, and don’t get their own URL. Artifacts are persistent and addressable. Both exist; both have separate UI affordances.
  • Cowork Live Artifacts extend the primitive. In Claude Cowork, Artifacts gain Connector access (pull from Notion, Calendar, Stripe, HubSpot, custom MCPs for GSC/GA) and become pinned dashboards that refresh on demand — see Eliot Prince’s 7-recipe walkthrough.
  • Versioning is automatic. Every refresh saves a previous run; scroll back through historical states without manual snapshotting.
  • No-code by design. “You don’t need to know how to code to do this” — Claude writes the underlying HTML/React/SVG, the operator just edits the prompt inputs.
  • Artifacts now in Claude Code (beta 2026-06-18; expanded to Pro/Max 2026-07-02) — confirmed first-party 2026-07-16. Claude Code sessions can generate interactive, live-updating pages — e.g., a PR walkthrough or a living project dashboard — shareable with teammates (or “other Claudes”) via a private link. Launched in beta on Team and Enterprise plans with Pro/Max “coming soon”; as of 2026-07-02, Pro and Max plans have it too, closing that gap (per @ClaudeDevs). This extends the Artifacts primitive from claude.ai chat / Cowork to the coding surface: the artifact is built from your Claude Code session rather than a chat thread. First-party confirmation the same day (2026-07-02): Boris Cherny (Claude Code creator) posted about this same Pro/Max expansion calling it “life changing,” with four concrete usage patterns — see “When to reach for an Artifact” below. Anthropic’s own launch post for the underlying feature (fetched 2026-07-16) corroborates the core mechanics and adds session-context-building, live-in-place updates with versioning/gallery, and admin/privacy controls — see “Claude Code Artifacts — First-Party Launch Detail” below. (Sources: raw/x-account-claudedevs-2067672094209675373.md, raw/x-bookmarks-recent-digest-2026-06-19.md, raw/x-account-claudedevs-2072770790114914317.md, raw/x-account-bcherny-2072777472970563995.md, ai-research/claude-blog-artifacts-in-claude-code.md; https://x.com/claudeai/status/2067671912038240487.)
  • Multiplayer editing + Claude Tag creation (2026-07-13). [X signal — @ClaudeDevs] A collaboration update extends Artifacts from a single-author canvas to a team surface: real-time multiplayer editing of the same Artifact on Team and Enterprise plans (several people edit simultaneously, ending the version-passing shuffle), alongside the public sharing above; and Claude Tag support — from a Slack thread you can ask Claude to build an internal Artifact (e.g., a dashboard) and get back a working, shareable page. So an Artifact can now originate from claude.ai chat, Cowork, a Claude Code session, or a Slack thread, and be co-edited live. (raw/x-account-claudedevs-2076789349145092230.md; feature availability per the announcement — verify against the live artifacts docs.)^[inferred — from an x_search synthesis of the announcement thread, not the live product]
  • Artifacts can call MCP connectors, per viewer — now officially confirmed (W29 headline, July 2026). Claude Code artifacts can now call MCP connectors at runtime. Each viewer’s own connected MCP connectors are used — not the creator’s — so a dashboard or tool is built once and each viewer sees live data or can take actions scoped to their own access, with no need to re-run the session for a refresh. Viewers approve access before the page’s first connector call. Available on Pro, Max, Team, and Enterprise. First surfaced in an X signal (raw/x-account-claudedevs-2077489907350856038.md, 2026-07-15, @ClaudeDevs); confirmed as a W29 headline feature in ai-research/claude-code-docs-whats-new-w29-2026-07-17.md (official digest page). Also shipping this week: public sharing links for connector-powered artifacts and editor roles for collaborative editing on Team and Enterprise — these allow wider distribution while the MCP connector calls themselves require viewer authentication. Docs: code.claude.com/docs/en/artifacts#pull-live-data-with-mcp-connectors. See What’s New — Week 29 for the full W29 context.

What Artifacts can be

  • React components — interactive UI, state management, embedded logic.
  • HTML pages — single-file landing pages, dashboards, mockups, microsites.
  • SVGs — vector graphics, diagrams, icon sets, custom illustrations.
  • Code snippets — any language; syntax-highlighted, copyable, runnable in-pane where supported.
  • Documents — long-form markdown rendered as styled prose; iteratable section-by-section.
  • Diagrams — Mermaid / flowcharts / architecture maps rendered as persistent objects (distinct from ephemeral inline diagrams).
  • Mini-apps — with the persistent-storage + API-access upgrade, an Artifact can be a customer-feedback tracker, a quote calculator, a personal CRM view — anything that needs durable state and an addressable URL.

Artifacts vs inline rendered output (charts/diagrams)

SurfaceLifetimeStorageShareable URLUI affordance
ArtifactPersistent across sessionsSaved as a standalone objectYes (public link)Right-hand side panel, editable in place
Inline visual (charts, diagrams inside chat)Ephemeral — lives in the conversationNot saved as a fileNoRendered inline in chat thread; click to swap chart type, ask Claude to add variables, drop in CSVs

Both are useful; the choice depends on whether the output needs to outlive the conversation. Inline visuals are the right call for one-shot exploration (“show me this data as a bar chart, now as a line chart”). Artifacts are the right call for anything you want to share, return to, or treat as a deliverable.^[inferred] Inline visuals are free on every plan; Artifacts with persistent storage are paid-tier (see Nate Herk Level 2 for the free-vs-paid split).

When to reach for an Artifact (first-party patterns)

Boris Cherny (Claude Code creator) posted his own prompting patterns for when he asks Claude to produce an Artifact instead of a prose response, calling the feature “life changing.” Four recurring triggers, in his own usage:

  • Explaining architecture or design options — side-by-side tradeoffs render as a structured comparison instead of paragraphs you have to hold in your head.
  • Making session results easier to consume — tables, color-coding, and diagrams in place of a wall of chat text.
  • Drawing charts during data analysis — a rendered chart beats describing numbers in prose.
  • Providing high-level overviews of complex PRs — an Artifact walkthrough instead of scrolling a raw diff.

He frames this as Artifacts moving beyond “simple code previews” into a general thinking surface for decision-making, visualization, and communication — the alternative to a wall-of-text chat response. Practically, this is a prompting habit as much as a feature: instead of just asking a question, add “…as an artifact” (or name the shape you want — a table, a comparison, a chart) when the answer is structured, comparative, or something you’ll want to reference again. This first-party post lands the same day as the general Pro/Max expansion noted above — Cherny confirming, from the team that builds Claude Code, why that expansion matters in practice.

Claude Code Artifacts — First-Party Launch Detail (2026-07-16)

Anthropic’s own launch post — claude.com/blog/artifacts-in-claude-code — confirms and substantially expands the Claude-Code-artifacts bullet above, which had been sourced only from X signals until now.

  • What ships. Claude Code captures work-in-progress as a live web page — PR walkthroughs, system explainers, filterable/sortable dashboards, release checklists that fill themselves out as work completes.
  • Built from full session context, not wired-up data sources. An artifact can pull together the failing test and its function from your codebase, an error spike from a connected monitoring tool, and the root-cause reasoning from the session itself — in one page. “You don’t need to wire up data sources or stand up infrastructure. You ask for a page, and Claude Code builds it from what already exists.”
  • Live, versioned, in place. Every publish updates the same URL — open tabs refresh automatically and teammates see changes the moment they’re published. Every publish is a new version at that link, with version history so you can restore any prior state, and a gallery to browse and manage every artifact you’ve made. This confirms, for the Claude Code surface specifically, the general versioning behavior this article previously marked ^[inferred] for claude.ai Artifacts at large (see Key Takeaways above) — the claude.ai-chat case itself remains unconfirmed by a first-party source.
  • Anthropic’s own headline use case: debugging. An engineer starts an incident investigation before standup; Claude Code works the logs and publishes an artifact (timeline, suspect commits, error-rate chart); she shares the link from the page header; by standup, Claude has republished it twice as the investigation progressed. Nobody has to “walk us through what the agent found” because the team is looking at the same live view.
  • Private by default, org-only, never public. Every Claude Code artifact is private to its author until shared with teammates/org from the page. Unlike claude.ai chat Artifacts (which support public sharable links — see Key Takeaways above), Claude Code artifacts are viewable only by authenticated org members and cannot be made public. This is a deliberate surface-specific restriction, not a contradiction of the chat-side public-link capability — the two surfaces have different default trust boundaries.
  • Admin controls at launch: an org-level on/off toggle, role-based scoping, retention-policy settings, and org-wide visibility through the compliance API — governance levers that pair directly with the admin spend/analytics controls in Anthropic’s contemporaneous admin-visibility post (that post’s dashboard tracks “artifacts created” as a usage/cost metric) and the access-policy model in Agent Guardrails.
  • Availability confirmed, and a dating clarification. Beta, Claude Team and Enterprise orgs only, from the Claude Code CLI and desktop app; pages viewable in any browser. This first-party post does not mention Pro/Max at all — consistent with it being the original beta-launch announcement that the X-sourced bullet above already dated to 2026-06-18. The Pro/Max expansion (2026-07-02), the multiplayer-editing / Claude Tag capability (2026-07-13), and the per-viewer MCP-connector capability (2026-07-15) remain sourced only from X signals as of this update — no first-party post has corroborated those three follow-on expansions yet.

(Source: ai-research/claude-blog-artifacts-in-claude-code.md.)

Open Questions

Try It

  1. Build one persistent Artifact. Open a new claude.ai chat (Pro or above) and ask: “Build me a simple customer-feedback tracker as an Artifact — name, email, feedback, date. Save it and give me a public link.” Watch the Artifact pane open, then copy the share URL.
  2. Compare inline vs Artifact. In one chat, ask Claude to “show me last quarter’s revenue as a bar chart” (inline). In another, ask for the same data “as an Artifact dashboard I can share.” Note the difference in lifetime and UI.
  3. Graduate to Cowork Live Artifacts. Follow the 7-recipe walkthrough — pick the dashboard matching your most painful daily tool-hop (morning command center, sales pulse, support pulse) and pin it to your Cowork sidebar.

Graph View

Backlinks