Skip to main content

Artifacts

What are Artifacts and how do I use them in Open WebUI?​

Artifacts in Open WebUI are an innovative feature inspired by Claude.AI's Artifacts, allowing you to interact with significant and standalone content generated by an LLM within a chat. They enable you to view, modify, build upon, or reference substantial pieces of content separately from the main conversation, making it easier to work with complex outputs and ensuring that you can revisit important information later.

When does Open WebUI use Artifacts?​

Open WebUI creates an Artifact when the generated content meets specific criteria tailored to our platform:

  1. Renderable: To be displayed as an Artifact, the content must be in a format that Open WebUI supports for rendering. This includes:
  • Single-page HTML websites
  • Scalable Vector Graphics (SVG) images
  • Complete webpages, which include HTML, Javascript, and CSS all in the same Artifact. Do note that HTML is required if generating a complete webpage.
  • ThreeJS Visualizations and other JavaScript visualization libraries such as D3.js.

Other content types like Documents (Markdown or Plain Text), Code snippets, and React components are not rendered as Artifacts by Open WebUI.

How does Open WebUI's model create Artifacts?​

To use artifacts in Open WebUI, a model must provide content that triggers the rendering process to create an artifact. This involves generating valid HTML, SVG code, or other supported formats for artifact rendering. When the generated content meets the criteria mentioned above, Open WebUI will display it as an interactive Artifact.

How do I use Artifacts in Open WebUI?​

When Open WebUI creates an Artifact, you'll see the content displayed in a dedicated Artifacts window to the right side of the main chat. Here's how to interact with Artifacts:

  • Editing and iterating: Ask an LLM within the chat to edit or iterate on the content, and these updates will be displayed directly in the Artifact window. You can switch between versions using the version selector at the bottom left of the Artifact. Each edit creates a new version, allowing you to track changes using the version selector.
  • Updates: Open WebUI may update an existing Artifact based on your messages. The Artifact window will display the latest content.
  • Actions: Access additional actions for the Artifact, such as copying the content or opening the artifact in full screen, located in the lower right corner of the Artifact.

Securing artifact previews with a CSP​

Artifact previews render inside a sandboxed srcdoc iframe. For tighter control over what that generated HTML can do (outbound network calls, scripts, styles), inject a dedicated Content Security Policy into the preview with the IFRAME_CSP environment variable, separate from the main app's CONTENT_SECURITY_POLICY.

It is empty by default (the iframe sandbox already provides baseline isolation) and applies to every srcdoc iframe in the UI: Artifacts, code/HTML previews, file previews and citation modals. When set, Open WebUI prepends a <meta http-equiv="Content-Security-Policy"> tag to the iframe document, and per the CSP spec the first policy wins, so it overrides any CSP the generated HTML already declares. A reasonable starting point:

IFRAME_CSP=default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob:; connect-src 'none'

That keeps inline scripts and styles working (most artifacts need them) while blocking fetch / XMLHttpRequest / WebSocket, so an artifact cannot quietly call out to the network.

Start permissive, then tighten

An overly strict policy can make a preview appear blank, since many artifacts rely on inline <script> and <style>. Start permissive and narrow from there. IFRAME_CSP is a startup environment variable (not an Admin Panel setting), so changing it requires a restart. For the security-focused walkthrough, see Hardening → Iframe content-security-policy.

Editing Artifacts​

  1. Targeted Updates: Describe what you want changed and where. For example:
  • "Change the color of the bar in the chart from blue to red."
  • "Update the title of the SVG image to 'New Title'."
  1. Full Rewrites: Request major changes affecting most of the content for substantial restructuring or multiple section updates. For example:
  • "Rewrite this single-page HTML website to be a landing page instead."
  • "Redesign this SVG so that it's animated using ThreeJS."

Best Practices:

  • Be specific about which part of the Artifact you want to change.
  • Reference unique identifying text around your desired change for targeted updates.
  • Consider whether a small update or full rewrite is more appropriate for your needs.

