Claude Toolkit

Claude Code Artifacts: Give Clients a Live Build Dashboard in 2026

Mike Kwal
· 9 min read
A blueprint schematic showing a central Claude Code icon feeding into three browser windows, which are all updating a dashboard in real time.

What’s in this article

🚀 Plug this into Claude Code or Claude Desktop

This post includes the client message template, but the downloadable spec is a full project management workflow. It tells Claude how to set up, manage, and communicate a live Artifact-based build to a client from start to finish.

Want to turn this into a standard operating procedure for your agency? We build these systems in the Talk-to-Build community.

What if you could kill the client progress update meeting forever? No more screen shares, no more staging server links, no more slide decks with static mockups. Just one link you send the client, where they can watch your AI build their dashboard or website in real time.

That’s not a future concept; it’s what Claude Code Artifacts just shipped for Team and Enterprise plans. This is the how-to guide. I’m going to show you exactly how I use it to give clients a live window into my builds, with the exact templates I use for the handoff.


What are Claude Code Artifacts?

Claude Code Artifacts is a feature that turns a Claude Code session into a live, interactive, and shareable webpage at a private URL. It allows team members and clients to view the output of a coding session—like a data dashboard or a web component—as it’s being built by the AI, with the content refreshing in real time.


The Artifacts Handoff Pack I Use — Copy It

The key to making Artifacts work is setting client expectations. This isn’t just a link; it’s a new way of collaborating. I send a clear message explaining what they’re seeing and how to use the version history. This template replaces a 30-minute kickoff call and gets the client comfortable immediately.

# Claude Code Artifacts: Client Handoff Kit

## Part 1: The Claude Code Command

Inside your Claude Code session, use the command to generate the Artifact. The exact syntax may vary, but the intent is to render the session's output to a shareable link.

`// generate_artifact(name="Client Dashboard v1", share_with=["[email protected]"])`


## Part 2: The Client Email/Message Template

Subject: Your Live Project Dashboard is Ready

Hi [Client Name],

Here is the private link to your live project build:
[Insert Artifact URL here]

This is not a video or a mockup. It's a live webpage that updates in real time as our AI agent works on it. You can watch charts, text, and layouts appear as they are built.

On the right side of the page, you'll see a version history. You can click any previous version to see how the project looked at that point. This is great for comparing changes.

Let me know what you think. No meeting needed—just watch the progress at your convenience.

Best,
Mike


## Part 3: The Pre-Flight Checklist

[ ] Confirm client is on a Claude Team/Enterprise plan (or has guest access).
[ ] Brief client on what an Artifact is *before* sending the link.
[ ] Double-check sharing permissions are set correctly for their email.
[ ] Have the initial data sources or code ready to go before starting the session.
[ ] Remind the client that this is a work-in-progress, not the final polished product.

This three-part asset is my standard operating procedure. It ensures the tech works and the client understands the value of what they’re seeing. When I started building with the Claude Toolkit, establishing clear communication protocols like this was the biggest unlock.

+------------------+      +------------------+      +------------------+
| My Claude Code   | ===> |  Live Artifact   | <=== | Client's Browser |
| Session (Building) |      | (Private URL)    |      | (Viewing)        |
+------------------+      +------------------+      +------------------+
       |                      ^                      |
       | Real-time push       | Instant updates      | Watches live     |
       +----------------------+----------------------+ 

Here’s exactly how I’d do this

My process for launching a client-facing Artifact is a four-step loop that goes from a standard coding session to a shared, live dashboard. The key is activating the Artifact feature at the start of the session and setting the correct permissions so the client can view the private URL without friction.

  1. Start a new Claude Code session. I begin as I would with any other build, setting up my project environment and loading the initial files or data sources. The Artifact is a viewport into this session, so the session itself has to be running.
  2. Generate the Artifact. I use the specific command or UI button within Claude Code to create the Artifact. This generates the unique, private URL and opens up the sharing settings. This step is the only real change to my normal workflow.
  3. Set permissions and share the link. In the sharing dialog, I add the client’s email address. The system is locked down by default to members of my organization, so I have to explicitly grant them access. I then copy the URL and paste it into the email template from the asset above.
  4. Run the build. With the client watching, I start giving Claude commands to build the dashboard, component, or page. They see the output update on their end instantly. The experience of a client watching the AI build live is the moment they understand the value.

