Move Exported Claude Artifacts to Another Host

Moving a Claude Artifact to your own host

A Claude Artifact is useful while you build. Claude writes a page, a dashboard or a small tool, and you see it run next to the chat. Later, you can move it to your own domain, behind your own access rules, or into a repository that other tools can edit.

In short, get the complete code and rebuild it as a normal static site. A React artifact needs a build step. Replace any feature that depends on Claude itself. Deploy the site to a host such as Cloudflare Pages, Netlify or GitHub Pages, and test it. Only then unpublish the original.

What can move, and what stays behind

Many artifacts are self-contained front-end code: a single-page website, a React interface, an SVG, a dashboard or a document. That code can run on any static host.

Some artifact features belong to Claude and do not move with the code (Anthropic’s artifact guide):

• An artifact can have AI-powered features that call Claude directly. Each user signs in to their own Claude account, and no API key is involved. Outside Claude, that sign-in does not exist.
• On paid plans, an artifact can have persistent storage: data that stays between sessions, either per user or shared. That data stays with the artifact.
• An artifact can use connected apps: it reads from and writes to apps connected to your Claude account. Those connections do not move with the code.

If your artifact uses none of these features, you mostly copy the files and test them. If it uses one of them, plan a replacement before you switch.

1. Ask Claude to list the dependencies

In the artifact’s conversation, ask Claude to list what the artifact needs:

Before I move this artifact to my own static host, list:
1. Every file and asset it needs.
2. Whether it is plain HTML or a React component.
3. Every package it imports.
4. Any feature that calls Claude, uses artifact storage or uses a connected app.
5. Any external API it calls, and whether that call needs a secret key.
6. Any data from this conversation that is embedded in the code.

Before you continue, remove private prompts, customer data and credentials from the code. Visitors can read anything that you deploy to a static host.

2. Get the complete code

Open the artifact. Use the controls at the top of the artifact panel to view, copy or download its code. If you prefer, ask Claude for a clean package:

Package this artifact as a static website I can host anywhere.
- Put index.html at the top level and keep every asset in the same folder.
- Use relative paths.
- If this is a React component, give me the full component file and
  list the npm packages it imports.
- Do not include API keys, private prompts or customer data.
- Tell me plainly about any feature that will not work outside Claude.

A plain HTML artifact usually needs only one index.html. Save it and open it in your browser. Then go to step 5.

3. Turn a React artifact into a deployable build

A React artifact is a component (one part of a user interface), not a finished website. Wrap it in a small Vite project:

npm create vite@latest my-artifact -- --template react
cd my-artifact
npm install

Then:

1. Replace the contents of src/App.jsx with the artifact’s component. If the component is the file’s default export, the template’s main.jsx renders it without changes.
2. Install every package that the component imports. For example, run npm install <package-name> for a chart or icon library.
3. If the component uses Tailwind class names (such as p-4 or text-gray-700), add Tailwind. Run npm install tailwindcss @tailwindcss/vite. Add the tailwindcss() plugin to vite.config.js. Put @import "tailwindcss"; at the top of src/index.css (Tailwind with Vite).
4. Run npm run dev. Compare the result with the original artifact.
5. Run npm run build. Vite writes the finished site to dist (Vite deployment guide). You upload that folder.

4. Replace Claude-only features

Feature in the artifact	Replacement on your own host
Calls to Claude	A server-side function (Cloudflare Pages Functions, Netlify Functions or Vercel Functions) that calls the Anthropic API. The host keeps the key as a secret
Artifact storage, per user	The browser’s localStorage, if the data can stay on one device
Artifact storage, shared	A database or a hosted backend service
Connected apps	Your own server-side code that calls the API of that app

Never put an API key in front-end JavaScript or a Vite VITE_ variable. Vite bundles those values into the code that visitors download (Vite env variables).

If a feature is not worth the rebuild, remove it. Tell visitors on the page that the feature is gone. A good-looking copy that silently loses a key feature is not a successful migration.

5. Deploy to a static host

Any static host works. These are three common choices:

• On Cloudflare Pages, go to Workers & Pages. Select Create application > Get started > Drag and drop your files. Name the project and drag in the folder (dist for a React build). Then select Deploy site (Direct Upload).
• On Netlify, log in and open Netlify Drop. Drag the folder into the deploy zone (Netlify deploys). Our Netlify deployment guide shows each screen.
• On GitHub Pages, commit the files to a repository. Set Settings > Pages > Source to Deploy from a branch. For a Vite build at https://<user>.github.io/<repository>/, first set base: '/<repository>/' in vite.config.js (Vite on GitHub Pages).

Use the host’s temporary address (such as <project>.pages.dev) to test the site. Move a custom domain only after the new site works.

6. Test the new copy

Open the new address in a private browser window. Then test these items:

• Every link, button and interaction.
• Direct reloads of nested routes, not only clicks from the home page.
• Images, fonts and downloads.
• The browser console, for errors and failed requests.
• The page source, for private content that must not be there.
• Every feature that you replaced or removed in step 4.

7. Set access before you load private content

A static host makes the site public by default. If the artifact shows client work or internal data, protect it before you share the link:

• On Cloudflare Pages, Cloudflare Access lets only the email addresses that you allow sign in. See our Cloudflare Pages access guide.
• On Netlify, a site-wide password is available on Pro and Enterprise plans.
• On GitHub Pages, sites are public, even from a private repository on most plans (GitHub Pages). Use another host for private material.

8. Unpublish the original only after the new copy works

When the replacement is live, tested and protected:

1. Save any source material that you are allowed to keep.
2. Export anything that you need from the artifact storage. Then open the original artifact and select Unpublish. On Team and Enterprise plans, the shared artifact has Unshare instead.
3. Note what Unpublish does. It revokes access, and you cannot publish the same artifact again. It also permanently deletes any personal or shared storage data that the artifact used (publishing and sharing artifacts).
4. Open the old public link in a signed-out browser. Make sure that it no longer shows the artifact.
5. Replace links and bookmarks with the new address.

Anyone with the link can open a published artifact without a Claude account. Our guide to finding public Claude Artifacts in Google explains why client material must not depend on an obscure public address.

What does not migrate with a Claude Artifact export

When you copy the files, you do not get Claude’s built-in AI calls, artifact storage or connected apps. You also do not get secret keys or any sign-in tied to Claude accounts. Static front-end behavior moves without problems. Everything else needs a replacement on your host, or you must remove it.

The safest order is: list the dependencies, get the code, build, replace, deploy, test, protect, and then unpublish the old artifact.

A docs portal with Ask AI
and support tickets

Connect a repository, or describe your product to start. Each docs site has search, Ask AI, an API console, an MCP server and support tickets.

• Publishes from GitHub on every push
• Works with Mintlify repositories
• API console from your OpenAPI file
• MCP server and llms.txt for AI agents
• Ask AI and support tickets
• Analytics for people and AI agents

Start Free→ Questions? Ask AI in our docs

No card required.