Working with Artifacts
Open code, documents, web pages and diagrams in a side panel you can preview, edit and download.
When you ask for something longer than a quick answer - a web page, a React component, a document, a diagram or a block of code - AI Assistify opens it in Artifacts, a side panel next to the chat. You can preview it live, edit it, step through versions and download it, without losing your place in the conversation.
Turn Artifacts on
Artifacts is controlled from the toolbar under the message box:
- Look for the Artifacts button below where you type.
- Click it so it reads Artifacts: ON. A short confirmation appears.
- Ask for something substantial, for example: "Build a pricing page with three plans and a monthly/yearly toggle."
The response streams into the side panel while a compact card stays in the chat. Click the card at any time to reopen the panel.
What can be an artifact
| Type | What you get | Live preview |
|---|---|---|
| Web page | A complete HTML page with styles and scripts | Yes |
| React component | An interactive component rendered in a sandbox | Yes |
| Document | Formatted Markdown, such as a report or a plan | Yes |
| SVG image | Icons, illustrations and simple graphics | Yes |
| Diagram | Flowcharts and sequence diagrams (Mermaid) | Yes |
| Code | Any programming language, syntax-highlighted | Source only |
Previews run in an isolated sandbox, so generated code can't touch your account or your other chats.
Use the panel
Switch between preview and code
For anything previewable, use the Preview / Code toggle in the panel header to flip between the rendered result and its source.
Copy, download and close
- Copy puts the full source on your clipboard.
- Download saves it as a file with the right extension -
.html,.jsx,.md,.svg,.mmd, or the language's own extension for code. - Close hides the panel; your artifact stays in the chat.
Resize the panel
Drag the panel's left edge to make it wider or narrower. Double-click the edge to reset it.
Versions
Each time you ask for a change - "make the header sticky", "add a dark theme" - AI Assistify creates a new version instead of overwriting the old one. Use Previous version and Next version in the panel header to compare them. When a chat contains several artifacts, use the switcher at the top of the panel to move between them.
Edit it yourself
- Click Edit in the panel header.
- Change the source directly.
- Press CtrlS to save, or Esc to discard your changes.
Your edit is saved as a new version, and the assistant sees it the next time you ask for changes.
Fix a broken preview
If a preview hits an error, the panel shows This preview hit an error with the first line of the message. Click Fix with AI to send the error back to the assistant - it returns a corrected version automatically.
Was this article helpful?