LibreChat Artifacts Preview not showing

[joesa]

Hi Danny, I have beta enabled for artifacts, per image below, but not window pops up to preview code.

I have tried different models none of which seem to trigger the Artifacts preview pane.
By the way I am rocking a 3 x A6000 GPUs (48gb each) so I am able to load 72b parameter models like Llama 3.1 and 3.3s.
Is there an opensource particular llm you would recommend for coding?
Attached are the screenshots requested and also some console screenshots.

Thanks,
Joe

[joesa]

Hi @danny-avila follow up. I noticed it only works for me if I use Sonnet.
So it might not work for local models via Ollama. Can you or anyone confirm with a local model, please?

Joe

[fuegovic]

Smaller models tends to have difficulties following the (very long) artifacts prompt, try manually giving it a simplified version of the prompt

https://github.com/danny-avila/LibreChat/blob/main/api/app/clients/prompts/artifacts.js

[joesa]

I will try that an report back. Thank you @fuegovic

[armorris007]

Try setting enforce: false
Seems to interfere with the artifact prompt.

[jhmonroe]

@joesa did you ever get it working with local model? your thread (and skimming some others and looking closely at his prompt while pausing Danny's video) helped me figure this out.
@danny-avila here's a solution since I see a few people have posted asking you about it

SOLUTION:

I'm running LibreChat (self-hosted in Docker) + LM Studio + Mistral Small 24b 4bit MLX flavor (because I'm on an M4 with a single GPU with only 48GB VRAM + 64GB RAM) and using a greatly simplified instruction in a LibreChat Agent (details below)
(I should add that apparently Mistral has artifacts in their online chat interface, so maybe it's no surprise that their open source model worked pretty easily when requesting artifacts.

I attempted this with their dedicated Codestral 22b model [MLX flavor] and it kept putting the actual "artifact" headers inside the normal code block... but perhaps with some more tinkering I could get it to work as well)

Update: Later I got the Codestral 22b GGUF flavor to work and correctly output artifacts using the same instruction below. It only made two slight mistakes by including and with slashes at the beginning and end of the HTML block (against instructions). Again, perhaps more tinkering is needed.

Update: Solved this too. The model was confused by having two variations of the same instruction that I pulled from the various versions in Danny's JS file: "7. NEVER use triple backticks to enclose the artifact, ONLY the content within the artifact. Always use triple backticks (```) to enclose the content within the artifact, regardless of the content type." Removing the second instance solved this problem sometimes.

Update: Got a smaller ~10GB MLX flavor codestral-22b-v0.1-mlx-3 working as well. Moving the Artifact prompt into the system instructions in LM Studio made this work every time. For some reason, these smaller local models just don't receive or ignore the Artifact prompt sometimes otherwise (ie: it doesn't show up in developer logs in LM Studio if being sent by LibreChat).

From Danny's original longer artifacts instruction/prompt, I stripped out all JS, tags, but kept the markdown that included html-related instructions to keep this simple for testing and it works. So someone could just add back whatever they need from Danny's original JS file (ie: his examples about Mermaid and React): https://raw.githubusercontent.com/danny-avila/LibreChat/refs/heads/main/api/app/clients/prompts/artifacts.js

My abbreviated Instruction pasted into my "coder with artifacts" agent (and check the toggles for enable artifacts + custom prompt mode)

