AI Artifacts & Generated Sites

Artifact Sandbox

Definition

When an assistant writes a small web app for you, it does not simply open the file on your machine. The preview runs inside an isolated frame with a reduced set of privileges, built on the browser's own iframe sandbox and usually tightened further by the chat tool. Typical restrictions are no arbitrary requests to third-party servers, a short allow-list of script sources, no handle on the surrounding chat page, and either no persistent storage or storage bound to a throwaway origin. The exact rules differ between Claude, ChatGPT and the rest, and they are revised as those products change, so treat any specific limit as something to test rather than assume. The shape of it stays constant: a preview is a controlled rehearsal, not a deployment.

Why It Matters

The gap between preview and open web runs in both directions. A page that pulls data from your own server may work in the chat window and fail the moment it is published, because the real host's CORS rules say no. Just as often the reverse happens, and something that could save nothing in the preview behaves perfectly once it sits on a normal origin with browser storage available. Judge a build by the preview alone and you will either ship something broken or bin something that was fine. Ten minutes spent publishing a test copy settles it.

How It Works

The chat interface embeds your generated file in a frame with a restrictive sandbox attribute and, usually, a Content Security Policy naming which script and style sources are permitted. Outbound requests are checked against that policy, so a call to an address the tool has not allowed fails in the console rather than reaching the network. Storage APIs are either missing or tied to an opaque origin that vanishes with the conversation, and the frame cannot read the parent document. Publish the same file to a host and every one of those restrictions is replaced by the ordinary rules of the web: your origin, your headers, your storage.

Real-World Example

Someone builds a budgeting tool in a chat and finds that in the preview the numbers reset on every reload. They download the single HTML file and put it at budget-tool.99helpers.site, where it has a stable public URL of its own. Saving now works, the figures survive a refresh, and the link can go to a colleague. The one thing that does not carry over is a call the page made to an internal API, which stays blocked until that server adds the new hostname to its allowed origins.

Common Mistakes

  • Treating the preview as a deployment — it lives inside a conversation, and the rules it runs under are not the rules a published page gets
  • Building against an endpoint that the sandbox happens to permit, then finding the published copy blocked — test the request from the real host early
  • Abandoning a feature that failed in the preview, such as saving to browser storage, when it would work unchanged on an ordinary origin

Related Terms

Put a file online in seconds

Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.

Host a file free →