What this changes for designer-run agency work

Claude Code Artifacts fundamentally alter the client service model for agencies by replacing periodic, static updates with continuous, transparent progress. This shift eliminates low-value communication overhead and shortens feedback cycles from weeks to minutes, letting designers and builders focus on the actual work instead of the presentation of the work.

Dimension Old way (Static Updates) New way (Live Artifacts)
Client Updates Weekly Zoom calls with screen shares or static PDF/Figma mockups. A single, persistent URL the client can check anytime.
Feedback Loop Client provides feedback via email days later, based on a static image. Client messages in real-time as they watch the build happen.
Version Control Manually saving file versions (`design_v4_final_FINAL.psd`). Automatic version history is logged with every change in the Artifact.
Transparency Client sees polished deliverables, not the process. Creates anxiety. Client sees the raw, live build. Builds trust and understanding.

The biggest change is moving from a “big reveal” model to a “constant collaboration” model. It feels more like the client is in the room with you, which builds enormous trust. If you can talk it, you can build it—and now the client can watch.


My $0.02 — How I’d roll this out

I would introduce Claude Code Artifacts to my agency’s workflow over three days, starting internally to build confidence before ever showing it to a client. The goal is to make this feel like a natural extension of our process, not a risky experiment. This is about making our work better, not just newer.

Day 1 — Internal project only. I’d pick a small, internal tool we need—like a simple dashboard for tracking project hours—and build it using an Artifact. The only people with the link would be my own team. This lets us kick the tires, understand the versioning, and find any rough edges without client pressure.

Day 2 — Pilot with one trusted client. I’d choose a client I have a great relationship with and introduce the concept as a beta test. I’d use the handoff template to explain what it is and frame it as a way for them to get faster visibility. Their feedback would be crucial for refining the process.

Day 3 — Standardize and productize. Once I’ve proven the workflow, I’d make it the default for all new projects. I’d update my agency’s standard operating procedures and client onboarding documents to include the Artifacts process. I might even position it as a premium feature of our service: “Live Build Dashboards.”


FAQ

What Claude plans include Artifacts?
Claude Code Artifacts are available on the Team and Enterprise plans. It is not currently available on the individual Pro or free plans, as the feature is designed for collaborative work within an organization.

Are Claude Code Artifacts secure and private?
Yes. Artifacts are private by default and can only be viewed by authenticated members of your organization. You must explicitly grant access to external users, like clients, on a per-user basis. They cannot be made public to the general internet.

Can a client accidentally break the build by viewing an Artifact?
The Artifact is a read-only view of the output. The client cannot interact with the code or the Claude Code session itself through the Artifact URL. They are observers, not editors, so there is no risk of them disrupting the build.

How is this different from a staging server?
A staging server shows a snapshot of the project after a developer pushes a new version. An Artifact is a live stream of the build as it happens, updating character by character. It shows the process, not just the periodic result.

Does creating an Artifact cost extra credits or tokens?
Anthropic has not stated that there is an extra cost per-Artifact beyond the standard tokens used in the Claude Code session itself. The cost is associated with the computation of the code, not the act of sharing the output.

Can clients roll back to a previous version themselves?
Yes. The Artifact interface includes a version history panel. Clients and team members can click on any previous version to view the state of the build at that moment. This is one of its most powerful features for reviewing changes.


Want help applying this?

Four ways to go deeper:

  • Build with Builders. Join the Talk-to-Build community to learn to build AI-native websites, cinematic AI video, and agent-driven workflows you can sell.
  • 1-on-1 working session. Book a screen-share with me — bring a real problem, leave with a working piece of it.
  • Done-for-you. MK-Way builds AEO-ready websites, apps, and AI agent workflows.
  • Quick question. DM me on Instagram or LinkedIn. I read every message.

Part of the AI Pulse series. If you commented “ARTIFACTS” on one of my videos — this is the breakdown.

Last updated: 2026-07-09.