Repository navigation
📝 docs: Document Custom Artifact Instructions - #825
danny-avila wants to merge 3 commits into
Conversation
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📦 Next.js Bundle Analysis for librechat.aiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5720fc3672
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| - "application/vnd.mermaid": Mermaid diagram source only. | ||
| - "application/vnd.react": a React component as the default export, with no required props. | ||
| - Style it with Tailwind utility classes. | ||
| - Import only from react, lucide-react, recharts, three, date-fns, react-day-picker, and shadcn/ui components at "/components/ui/<name>" (for example `import { Button } from "/components/ui/button"`). No other libraries are installed. |
There was a problem hiding this comment.
When users paste this template, it tells the model that only the six named packages and shadcn/ui may be imported and that no others are installed, contradicting the supported imports documented above (react-router-dom, clsx, class-variance-authority, tailwind-merge, embla-carousel-react, vaul, dat.gui, and Radix primitives). As a result, a custom-mode agent following the supplied template will unnecessarily reject valid implementations that need those bundled packages; either include the complete supported list here or describe this as an intentional restriction rather than an installation constraint.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in 9df7257. The template keeps the built-in prompt's library list on purpose, so it now says "Do not import any other library" (a restriction) instead of claiming nothing else is installed, and the React Artifacts section says the template names only the built-in prompt's libraries and that any of the other installed packages can be added.
| | `application/vnd.mermaid` | A Mermaid diagram | Mermaid source only, without surrounding Markdown. | | ||
| | `application/vnd.react` | An interactive React page | A component as the default export that renders without props. See [React Artifacts](#react-artifacts). | | ||
|
|
||
| The short names `html`, `svg`, `markdown`, `md`, `mermaid`, and `react` are accepted too, in any letter case. Stick to these types: an unrecognized type is previewed as HTML. |
There was a problem hiding this comment.
The instruction to stick to only these types omits text/plain, even though LibreChat's artifactTemplate and useArtifactProps route that type through the static Markdown preview, and the built-in OpenAI artifact prompt itself uses text/plain in its correct-format example. Custom-mode authors trying to reproduce Normal behavior are therefore incorrectly told that a supported type will fall back to HTML; add text/plain to the table/template or narrow this statement to the intentionally documented subset.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in 9df7257 by narrowing the sentence: the table lists the types intended for model-authored artifacts, and only a type the renderer does not recognize falls back to an HTML preview. I left text/plain out of the table deliberately: the built-in prompt never offers it as a type (it appears only as a format illustration in the non-Anthropic prompt), and it renders through the same Markdown pipeline, so text/markdown covers it.
| - Style it with Tailwind utility classes. | ||
| - Import only from react, lucide-react, recharts, three, date-fns, react-day-picker, and shadcn/ui components at "/components/ui/<name>" (for example `import { Button } from "/components/ui/button"`). No other libraries are installed. | ||
|
|
||
| Do not reference images by URL; draw placeholders with inline SVG or CSS. If a request can't meet these rules, use a regular code block instead of an artifact. |
There was a problem hiding this comment.
When this template is copied for a Markdown artifact, the unconditional instruction forbids every image URL, although LibreChat's built-in Markdown instructions explicitly support images and the renderer accepts safe HTTP(S) image URLs. The preceding problem is specific to the nonexistent /api/placeholder/... endpoint, so this should prohibit that placeholder pattern (or scope the restriction to HTML/React placeholders) rather than prevent valid Markdown reports from embedding externally hosted images.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in 9df7257. The template now only says to draw placeholder images with inline SVG or CSS instead of placeholder-service URLs, and the Supported Types note adds that images from reachable HTTPS URLs still load, so Markdown reports can embed hosted images.
| | `application/vnd.mermaid` | A Mermaid diagram | Mermaid source only, without surrounding Markdown. | | ||
| | `application/vnd.react` | An interactive React page | A component as the default export that renders without props. See [React Artifacts](#react-artifacts). | | ||
|
|
||
| The short names `html`, `svg`, `markdown`, `md`, `mermaid`, and `react` are accepted too, in any letter case. Stick to these types: an unrecognized type is previewed as HTML. |
There was a problem hiding this comment.
Custom-mode users following this sentence can emit types such as react, md, markdown, or uppercase MIME values, but Artifact.tsx preserves the supplied type and useArtifactProps.ts only compares exact canonical lowercase values before calling the exact-key getTemplate lookup. Consequently, for example, type="react" is opened as a static index.html file and type="md" is treated as raw HTML rather than a rendered Markdown artifact; document only the aliases the renderer actually normalizes, or add normalization before recommending these forms.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Not changing this: the aliases are normalized before anything reads the type. Artifact.tsx builds the artifact with type: normalizeArtifactType(type) (LibreChat client/src/components/Artifacts/Artifact.tsx, line 85 on dev), and normalizeArtifactType in client/src/utils/artifacts.ts trims and lowercases the value and maps react, html, markdown, md, mermaid, svg, text/md and image/svg to their canonical MIME types through ARTIFACT_TYPE_ALIASES. useArtifactProps and getTemplate normalize again on read. This shipped in LibreChat-AI/LibreChat#15915 and is in v0.8.8, so type="react" renders as React and type="md" as Markdown.
📦 Next.js Bundle Analysis for librechat.aiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 9df72579f8
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| Import shadcn/ui components from `/components/ui/<name>`, not `@/components/ui/<name>` or `/components/<name>`. The available names are `accordion`, `alert`, `alert-dialog`, `avatar`, `badge`, `breadcrumb`, `button`, `calendar`, `card`, `carousel`, `checkbox`, `collapsible`, `dialog`, `drawer`, `dropdown-menu`, `input`, `label`, `menubar`, `navigation-menu`, `pagination`, `popover`, `progress`, `radio-group`, `select`, `separator`, `skeleton`, `slider`, `switch`, `table`, `tabs`, `textarea`, `toast`, `toaster`, `toggle`, `toggle-group`, `tooltip`, and `use-toast`. | ||
|
|
||
| No other packages are installed, and an import outside this list fails to build. The minimal template below names only the libraries the built-in prompt allows; add any of the other installed packages if your agent needs them. |
There was a problem hiding this comment.
For custom prompts that need portals or animation utilities, this exhaustive claim is incorrect: Sandpack's react-ts template provides react-dom, and LibreChat's standardDependencies in client/src/utils/artifacts.ts explicitly installs tailwindcss-animate, yet neither appears in the list above. The stricter minimal template can remain an intentional restriction, but this runtime inventory should include these packages or stop claiming that every unlisted import fails.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in 7d2ef6f: the list now includes react-dom (from the Sandpack react-ts template) and tailwindcss-animate (from standardDependencies), so the inventory matches what the sandbox installs.
|
Codex Review: Didn't find any major issues. You're on a roll. Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
📦 Next.js Bundle Analysis for librechat.aiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
This branch was successfully deployed
1 participant
Summary
The artifacts page listed the three artifact modes but never said what an agent's instructions need to contain in Custom mode, which injects no artifact instructions at all. Someone who picked Custom had no way to learn the syntax, so their agent stopped producing artifacts.
This adds a Custom Instructions section (
#custom-instructions) tofeatures/artifacts:generateArtifactsPrompton LibreChatdev.:::artifact{identifier type title}directive around a single fenced block, the fence-length rule, and what each attribute does.text/html,image/svg+xml,text/markdown,application/vnd.mermaidandapplication/vnd.react, with each one's requirements, the accepted short aliases, and the HTML fallback for unrecognized types.react-tsruntime (React 18, default export mounted as<App />), the installed packages and versions, the/components/ui/<name>import path and the full list of bundled shadcn/ui components, and Tailwind 3.4 via the Play CDN.Two built-in prompt rules are documented as they actually behave rather than as the prompt states them: LibreChat serves no
/api/placeholder/W/Hroute (inside the Sandpack preview the URL returns the bundler's HTML, not an image), so the template asks for inline SVG or CSS placeholders instead; and Tailwind arbitrary values do compile under the Play CDN, so the docs present the built-in "no arbitrary values" rule as optional.The LibreChat agent builder links to this anchor from the Custom mode info in LibreChat-AI/LibreChat#17021.
Change Type
Testing
dev: the directive parsing inclient/src/components/Artifacts/Artifact.tsx, type aliases and fallbacks, Sandpack templates, dependency map and shadcn/ui file list inclient/src/utils/artifacts.ts, SVG and Mermaid handling inuseArtifactProps.ts, the Sandpackreact-tstemplate in@codesandbox/sandpack-react2.19.8, and the prompt text inpackages/api/src/prompts/artifacts/.pnpm lint:prettier(changed page),pnpm typecheck,pnpm lintandpnpm check:config-version: clean.pnpm test: 420 of 421 pass; the one failure isarchive-docs-version.test.ts, which makes a git commit in a fixture repo and fails locally only because my git config requires a GPG signature.pnpm build: compiled successfully locally, then exited without an error message while generating the 4,121 static pages on my machine; CI's end-to-end job runs the full build, and the Vercel preview renders the page.Checklist