📦 Artifacts
Artifacts in FlowChat allow you to interact with significant, standalone content generated by an AI model in a dedicated workspace separate from the main chat.
Overview
When the AI generates complex content—like a website prototype, a graphic, or a data visualization—FlowChat creates an Artifact. This allows you to view, edit, and iterate on substantial pieces of work without cluttering your conversation history.
Supported Content Types
FlowChat renders the following as interactive Artifacts:
- Web Prototypes: Single-page HTML websites including CSS and JavaScript.
- Vector Graphics: Scalable Vector Graphics (SVG) for icons and illustrations.
- Visualizations: Interactive charts and 3D scenes using libraries like ThreeJS or D3.js.
- Interactive Apps: Simple web-based tools and dashboards.
How to Use Artifacts
When an Artifact is created, it appears in a dedicated window to the right of your chat.
- Iterate & Update: Ask the AI to modify the Artifact (e.g., "Change the theme to dark mode" or "Add a new section for features"). The Artifact window will update to show the latest version.
- Version Control: Use the version selector at the bottom of the Artifact window to jump between different iterations of your work.
- Actions: Copy the source code or access the Artifact in full-screen mode using the controls in the corner.
Key Use Cases
| Role | Use Case |
|---|---|
| Designers | Create interactive SVG graphics and UI/UX prototypes. |
| Developers | Build quick HTML/JS prototypes and generate SVG icons. |
| Marketers | Design campaign landing pages and data-driven graphics. |
| Analysts | Generate and refine interactive data visualizations. |
Troubleshooting
Preview Not Loading
If you see a security error or the preview fails to load, it may be due to browser iframe restrictions.
Solution:
- Go to Settings > Interface.
- Enable Allow Iframe Sandbox Same-Origin Access.
- Save and refresh the page.
Artifacts turn AI responses into functional, professional-grade work products.