Claude Artifacts Are Now in Claude Code: What It Means for Product Managers

Claude Code can now publish artifacts: live, interactive web pages that ship straight from your coding session to a private URL on claude.ai.

If you searched "claude code artifacts" and landed on advice about the 2024 chat feature, you found the wrong thing. This guide covers the Claude Code version: what it is, how it differs from claude.ai chat Artifacts, how to publish your first one step by step, how the sharing and permissions model works, and the one place artifacts still fall short.

Claude Code Artifacts vs claude.ai Chat Artifacts: Not the Same Thing

Searchers mix these two up constantly, so let's settle it upfront.

Claude.ai chat Artifacts (launched in 2024) are the interactive panels that render next to your conversation on claude.ai: a snippet of code, a document, a small React app, all living inside the chat window.

Claude Code artifacts (launched June 2026) are something different. Claude Code writes an HTML or Markdown file inside your project, then publishes it as a standalone web page at a private claude.ai URL. The page lives outside the session, updates in place as Claude keeps working, keeps a version history, and can be shared with your team or the public. It can even pull live data through your MCP connectors every time someone opens it.

	claude.ai chat Artifacts	Claude Code artifacts
Where it lives	Inside a chat conversation panel	A standalone page at a private claude.ai URL
Source	Generated in chat	An HTML or Markdown file in your repo
Updates	You re-prompt in the same chat	Republished to the same URL, viewers see updates live
Sharing	Publish from the chat UI	Private by default, share to specific people, your org, or a public link
Live data	Limited	Can call your MCP connectors on every page load
Context	Whatever is in the conversation	Your entire codebase, files, and connected tools

Same word, two different products. The rest of this article is about the Claude Code version, with the chat version as a reference point.

What Are Claude Code Artifacts?

An artifact is a self-contained, interactive page that Claude Code builds and publishes for you. Instead of handing you a block of code to copy and run yourself, or a wall of terminal text to scroll through, Claude turns the output into a finished page you open in a browser.

A Claude Code artifact can be:

• A mini web app (a clickable prototype, a small tool, an interactive widget)
• A document (a formatted PRD, a one-pager, a spec)
• A data visualization (a chart, a dashboard, a status board)
• A walkthrough (an annotated PR diff, an investigation timeline that fills in as Claude works)

The defining feature is not the format. It is that the result is rendered, hosted, and shareable, not raw code. You get a URL you can immediately drop in Slack, with zero build step, zero hosting setup, and zero deployment in between.

How to Publish an Artifact From a Claude Code Session (Step by Step)

There is no slash command and no special syntax. You ask for an artifact in plain language, and Claude Code handles the rest.

Prerequisites: a Pro, Max, Team, or Enterprise plan, and a session signed in with /login (a claude.ai account, not an API key). You also need a recent version of the CLI or the Claude desktop app.

Here is the full workflow:

1. Ask for an artifact in plain language. Name the output you want: "Make an artifact that walks through this PR with the diff annotated inline" or "Build a dashboard artifact of last week's deploy failures by service."
2. Claude writes the page as a file in your project. It creates an HTML or Markdown file (Markdown renders as styled HTML), inlining all CSS and JavaScript so the page is fully self-contained.
3. Approve the publish prompt. Before publishing a new artifact, Claude Code asks for permission, something like: Claude wants to publish "Deploy failures by service" (deploy-failures.html) to a private page on claude.ai. Select Yes.
4. Open the URL. Claude prints the link and your browser opens the new page automatically. Press Ctrl+] anytime to reopen the most recent artifact from the terminal.
5. Iterate. Ask for changes ("add a per-region breakdown below the summary chart and republish") and Claude edits the file and publishes again to the same URL. Anyone with the page open sees the update in place.

One nice detail: Claude Code applies a built-in design skill when it builds the page, and it looks for an existing design system in your project first. If you record your design tokens (colors, typography, spacing) in your CLAUDE.md or a theme file, artifacts come out matching your product's branding instead of a generic template.

Three worked examples

A dashboard from session data. You just asked Claude Code to dig through last week's deploy logs. Instead of reading the summary in the terminal: "Turn this into a dashboard artifact: failures by service as a bar chart, a timeline of incidents, and a table of the top 5 recurring errors." Two minutes later you have a link for the team standup.

