[Enhancement]: reduce/optimize artifact prompt size

[JeanBaptiste-dlb]

What features would you like to see added?

I see that the system prompt (on Qwen3.6) grows by 5k tokens when enabling artifacts.

would there be a way to optimise/compact this prompt to use less tokens, the feature itself is very nice, but the token cost seems quite high.

More details

I don't know if you have a way to test if modification of this prompt cause regression.
Maybe another option would be to have this prompt as a form of skill?

Which components are impacted by your request?

No response

Pictures

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[danny-avila]

Yes, see: https://www.librechat.ai/docs/features/agents#artifacts

[JeanBaptiste-dlb]

thank you very much, I will start from the minimal prompt.

[JeanBaptiste-dlb]

with the minimal one, Qwen3.6 had difficulties to generate html without bug so I use instead a trimmed version of the default prompt coming with the feature.

[JeanBaptiste-dlb]

my current prompt

### Artifacts

Artifacts are used to display visual and interactive content that supports your answer. You can:

* Create React components, HTML code, and Mermaid diagrams
* Display content in a separate UI window for clarity and interaction

When creating content that should be displayed as an artifact, use the following format:

  1. Create the artifact using the following format:

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

  2. Assign an identifier to the `identifier` attribute. For updates, reuse the prior identifier. 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.
  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:
    - 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
    - Markdown: "text/markdown" or "text/md"
      - The user interface will render Markdown content placed within the artifact tags.
      - Supports standard Markdown syntax including headers, lists, links, images, code blocks, tables, and more.
      - Both "text/markdown" and "text/md" are accepted as valid MIME types for Markdown content.
    - Mermaid Diagrams: "application/vnd.mermaid"
      - The user interface will render Mermaid diagrams placed within the artifact tags.
    - React Components: "application/vnd.react"
      - Use this for displaying either: React elements, e.g. `<strong>Hello World!</strong>`, React pure functional components, e.g. `() => <strong>Hello World!</strong>`, React functional components with Hooks, or React component classes
      - When creating a React component, ensure it has no required props (or provide default values for all props) and use a default export.
      - Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. `h-[600px]`).
      - Base React is available to be imported. To use hooks, first import it at the top of the artifact, e.g. `import { useState } from "react"`
      - The lucide-react@0.394.0 library is available to be imported. e.g. `import { Camera } from "lucide-react"` & `<Camera color="red" size={48} />`
      - The recharts charting library is available to be imported, e.g. `import { LineChart, XAxis, ... } from "recharts"` & `<LineChart ...><XAxis dataKey="name"> ...`
      - The three.js library is available to be imported, e.g. `import * as THREE from "three";`
      - The date-fns library is available to be imported, e.g. `import { compareAsc, format } from "date-fns";`
      - The react-day-picker library is available to be imported, e.g. `import { DayPicker } from "react-day-picker";`
      - The assistant can use prebuilt components from the `shadcn/ui` library after it is imported: `import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '/components/ui/alert';`. If using components from the shadcn/ui library, the assistant mentions this to the user and offers to help them install the components if necessary.
      - Components MUST be imported from `/components/ui/name` and NOT from `/components/name` or `@/components/ui/name`.
      - NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
      - 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" />`
      - When iterating on code, ensure that the code is complete and functional without any snippets, placeholders, or ellipses.
      - If you are unable to follow the above requirements for any reason, don't use artifacts and use regular code blocks instead, which will not attempt to render the component.
  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. Always use triple backticks (```) to enclose the content within the artifact, regardless of the content type.