How to record a Claude artifact as a video
Published
Claude can build an animation, a chart that draws itself or a small interactive scene as an artifact. To share it as MP4, WebM or GIF, you need a browser to play it and record the result. The address in your chat looks like the obvious thing to paste, but it is the one link a recorder can never open. This guide explains why, and the three ways that do work.
Why a claude.ai/chat link can’t be recorded
An address such as claude.ai/chat/…?artifact=… points into your own conversation. Claude shows it only to you, signed in. The recorder is a fresh browser with no account, so Claude would show it a login page instead of your artifact. RecordHTML spots these links and explains the options instead of recording a login screen.
Signing the recorder in to your account isn’t an option either: that would mean handing over your Claude session. The ways below give the recorder the artifact itself, never your account.
| Route | Works for | The video shows | You need |
|---|---|---|---|
| Ask Claude to record it | Every artifact, React included | The artifact alone | The RecordHTML connector, added in Claude once |
| Upload the HTML file | Artifacts that are one HTML page | The artifact alone | The downloaded file; uploads are public by link |
| Paste a public link | Artifacts shared with anyone who has the link | Claude’s bar around the artifact, unless you crop it | A plan and settings that allow public links |
| Paste the chat link | Nothing | Claude’s sign in page | Not possible |
1. Ask Claude to record it
This works for every kind of artifact and needs no files. Add RecordHTML to Claude once as a custom connector: the MCP server page has the address and the steps. A free Claude account can add one custom connector; on Team and Enterprise plans an owner adds it for the organization first.
Then, in the chat that holds the artifact, ask for the video, for example: “Record this artifact as a 1080×1920 MP4, 15 seconds long.” Claude sends the artifact’s code to RecordHTML. A React artifact is a component rather than a page, so Claude first wraps it in a page that loads React from a public CDN. The recording appears in your RecordHTML account, and Claude can hand you a link to the video.
The code is published at an unlisted public address for the recorder to open, so leave secrets out of it. The MCP documentation covers sizes, timing and errors in detail.
2. Upload the HTML file
If the artifact is a plain HTML page, use the controls at the top of the artifact panel in Claude to download it. On the record page, choose Upload and pick the file. RecordHTML publishes it as a page of its own, reads any declared size from it and records it like a hosted creative.
A single file has to carry everything: styles and scripts inline, and images, fonts and libraries from https addresses or data URIs. Artifacts are usually built that way already. A React artifact downloads as component code, which a browser can’t open by itself; ask Claude to turn it into one standalone HTML file first, or use the connector.
3. Share it with a public link
Claude can share an artifact with anyone who has the link on Pro and Max plans, and an artifact made in a chat can be published on Free, Pro and Max. A link anyone can open works for the recorder too. Before pasting it, open it in a private browser window: if Claude asks you to sign in there, the recorder will see that sign in page as well.
This is the quickest route, with one catch: the video shows Claude’s own page around the artifact, with a bar along the top. Crop it out with Crop the viewport under Advanced, or use one of the routes above for a clean frame. On Team and Enterprise plans, artifacts stay inside the organization unless an owner allows external sharing. Unpublishing revokes the link for good, so record before you take it down.
Settings that suit artifacts
Choose the size the artifact was designed for, not your screen: 1080×1920 for a vertical story, 1920×1080 for a landscape video, or the banner size an ad needs. Many artifacts stretch to fill any window, so the size you pick decides the layout you get. For a GIF instead of a video, the HTML to GIF page explains the frame rates and loop options.
The recorder doesn’t click or type. An artifact that waits for a Start button records its first screen only, so ask Claude to make it play on its own before recording. For an animation that loops, set the length to one or two cycles; for one that ends, a few seconds past its last frame.
Sources and scope
Checked October 28, 2026. Claude’s menus, plans and sharing rules can change. Follow the linked Claude documentation where it differs from this guide.