A stakeholder-ready report. After a discovery session where Claude analyzed 30 user interview transcripts: "Publish an artifact that lays out the top 5 themes, each with representative quotes and a severity score. Make it presentable for a leadership review." You share the URL instead of assembling slides.

A feature mockup from your codebase. Because Claude Code works inside your repository, it can build a mockup that pulls from your actual design system: "Create an artifact showing three layout options for the new settings panel, using our existing design tokens, laid out side by side with a one-line tradeoff under each." The result looks like your product, which is exactly what makes stakeholders take it seriously.

Private by Default: Sharing, Updating, and Versioning

Every new artifact is visible only to you. Nothing goes anywhere until you decide it does. From there, the sharing model is simple:

• Within your organization (Team and Enterprise plans): grant access to specific people or to everyone in your org. Viewers sign in to claude.ai to see the page.
• Publicly: share a link anyone on the internet can open, no sign-in required. On Pro and Max plans this is the only sharing option. On Team and Enterprise plans, public sharing is off until an admin enables it for the organization.
• Editors (Team and Enterprise): you can upgrade someone from viewer to editor. They give Claude the artifact's URL in their own session, and their changes republish to the same page.

Updating is where artifacts quietly beat every "export a PDF" workflow. Each publish becomes a version, republishing goes to the same URL, and from the Share control you choose which version viewers see. To update an artifact from a different session, just paste its URL and ask Claude to revise it. Without the URL, a new session creates a new artifact instead.

Your full gallery lives at claude.ai/code/artifacts, and the page header names you as the author, so shared pages are never anonymous.

Pulling Live Data With MCP Connectors

This is the newest layer, and the one that turns artifacts from static captures into small living tools. An artifact can call your MCP connectors (GitHub, Slack, Notion, Google Drive, and so on) each time someone views it, so the page shows current data rather than a snapshot from the session that built it.

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

The permissions model is worth understanding before you share one of these:

• The page declares its connectors at publish time. Claude lists which connectors the page may call, and the page cannot call anything outside that declaration.
• Calls run as the viewer, not the author. When someone opens your dashboard, the connector calls go through their own claude.ai account and their own connections. Two people can open the same page and see different data. The page never sees anyone's credentials; claude.ai makes the calls on the page's behalf.
• Viewers approve access first. claude.ai asks each viewer for permission before the page's first connector call. Decline, and you still see the page, just without the live sections.
• Actions run as the viewer too. A page can include buttons that post a Slack message or update an issue. Whoever clicks is who acts.
• No public links. An artifact that calls connectors cannot be shared publicly on any plan. Org sharing (Team and Enterprise) still works.

Only connectors from your claude.ai account qualify for live calls. Local MCP servers you configure in Claude Code (like .mcp.json servers) can feed data while Claude builds the page, but the published page cannot call them at view time.

How Claude Artifacts Help Product Managers

For most product managers, the bottleneck was never having ideas. It was making those ideas concrete fast enough for other people to react to them. Artifacts attack exactly that.

1. They Give Your Ideas a Body

You want to communicate a PRD or a roadmap, and you want it to look like more than another Notion doc. With an artifact you can ship an interactive version: a roadmap people can click through, a spec with a live mockup embedded inside it. The reader stops imagining and starts reacting.

2. They Turn a Feature Idea Into Something You Can Show

You want to demo a small feature internally before a single engineer touches it. Generate an HTML version of that feature as an artifact, drop the link in Slack, and let your team see the flow instead of picturing it. Alignment meetings get shorter when everyone is looking at the same clickable thing.

3. They Let You Build Tiny, Throwaway Tools

There is a whole category of tasks that are too specific to justify a real internal admin tool, but painful enough that you wish one existed:

• A tool to assess the technical feasibility of a project
• A tool to help you draft a particular kind of email
• A tool that takes a meeting transcript and pulls out the decisions

With Claude Code artifacts you build that tool in one session, use it, and move on. No ticket, no roadmap slot, no maintenance.

Why Claude Artifacts Inside Claude Code Are a Game Changer

The idea of an interactive output is not new. What changes is everything around it. Inside Claude Code, artifacts get three powers the chat version never had.

It is still early. Artifacts launched in Claude Code in June 2026 for Team and Enterprise plans, then expanded to Pro and Max shortly after. Most teams have not built a single workflow around them yet. Getting good at it now is an edge.

