Claude artifacts: from chat to your own domain

You asked Claude for a landing page, a calculator, or an interactive chart, and it produced an artifact: a working page rendered right next to the conversation. It looks finished. It is not online. This guide walks through the whole path from that artifact to a real website on a domain you own, including the parts Claude's own Publish button cannot do.

What a Claude artifact actually is

An artifact is Claude's container for substantial, self-contained output. For websites, that means one of three formats:

• A single HTML file. Markup, CSS, and JavaScript in one document. This is the most common web artifact and the easiest to host anywhere.
• A single-file React component. Claude renders these in the chat using an in-browser Babel plus React UMD setup, so there is no build step. The component lives in one file and compiles in the visitor's browser.
• SVG and other visual documents. Diagrams and graphics that can be embedded in a page.

The important property is "single file". Because the whole site is one document, deploying it is trivial: any static host can serve it as-is. No bundler, no CI pipeline, no node_modules.

Where the format hits its limits

Before you deploy, know what you are working with:

• In-chat rendering helpers do not travel. An artifact that relies on Claude's chat-side renderer, the Mermaid diagram renderer for example, needs the equivalent library loaded in the file itself. For Mermaid, add Mermaid.js via a CDN script tag and the diagrams render standalone.
• Real build steps are a different animal. If Claude gave you TSX with imports across multiple files, that is a project, not a single-file artifact. Run npm run build locally and deploy the dist folder instead.
• Claude's Publish keeps ownership at Anthropic. The built-in Publish option puts your artifact on a claude.ai URL with a fixed Created-with-Claude header. There is no custom domain, no control over the OG image, favicon, or meta tags, no analytics, and Anthropic can unpublish the page. Fine for sharing a prototype, wrong for anything you want to look like yours.

That last point is the reason this guide exists. The fix is to move the file to hosting you control.

Step 1: paste the deploy guide into the conversation

The fastest route that works in any Claude client is the deploy guide, a single instruction file that teaches the AI how to publish to VibeDeploy.

1. Start a 14-day free trial. No credit card is needed.
2. In the dashboard, export your deploy guide. It contains your deploy credentials and the exact API instructions.
3. Paste the guide into the same conversation where the artifact lives and say "deploy this".

Claude reads the instructions, sends the artifact's files to the VibeDeploy API as a JSON payload, and replies with a live URL of the form https://yourname.vibedeploy.be. Open it in a normal browser tab: same page, but now it exists outside the chat, served over HTTPS from Belgian infrastructure.

If you use Claude Desktop or Claude Code, there is an even shorter route: connect the VibeDeploy MCP server at https://mcp.vibedeploy.be/mcp once, and from then on "deploy this" needs no pasted guide at all. Claude calls the deploy tool directly. Both flows are covered in more depth on the Claude artifacts page.

Step 2: check the deployed page

Almost every single-file artifact works identically once hosted. Run through this quick list anyway:

• Console errors. Open the browser dev tools. A missing CDN script shows up here first.
• External resources. If the artifact loads fonts, images, or libraries over http://, switch them to https:// to avoid mixed-content warnings.
• The title tag. Claude often leaves a generic title. Ask Claude to set a proper <title> and meta description, then redeploy. On your own hosting you control all of this, which is exactly what claude.ai publishing denies you.

Redeploying is the same sentence again: "update the site with these changes". Every deploy is recorded, so a bad revision can be rolled back.

Step 3: put it on your own domain

A *.vibedeploy.be subdomain is fine for testing. For anything public-facing, attach your own domain:

1. Open the site's settings in the dashboard and choose Domains, then Add domain.
2. Enter the domain and add the DNS records shown: an A record for the apex (example.com) pointing at VibeDeploy's edge IP, and a CNAME for www pointing at proxy.vibedeploy.be.
3. Wait for DNS to propagate. Most registrars take a few minutes.

Once the records resolve, VibeDeploy issues a Let's Encrypt certificate automatically, usually within 60 seconds, and the artifact is live on https://example.com. No Created-with-Claude header, your favicon, your meta tags, and analytics if you want them: the dashboard tracks traffic per site, and because you own the HTML you can drop in any analytics snippet.

The iteration loop

The real payoff shows up on the second deploy. Your workflow becomes: describe a change to Claude, Claude edits the artifact, Claude redeploys it, the custom domain serves the new version. The chat that built the site also maintains it. Compare that with the old loop of copying code into an editor, committing, and waiting for a pipeline.

What it costs

The 14-day trial covers a full site with a custom domain, so the entire flow above costs nothing to try. After the trial, plans start at 15 euro per month including Belgian VAT, flat, with custom domains and SSL included on every plan. Details on the pricing page.

Summary

A Claude artifact is a single self-contained file, which makes it the easiest class of website to host. Claude's own Publish parks it on claude.ai with Anthropic's branding and no domain of your own. Moving it takes one pasted deploy guide (or one MCP connection), one sentence, and two DNS records. Fifteen minutes from chat window to https://yourdomain.com, most of which is DNS propagation.

Full tool page with FAQ and comparison table: Deploy Claude artifacts.