# Move Exported Claude Artifacts to Another Host

> Move a Claude Artifact to Cloudflare Pages, Netlify or GitHub Pages: get the code, build React artifacts, replace Claude-only features, then unpublish.

## 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](https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them)):

- 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:

```text
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:

```text
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:

```bash
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 ` 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](https://tailwindcss.com/docs/installation/using-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](https://vite.dev/guide/static-deploy)). 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](https://vite.dev/guide/env-and-mode)).

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](https://developers.cloudflare.com/pages/get-started/direct-upload/)).
- On Netlify, log in and open [Netlify Drop](https://app.netlify.com/drop). Drag the folder into the deploy zone ([Netlify deploys](https://docs.netlify.com/deploy/create-deploys/)). Our [Netlify deployment guide](/blog/publish-ai-site-netlify/) 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:// .github.io/ /`, first set `base: '/ /'` in `vite.config.js` ([Vite on GitHub Pages](https://vite.dev/guide/static-deploy)).

Use the host's temporary address (such as ` .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](/blog/how-to-password-protect-a-cloudflare-pages-site/).
- On Netlify, a site-wide password is available on [Pro and Enterprise plans](https://docs.netlify.com/manage/security/secure-access-to-sites/password-protection/).
- On GitHub Pages, sites are public, even from a private repository on most plans ([GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site)). 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](https://support.claude.com/en/articles/9547008-publish-and-share-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](/blog/find-public-claude-artifacts-in-google-and-unpublish-yours/) 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.

## Frequently Asked Questions

### Will the new site change when I edit the artifact in Claude?

No. The hosted copy is separate from the artifact. When you want a change, ask Claude for the updated files and replace them in your project. If it is a React project, build it again. Then deploy again to the same host project, so that the address stays the same.

### Can Claude Code do the migration for me?

It can do most of the work on your computer. It can create the Vite project, add the component, install packages and run the build. It can also deploy with a host's command-line tool, such as Wrangler or the Netlify CLI. For this step, the tool must be installed and logged in. Before you unpublish the original artifact, review the result and test the live site yourself.

---

[View the canonical page](https://revdoku.com/blog/how-to-migrate-a-claude-artifact-to-revdoku/) · [Browse llms.txt](https://revdoku.com/llms.txt)