Discourse AI - Web Artifacts

Documentation Site Management
1

What Are AI Artifacts?

AI Artifacts are powerful tools that allow users to create, embed, and interact with dynamic web-based components directly within a Discourse post. These components can contain custom HTML, CSS, and JavaScript, enabling a variety of use cases such as:

  • Embedding interactive quizzes or forms.
  • Visualizing data with rich graphics and animations.
  • Integrating lightweight web applications or tools.
  • A tool for learning about web frameworks, JavaScript libraries and more.

AI Artifacts seamlessly enhance Discourse posts by adding interactivity while ensuring a secure browsing experience.

Site Settings

Administrators can configure several settings:

1. Enabling the Feature

  • Setting: discourse_ai_enabled
    • Ensure this global setting is enabled for AI Artifacts to function.

2. Security Modes

  • Setting: ai_artifact_security
    • Options:
      • disabled: Disable the artifact system
      • lax: Artifacts automatically appear in posts without requiring user interaction.
      • strict: Users must explicitly activate artifacts in their browser by clicking a “View” or “Run” button. This setting is recommended for security-conscious environments. (default)

3. Artifact Creator Access

  • By default, the Artifact Creator persona is restricted to staff users only. This restriction ensures that only trusted individuals can create artifacts, minimizing the risk of improper or malicious usage.
  • If broader access is required, permissions need to be manually configured by a site administrator.

Using AI Artifacts in Posts

Artifacts are automatically created by the Artifact Creator persona on demand.

The above artifact was generated using GPT-4o and the anime.js library

Once created they are private to you and the Artifact Creator persona. Users who are able to share ai conversations (those who belong to the ai bot public sharing allowed groups) can also make an artifact public by sharing the conversation.

Once shared you can use the following HTML markup to render it in a post:

<div class="ai-artifact" data-ai-artifact-version="3" data-ai-artifact-id="71"></div>

(where the version and artifact id are your versioned artifact)

Security Considerations

Given that AI Artifacts can execute custom-written HTML, CSS, and JavaScript, Discourse has implemented robust safeguards:

1. Sandboxing in iFrames

  • Artifacts are rendered inside isolated iframe containers with sandbox attributes to restrict potentially unsafe operations like:
    • Cross-site scripting.
    • Access to external sites or APIs.

2. Content Security Policy (CSP)

3. Security Mode

  • Strict Mode: This is recommended for environments where artifacts are not fully trusted. Users will need to manually activate artifacts in their browser before they are rendered.

4. Access and Permissions

  • Artifacts are visible only to:
    • Their creator.
    • Users with the right permissions to view the associated post (e.g., private messages).
  • Public artifacts must be explicitly marked as such by sharing the AI conversation.

5. Length Limits

  • The size of HTML, CSS, and JavaScript in an artifact is capped at 64 KB each. This ensures components remain lightweight and do not burden users or systems.

FAQ

Who Can Create AI Artifacts?

By default, only staff users (e.g., admins or moderators) can create artifacts through the Artifact Creator Persona. This persona simplifies the process of designing interactive web widgets using HTML, CSS, and JavaScript.

What Happens If I Click an Artifact?

  • In lax mode, artifacts appear automatically.
  • In strict mode, clicking the “Run” button activates the artifact and allows it to load in your browser.

Are AI Artifacts Safe?

Yes. AI Artifacts run in tightly controlled environments:

  • They are sandboxed and cannot interact with the Discourse application or user context directly.
  • The strict mode gives you control over activation.

Can I see the source code for Artifacts

Yes. When Discourse AI generates artifacts it will include the full markup, css and JavaScript.

What LLMs are supported?

Artifacts can be generated using any LLM you have configured, however various LLMs specialize and are more finely tuned for artifact creation.

We have seen good results with GPT-o, Anthropic Claude Sonnet 3.5, GPT-4o, Gemini Pro 1.5 and Qwen 2.5 coder.

There is a large aspect of trial and error with artifact creation, experimentation is key.

11 Likes