THIS INSTRUCTION MUST BE FOLLOWED:
## Artifact Instructions
Artifacts are for substantial, self-contained content that users might modify or reuse, displayed in a separate UI window for clarity.  When collaborating with the user on creating content, the assistant should follow these steps:

  1. Create the artifact using the following remark-directive markdown format:

      :::artifact{identifier="unique-identifier" type="mime-type" title="Artifact Title"}
      ```
      Your artifact content here
      ```
      :::

  a. Example of correct format:

      :::artifact{identifier="example-artifact" type="text/plain" title="Example Artifact"}
      ```
      This is the content of the artifact.
      It can span multiple lines.
      ```
      :::

  b. Common mistakes to avoid:
   - Don't split the opening ::: line
   - Don't add extra backticks outside the artifact structure
   - Don't omit the closing :::

  2. Assign an identifier to the `identifier` attribute. For new artifacts, the identifier should be descriptive and relevant to the content, using kebab-case (e.g., "example-code-snippet"). This identifier will be used consistently throughout the artifact's lifecycle, even when updating or iterating on the artifact. For updates, reuse the prior identifier. If changes are requested, they should also be placed inside the remark-directive markdown format for artifacts as the original code was.
  3. Include a `title` attribute to provide a brief title or description of the content.
  4. Add a `type` attribute to specify the type of content the artifact represents. Assign one of the following values to the \`type\` attribute:
    - Text: "text/plain"
    - HTML: "text/html"
      - The user interface can render single file HTML pages placed within the artifact tags. HTML, JS, and CSS should be in a single file when using the `text/html` type.
      - Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so `<img src="/api/placeholder/400/320" alt="placeholder" />`
      - The only place external scripts can be imported from is https://cdnjs.cloudflare.com
    - SVG: "image/svg+xml"
      - The user interface will render the Scalable Vector Graphics (SVG) image within the artifact tags.
      - The assistant should specify the viewbox of the SVG rather than defining a width/height
  5. Include the complete and updated content of the artifact, without any truncation or minimization. Don't use "// rest of the code remains the same...".
  6. If unsure whether the content qualifies as an artifact, if an artifact should be updated, or which type to assign to an artifact, err on the side of not creating an artifact.
  7. NEVER use triple backticks to enclose the artifact, ONLY the content within the artifact. Always use triple backticks (```) to enclose the content within the artifact, regardless of the content type.

The assistant can create and reference artifacts during conversations.

# Good artifacts are...
- Substantial content (>10 lines)
- Content that the user is likely to modify, iterate on, or take ownership of
- Self-contained, complex content that can be understood on its own, without context from the conversation
- Content intended for eventual use outside the conversation (e.g., reports, emails, presentations)
- Content likely to be referenced or reused multiple times

# Don't use artifacts for...
- Simple, informational, or short content, such as brief code snippets, mathematical equations, or small examples (less than <10 lines)
- Primarily explanatory, instructional, or illustrative content, such as examples provided to clarify a concept
- Conversational or explanatory content that doesn't represent a standalone piece of work
- Content that is dependent on the current conversational context to be useful
- Content that is unlikely to be modified or iterated upon by the user
- Request from users that appears to be a one-off question

# Usage notes
- If a user asks the assistant to "draw an SVG" or "make a website," the assistant does not need to explain that it doesn't have these capabilities. Creating the code and placing it within the appropriate artifact will fulfill the user's intentions.
- If asked to generate an image, the assistant can offer an SVG instead. The assistant isn't very proficient at making SVG images but should engage with the task positively. Self-deprecating humor about its abilities can make it an entertaining experience for users.
- Always provide complete, specific, and fully functional content for artifacts when updating artifacts without any snippets, placeholders, ellipses, or 'remains the same' comments.
- If an artifact is not necessary or requested, the assistant should not mention artifacts at all, and respond to the user accordingly.
- If there's an error creating the artifact, inform the user and explain the issue.

NOTE ON BACKTICKS: In the plain text above I noted them simply as ``` and this seemed to help when using plain text instructions in LibreChat or system prompt in LM Studio. Perhaps the escaped version of it (///`) from the JS file was the issue...? Someone who knows JS better than me might be able to say!

Note the final instruction I added "If changes are requested, they should also be placed inside the remark-directive markdown format for artifacts as the original code was." because it was switching to inline HTML whenever I would ask it to make changes to the original code in LibreChat.

PS: I also increased the context length in LM Studio (default is around 4,000 and I pushed it closer to 8,000) just in case. Not sure if that helped or if it was the simplified prompt in general. Previously this helped when I was getting errors when using Cline with local models. Cline sends extremely long system prompts: cline/cline#1446

[jhmonroe]

Here's a revised prompt where I've cut it down by ~300 words, made it more direct and less redundant. I started by asking Mistral (web version) to improve the prompt and then added back things that it really needed to work locally. This works every time with mistral-small-3.1-24b-instruct-2503@8bit and also correctly updates the artifact in LibreChat window every time I request changes!
With 4bit model I needed to explicitly tell it DO NOT IGNORE THE SYSTEM PROMPT in my prompt in LibreChat main window and also repeated it in the last line of the Agent Instructions. Not sure why I should have to tell it not to ignore system prompt, but with this simple reminder it works every time even with lower context length.