You get the full agentic suite. Inside Claude Code, an artifact is not generated in isolation. You can drive it with skills, subagents, and custom commands. That means you can wrap repeatable artifact generation into your own workflows instead of prompting from scratch every time. If you want to go deeper on how PMs can build and orchestrate those workflows, the How to Master Claude Code series covers exactly that.

You can generate from inside your codebase. Because Claude Code works in your repository, it can generate artifacts that pull from your actual design system. The widget you show internally looks like your product, not like a generic prototype. That fidelity is exactly what makes stakeholders take a mockup seriously.

According to a 2024 McKinsey Global Survey, 78% of companies globally now use AI in at least one business function, up from 55% the year before. Product teams that learn to work with agentic AI tools today are not catching up; they are pulling ahead.

The upgrade is the environment, not the feature.

The Limits of Claude Artifacts (and Where They Stop)

Every artifact is one self-contained page served under a strict Content Security Policy. In practice that means:

• No external requests. Scripts, stylesheets, fonts, and images from other hosts are blocked, along with fetch, XHR, and WebSockets. Everything is inlined. MCP connector calls are the one exception, and they go through claude.ai, not the page.
• No backend. An artifact cannot store form submissions, authenticate users itself, or hit an API of its own.
• Single page. No routes, no relative links to other files. Multi-section content uses in-page anchors.
• Size cap. The rendered page must stay at or under 16 MiB, and large embedded images are the usual reason a publish fails.

The cleanest way to see where that boundary bites is to compare artifacts against a real build workflow like Claude Code + Lovable MCP (or Claude Code + Vercel).

Claude Artifacts vs Claude Code + Lovable MCP

Dimension	Claude Artifacts	Claude Code + Lovable MCP
Lifespan	Instant and throwaway. Built in one session, meant to be discarded.	Permanent. A real project that persists and grows over time.
Who it's for	Internal buy-in. People already in the room (stakeholders, execs, your eng team).	External user testing. Real users doing real tasks on their own time.
Backend	No real backend. Sandboxed, in-memory state only, no database or auth.	Real backend wired in easily (Supabase): database, auth, persistent data.
Built for	Communication. Making an idea concrete enough to react to.	Validation. Learning whether people actually use the thing.
Question it answers	"Do people get it?"	"Do people use it?"
Data	Nothing sticks. Refresh and it is gone.	Data persists. Users log back in and pick up where they left off.
Ownership	A published page on claude.ai you can version and share, but not a codebase.	A real codebase you own, can export, and can push toward production.

As Jake Knapp noted in his book Sprint, "After one day, you're receptive to feedback. After three months, you're committed." That gap is exactly what the comparison table above maps out.

The takeaway: artifacts are not a fit for real user testing. The moment a user's data does not persist, or they cannot log back in, or the flow fakes the backend, you stop learning anything real. At that point you have crossed into Lovable or Vercel territory. For a hands-on walkthrough of the full Claude Code + Lovable MCP workflow for product managers, that guide covers the exact setup from scratch.

A Concrete Example: Adding a Table Feature to an Excalidraw-Style App

Say you want to pitch a new "table" feature for a whiteboard app like Excalidraw. I walk through this exact example end to end in the video below.

With Claude Code artifacts, you get:

• Nice-looking HTML that shows the feature in context
• A great way to communicate the idea and explore variations quickly
• But limited interactivity when iterating live with stakeholders
• And no path to a real database if you want to go deeper

How the new feature renders via Claude Artifacts

How the new feature renders via Claude Artifacts

With Claude Code + Lovable, you get a full-fledged, ready-to-share feature with real data behind it, like this: live prototype

That also answers a question I got on LinkedIn about version control: tools like Lovable are not just disposable prototype canvases. They also give you versioning, so as more non-coders start shipping internal tools, you still have a way to track changes, roll back, manage iterations, and then push directly to production.

How the new feature renders inside Lovable

How the new feature renders inside Lovable

Same idea, two very different fidelities. The artifact answers "do people get the table feature?" The Lovable build answers "do people actually use it?"

See It in Action

Claude Code Artifacts for Product Managers

Product managers sit at the intersection of alignment and validation, and that is exactly where Claude artifacts are most powerful.

