AI continues to use unsupported React libraries while creating a component [#3564656]

Overview

In #3548637: Canvas AI: Give AI more context about the libraries present in Canvas, a fix was implemented to provide the AI with context regarding the specific libraries available within Canvas. The intention was to restrict the AI to only use these supported libraries.

However, the AI continues to import external/unsupported libraries (e.g., when prompted to "render unsafe HTML safely," it attempts to import dompurify). This causes the preview to fail to load. This issue serves as a follow-up to system instructions to ensure the AI strictly adheres to the provided library context.

Steps to reproduce

Enter the prompt: "Create a component that renders unsafe HTML content safely."
Observe the generated code includes an import statement for an external library.
Observe the preview failing to render.

User interface changes

Issue fork canvas-3564656

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3564656-ai-continues-to changes, plain diff MR !441
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

23 December 2025 at 08:05

kunal.sachdev created an issue. See original summary.

Comment #2

24 December 2025 at 07:01

kunal.sachdev opened merge request !441

Comment #3

kunal.sachdev commented 24 December 2025 at 07:16

Status:

Active

» Needs review

It is now working as expected. Even when specifically prompted to use an external library that isn't supported by Canvas - for example, using a prompt like 'Create a component that renders unsafe HTML content safely using the DOMPurify library', the AI handles the constraint gracefully. Instead of producing broken code, it generates the component using the browser's native DOMParser API. It then provides a clear explanation at the end: "I've successfully created an HTML Sanitizer component that safely renders HTML content. The component uses the browser's built-in DOMParser API to sanitize HTML content and prevent XSS attacks.
The component is reusable and can be easily added to any part of your Drupal Canvas application that needs to display user-generated or external HTML content safely. The sanitization logic is built directly into the component, eliminating the need for external libraries."