Use Cases​

Artifacts in Open WebUI enable various teams to create high-quality work products quickly and efficiently. Here are some examples tailored to our platform:

  • Designers:
    • Create interactive SVG graphics for UI/UX design.
    • Design single-page HTML websites or landing pages.
  • Developers: Create simple HTML prototypes or generate SVG icons for projects.
  • Marketers:
    • Design campaign landing pages with performance metrics.
    • Create SVG graphics for ad creatives or social media posts.

Examples of Projects you can create with Open WebUI's Artifacts​

Artifacts in Open WebUI enable various teams and individuals to create high-quality work products quickly and efficiently. Here are some examples tailored to our platform, showcasing the versatility of artifacts and inspiring you to explore their potential:

  1. Interactive Visualizations
  • Components used: ThreeJS, D3.js, and SVG
  • Benefits: Create immersive data stories with interactive visualizations. Open WebUI's Artifacts enable you to switch between versions, making it easier to test different visualization approaches and track changes.

Example Project: Build an interactive line chart using ThreeJS to visualize stock prices over time. Update the chart's colors and scales in separate versions to compare different visualization strategies.

  1. Single-Page Web Applications
  • Components used: HTML, CSS, and JavaScript
  • Benefits: Develop single-page web applications directly within Open WebUI. Edit and iterate on the content using targeted updates and full rewrites.

Example Project: Design a to-do list app with a user interface built using HTML and CSS. Use JavaScript to add interactive functionality. Update the app's layout and UI/UX using targeted updates and full rewrites.

  1. Animated SVG Graphics
  • Components used: SVG and ThreeJS
  • Benefits: Create engaging animated SVG graphics for marketing campaigns, social media, or web design. Open WebUI's Artifacts enable you to edit and iterate on the graphics in a single window.

Example Project: Design an animated SVG logo for a company brand. Use ThreeJS to add animation effects and Open WebUI's targeted updates to refine the logo's colors and design.

  1. Webpage Prototypes
  • Components used: HTML, CSS, and JavaScript
  • Benefits: Build and test webpage prototypes directly within Open WebUI. Switch between versions to compare different design approaches and refine the prototype.

Example Project: Develop a prototype for a new e-commerce website using HTML, CSS, and JavaScript. Use Open WebUI's targeted updates to refines the navigation, layout, and UI/UX.

  1. Interactive Storytelling
  • Components used: HTML, CSS, and JavaScript
  • Benefits: Create interactive stories with scrolling effects, animations, and other interactive elements. Open WebUI's Artifacts enable you to refine the story and test different versions.

Example Project: Build an interactive story about a company's history, using scrolling effects and animations to engage the reader. Use targeted updates to refine the story's narrative and Open WebUI's version selector to test different versions.

Troubleshooting​

Artifacts Preview Not Working (Uncaught SecurityError)​

If you encounter an issue where the code preview in the chat interface does not appear and you see an error like Artifacts.svelte:40 Uncaught SecurityError in the browser console, this is commonly caused by cross-origin iframe restrictions in certain environment configurations.

Solution:

  1. Go to Settings > Interface.
  2. Toggle on iframe Sandbox Allow Same Origin.
  3. Save your settings.

Artifact Preview Is Blank After Setting a CSP​

If previews stop rendering after you set IFRAME_CSP, the policy is blocking something the generated HTML needs.

  1. Open your browser developer tools and look for CSP violation messages in the console.
  2. Relax the policy for just the blocked resource type or origin (commonly inline script / style, eval, or a specific image, font or connect origin).
  3. To rule the CSP out entirely, temporarily unset IFRAME_CSP and restart; the preview falls back to sandbox-only isolation.
This content is for informational purposes only and does not constitute a warranty, guarantee, or contractual commitment. Open WebUI is provided "as is." See your license for applicable terms.