On the alignment side, artifacts make your ideas undeniable. A clickable prototype that looks like your real product communicates a spec better than ten Notion pages. Stakeholders stop asking "but what would it actually look like?" because they are already looking at it.

On the validation side, knowing when to move from an artifact to a Lovable prototype is itself a PM skill. The framework is simple: use the artifact for internal buy-in, then move to Lovable when you are ready to put something in front of real users and collect real data. Understanding how the PM role is evolving around tools like Lovable puts that transition in context.

Gartner projects that by 2027, more than 50% of the enterprise software engineers will use AI coding assistants, a number that will reshape how PMs need to collaborate with engineering. Learning to work alongside these tools now changes how fast your ideas move.

The specific workflows:

• Weekly spec reviews. Instead of sharing a Notion document, generate an artifact at the end of your spec-writing session and share the link. Your engineering team reviews something they can click, not something they have to read.
• Stakeholder demos. Use Claude Code to generate an artifact from your codebase before a leadership review. The prototype inherits your design system, so it looks production-quality even at day zero. If you want to see how this fits into a broader AI agent stack for product managers, that article maps the full workflow.
• Discovery sprints. Build small throwaway tools per session to help structure user interview data, map out decision trees, or synthesize competing hypotheses into a visual. Use and discard.
• Living status boards. With MCP connectors, publish a board that pulls your open PRs, tickets, or launch checklist live on every page load. One link in the team channel replaces the weekly status update.

Artifacts and Lovable Are Complementary, Not Competitors

They sit at different rungs of the same ladder:

Idea → Artifact (align internally) → Lovable (validate with real users) → production build.

Use Claude Code artifacts when you need to make an idea concrete and get buy-in today. Move to Claude Code + Lovable when you need real users, real data, and real behavior over time. A hands-on starting point for that Lovable step is the Build a Professional Frontend Prototype series, which walks through the full workflow from idea to shareable prototype.

The skill is not picking one tool. It is knowing how much fidelity each idea has earned. Artifacts answer "do people get it?" Lovable answers "do people use it?" Both questions matter. One comes first. And for PMs who want to sharpen their judgment on when to use Claude Code's plan mode before generating an artifact, that planning step can save significant rework downstream.

Frequently Asked Questions

What is the difference between Claude Artifacts and Claude Code artifacts?

Claude.ai chat Artifacts are interactive panels that render inside a conversation on claude.ai. Claude Code artifacts are standalone web pages that Claude Code publishes from a coding session to a private URL on claude.ai, with version history, team sharing, and optional live data through MCP connectors. Same name, two different features.

Is there a slash command to create an artifact in Claude Code?

No. There is no /artifact command. You ask in plain language ("make an artifact that shows...") and Claude Code writes the page, asks permission to publish, and prints the URL.

Which plans include Claude Code artifacts?

Pro, Max, Team, and Enterprise. The session must be signed in with a claude.ai account via /login; sessions authenticated with an API key or through Bedrock or Vertex cannot publish. On Enterprise plans, an admin has to enable artifacts first.

Are Claude Code artifacts public?

No. Every new artifact is private to you. You choose whether to share it with specific people, your whole organization (Team and Enterprise), or a public link. On Team and Enterprise plans, public sharing stays off until an org Owner enables it.

Can I update an artifact after publishing it?

Yes. Ask Claude to revise the page and it republishes to the same URL. Each publish becomes a version, and you pick which version viewers see. To update from a different session, paste the artifact's URL into the prompt; without it, a new session creates a new artifact.

Can an artifact fetch live data or call APIs?

Not directly: a strict Content Security Policy blocks all external requests. The exception is MCP connectors. A published page can call the connectors it declared at publish time, and every call runs through the viewer's own claude.ai account after they approve access. Connector-backed artifacts cannot be shared publicly.

Why can't Claude Code publish my artifact?

The usual causes: you are signed in with an API key instead of /login, your plan or organization has artifacts disabled, your CLI version is too old, or the rendered page exceeds the 16 MiB limit. When publishing is unavailable, Claude typically writes a local HTML file instead of a link.

Can a Claude Code artifact have a backend or database?

No. An artifact is a single static page: no server, no database, no auth of its own, and form input does not persist. If you need real users, logins, and persistent data, that is the point where you move to a real build workflow like Claude Code + Lovable or a deployed app.