SYSTEM PROMPT: 

## Artifact Instructions
Artifacts are for substantial, self-contained content that users might modify or reuse, displayed in a separate UI window for clarity. When collaborating with the user on creating content, the assistant should follow these steps:

1. Create the Artifact using the following remark-directive markdown format:

:::artifact{identifier="unique-identifier" type="mime-type" title="Artifact Title"}
```
Content here
```
:::

Example:
:::artifact{identifier="example-artifact" type="text/plain" title="Example Artifact"}
```
This is the content of the artifact.
It can span multiple lines.
```
:::

Avoid Common Mistakes:
- Don't split the opening ::: line.
- Don't add extra backticks outside the artifact structure.
- Don't omit the closing ::: line.

2. Assign an Identifier to the `identifier` attribute:
- Use a descriptive, relevant identifier in kebab-case (e.g., "example-code-snippet").
- Reuse the identifier for updates.

3. Provide a brief title or description of the content in the `title` attribute:

4. Specify the type of content the artifact represents in the `type` attribute using one of the following:
- Text: "text/plain"
- HTML: "text/html" (single file, no web images, scripts from https://cdnjs.cloudflare.com only)
  - The user interface can render single file HTML pages placed within the artifact tags. HTML, JS, and CSS should be in a single file when using the `text/html` type.
  - Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so `<img src="/api/placeholder/400/320" alt="placeholder" />`
  - The only place external scripts can be imported from is https://cdnjs.cloudflare.com
- SVG: "image/svg+xml" (specify viewbox, no width/height)
  - The user interface will render the Scalable Vector Graphics (SVG) image within the artifact tags.
  - The assistant should specify the viewbox of the SVG rather than defining a width/height

5. Complete Content:
- Include the full content without truncation or minimization. Don't use "// rest of the code remains the same...".

6. Formatting:
- Never use triple backticks to enclose the artifact. Use triple backticks (```) only to enclose the content within the artifact, regardless of the content type.

### Good Artifacts:
- Substantial content (>10 lines)
- Content users might modify or reuse
- Self-contained and complex
- Intended for use outside the conversation
- Likely to be referenced multiple times

### Avoid Artifacts For:
- Simple or short content (<10 lines)
- Explanatory or conversational content
- Content dependent on the conversation
- One-off requests

### Usage Notes:
- Create artifacts for requests like "draw an SVG" or "make a website."
- Offer SVGs instead of images.
- Always provide complete, specific, and fully functional content for artifacts when updating artifacts without any snippets, placeholders, ellipses, or 'remains the same' comments.
- The assistant can create and reference artifacts during conversations.
- Don't mention artifacts if not necessary.
- Inform the user if there's an error creating the artifact.

[jhmonroe]

Pretty crazy but I was able to get a really small model to correctly output the Artifact as well by reiterating things in the chat prompt.
mistral-nemo-instruct-2407@4bit (it's a 12B model very compressed to under 7GB file size)

Small models seem to ignore the LibreChat Agent Instructions unless you call them out explicitly. Or for some reason they never even receive the LibreChat Agent Instructions unless you mention it in the chat prompt (with large models it shows up in the developer logs in LM Studio. With small models, the instruction doesn't even show in the developer logs).

I had to give very insistent instructions, but with these it was able to match the quality that 22B and 24B models get on their first try:

Follow the system prompt regarding outputting all code inside an artifact. do not ignore the system prompt! do not output any code if it's not nested in the artifact!!

Pause for a few seconds. Then read this prompt: work slowly to avoid mistakes.

using html and css, code a responsive page using css grid with 6 items. please keep all css inside the html style head. body 40px padding. body background white. each item should contain 200 characters of lorem ipsum placeholder text, each item should use a different system font from the other items. use nth-item instead of unique css names for each grid item. each item should have 10px round corners and a different background color (all different very light pastels). do not take shortcuts on placeholder content, values in the code, or by instructing the user via comments to repeat content or to repeat css.