Guides
Turn a Claude artifact or a ChatGPT canvas into a real website
Start with the page you already made. Give its code an independent web address, then add the saved data, sign-in and domain it needs. A share link and a complete app are different things to move.
Updated
The short answer
Get the complete code behind the artifact or canvas, then send those files to Tofu through a coding agent or import them from GitHub. Tofu builds the app and publishes it at its own address with HTTPS. A finished HTML page can be enough; a React component needs the rest of the project around it.
If the code is still in the conversation, the Tofu connector in Claude or ChatGPT can send the files the chat writes. It does not turn a shared artifact or canvas URL into a project.
A page that only shows information may need nothing else. A page that saves bookings, signs people in or calls an AI model needs those services connected in the app's code too.
Step by step
Get the complete project
Save or copy the code you can access, or ask the chat for the full web project. Keep the page files, images and other assets together. A React app also needs its dependency list, build command and entry page. A screenshot or a published link cannot stand in for those files.
Replace anything that belongs to the chat platform
Check where the page gets its data. Sample records, browser-only storage, Claude's artifact storage, connected apps and AI calls inside the original workspace do not become a Tofu backend when the files move. Decide which features should keep working, then have the app use a database or service it can reach from its new address. Keep private API keys in the app's server settings, never in browser code.
Send the files to Tofu
For a small project the chat holds in full, connect Tofu using the chat setup guide and ask it to send the app. For a folder on your computer, use a coding agent connected through agent setup. For a GitHub repository, import it in the dashboard. Tofu checks the files and builds the app. If the build fails, its log identifies what needs fixing.
Connect saved data and sign-in if the app needs them
Ask for a managed database and approve creating it for this app. The app's setup files create its tables and access rules, and its code uses the connection Tofu supplies. Google sign-in needs a button that calls Tofu's sign-in service. Availability follows the app's plan and hosting; the pricing page and the app's Database and Sign-in pages show what is included. A plain static HTML upload does not receive a managed database on shared static hosting.
Check the independent site, then connect a domain
Once Tofu reports it live, open its address on a phone and in another browser. Try every form and button. Reload after saving and check that another person sees only what they should. A domain you own can then point to the app, on a plan that includes one. The domain guide explains that step.
What carries over
| What you have | What moves with the files | What needs its own setup |
|---|---|---|
| Page design and interactions | The HTML, styles, scripts and assets included in the project. | Missing dependencies, images and the build setup around a lone component. |
| Saved information | Sample data deliberately stored in the source files. | Records in platform storage or another database; exporting and moving them is separate. |
| AI and connected apps | Ordinary integration code included in the project. | A service connection, its permission and any private settings for the new app. |
| A share link | The original link stays part of the original platform. | Tofu publishes a new address; a custom domain connects separately. |
What Tofu does not do
Read an app out of a share link. Tofu needs files or a supported repository import. A URL to an artifact, canvas or conversation is not a source-code upload.
Copy platform features with the screen. A platform’s built-in AI calls, connectors, storage and permissions belong to that platform. The independent app needs its own implementation and connections.
Turn every file into a website. A text document or an isolated code snippet may need a web project around it. Tofu hosts the app supplied; it does not infer the missing screens and behaviour during deployment.
Guarantee that a published page works correctly. A successful build and an address that answers do not prove that a form saves data or a private record is protected. Try those journeys in the app itself.
Questions
Is a published artifact already a website?
It is a hosted page or experience, and that may be enough to share a prototype. This guide is for running its code as an independent app, with its own hosting and any services it needs. It does not assume artifacts cannot store data.
Does a single HTML file work?
Yes, if it is the complete site: an index.html with its required assets and no missing server. Code that needs React, a build step or a backend needs the corresponding project files. See supported app types.
Will the AI features keep working?
Only if their code and service connections work outside the original platform. A Claude or ChatGPT subscription used in the workspace is not a private API key for the independent app. Any new service account or usage charges are separate.
Do visitors need Claude or ChatGPT accounts?
Opening the independent Tofu site does not itself require either account. Any login the app implements, or access restrictions you choose for the app, still apply.
Can the page stay simple?
Yes. A portfolio, calculator or informational page may work entirely in the browser. Add a database only when the app needs shared or lasting records, and sign-in only when it needs to identify people.
Describe an app, or bring one from your agent. Tofu puts it online.
Works with any coding agent
© 2026 Tofu
trytofu.ai