Claude is excellent at building things you want to show other people: a pricing calculator, an interactive chart, a landing page draft, a slide deck for tomorrow’s meeting. The hard part is the last step — getting it out of the chat and onto a link someone else can open. This guide shows the fastest way to deploy a Claude artifact to a live URL, and what to watch out for.
What is a Claude artifact?
An artifact is a self-contained piece of content Claude produces alongside its reply: a single-file HTML page, a React component, an SVG diagram, a Markdown document, a CSV table, a code file and so on. Artifacts are designed to be complete on their own, which makes them ideal to host — there is usually no build step and nothing else to install.
Why give an artifact its own URL?
- Anyone can open it. Stakeholders, clients and teammates don’t need a Claude account or to run code locally.
- It works everywhere. A URL opens on phones, in Slack previews, in email and inside docs.
- It lasts. A permanent link can go into a spec, a pitch deck or a support article and keep working.
The fastest way: deploy from inside Claude with MCP
The Model Context Protocol (MCP) lets Claude call external tools. ArtifactDeploy is a remote MCP server with a deploy_artifact tool, so Claude can publish what it just built and hand you the link in the same reply. One-time setup takes about two minutes.
Step 1 — Create a free account
Sign up with your email and confirm it. No credit card is needed.
Step 2 — Connect Claude
In Claude.ai, Claude Desktop or the Claude mobile app: open Settings → Connectors → Add custom connector, paste https://mcp.artifactdeploy.com/mcp, click Connect and sign in to ArtifactDeploy. There is no key to copy.
In Claude Code, add the server and then authenticate with /mcp:
claude mcp add --transport http --scope user artifactdeploy https://mcp.artifactdeploy.com/mcpThe setup guide covers every option in more detail, including API keys for CI and troubleshooting.
Step 3 — Ask Claude to deploy
Build something, then say “deploy this”. You can be more specific: “Deploy this as ‘Q3 revenue dashboard’” or “Deploy this slide deck and make it private.” Claude calls the tool and replies with a URL such as https://q3-revenue-dashboard-4f2a1c.artifactdeploy.com.
What happens under the hood
- Claude sends the artifact’s title, content and type to the MCP server, authenticated with the token your connector received when you signed in (or your API key).
- ArtifactDeploy stores the file, creates a unique slug from the title and registers a subdomain for it.
- When someone opens the URL, the file is served in the right viewer for its type — HTML as a page, slides with Reveal.js, Markdown typeset, CSV as a searchable table.
Tips for better deployments
- Ask for a single file. Artifacts that inline their CSS and JavaScript (or load libraries from a CDN) deploy cleanly.
- Name it well. The title becomes part of the URL, so “Onboarding flow v2” is better than “Untitled”.
- React components just work. npm imports like
lucide-reactorrechartsand Tailwind classes are supported. The one exception is shadcn/ui (@/components/ui/…), which only exists inside Claude’s preview — ask Claude to inline those components. - Keep drafts private. Mark work-in-progress deployments private so the URL doesn’t serve publicly.
Updating and removing deployments
Ask Claude to “list my deployments” to see everything you’ve published, or “delete the deployment q3-revenue-dashboard-4f2a1c” to take one offline. The dashboard shows the same list with search, copy-link and delete buttons.
Other options
You can also copy the code into a file and host it on a static host such as GitHub Pages, Netlify or Cloudflare Pages. That’s a good choice for long-lived projects with a Git history, but it takes more steps for every artifact. We compare all the options in How to share Claude artifacts.