--- AI TRACKER METADATA ---
Update Summary: Give AI more context about the libraries present in Canvas
Check-in Date: MM/DD/YYYY (US format) [When we should see progress/get an update]
Due Date: MM/DD/YYYY (US format) [When the issue should be fully completed]
Blocked by: [#XXXXXX] (New issues on new lines)
Additional Collaborators: @username1, @username2
AI Tracker found here: https://www.drupalstarforge.ai/
--- END METADATA ---
Overview
Currently while creating code components sometimes AI includes the react libraries that are not supported by canvas, which causes results in the preview not getting loaded. If we can provide the AI the list of available libraries that are supported by the canvas system then chances of AI importing wrong libraries while component creation will be less.
Proposed resolution
User interface changes
| Comment | File | Size | Author |
|---|---|---|---|
| #17 | Screenshot 2025-12-15 at 5.06.13 PM.png | 257.59 KB | kunal.sachdev |
| #17 | Screenshot 2025-12-15 at 5.06.02 PM.png | 255.74 KB | kunal.sachdev |
| #13 | Screenshot 2025-12-04 at 2.11.42 PM.png | 326.79 KB | narendrar |
Issue fork canvas-3548637
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
- 3548637-form-for-libraries
changes, plain diff MR !389
- 3548637-canvas-ai-give
changes, plain diff MR !140
Comments
Comment #2
utkarsh_33 commentedComment #3
utkarsh_33 commentedComment #5
utkarsh_33 commentedThe prompts that i used for testing are:-
The output must contain the imports for
cnandFormattedText.Comment #6
utkarsh_33 commentedComment #7
utkarsh_33 commentedAs per discussion with @tim.plunkett, @NarendraR and @balintbrews for now we can go with the hardcoded approach but we need to figure out a better way to dynamically parse the docs and pass the required libraries as a context to the LLM.
Added the descriptions for each libraries as per the request. This is ready for review again.
I have created a follow-up #3549430: Canvas AI: Find a better approach of passing the libraries supported by canvas as a context to LLM.
Comment #8
narendrarTested it with below prompts and LLM is using packages from custom library:
Comment #9
utkarsh_33 commentedSo #3549558: AI may generate Tailwind classes only compatible with older Tailwind versions issue has made the need of this issue more prominent. According to our discussion with Jamie, Markus, Tim, Narendra and Aanand we agreed with not proceeding the hardcoded approach in this issue.
Here's what i suggest until we get a better and a consolidated approach for this, We can find a way of reading the files that are present in the
/canvas/docs/user/src/content/docs/code-componentsand create temp file/set of instructions(generate a guide for LLM) which can be passed as a context to the LLM and we can avoid the usage of the libraries that are not present in Canvas.Temporary advantages of this approach are:-
Comment #10
wim leersStale; conflicting on many files.
Comment #12
kunal.sachdev commentedI have tested this multiple times and it is working as expected. AI correctly uses packages from the library. Moving to "Needs Review" for a second set of eyes.
Comment #13
narendrarCode for tailwind and description for importing packages is not complete. See:

Also, as we are now using context from packages.mdx, we should remove any duplicate instructions in ai_agents.ai_agent.canvas_component_agent.yml
Comment #15
kunal.sachdev commentedComment #16
narendrarLeft some feedback and this also requires test coverage.
Comment #17
kunal.sachdev commentedThe latest MR introduces a new form for managing the AI context libraries. This form allows to configure the set of libraries passed to the AI. It includes several default, hardcoded libraries which can be removed or supplemented with new entries as needed.
Comment #18
utkarsh_33 commentedOne thing that popped up in my mind while testing this is say if a user adds a library which is not currently supported by canvas system and it tries to use that library then it will break the component preview.
I tested this with addition of a new library:-
with all the required fields that the form for libraries requires and i tried creating a code component using the following prompt:-
Create a React component called DynamicIconBox. The goal of this component is to render different icons based on a string prop passed to it, using the lucide-react library..It does create a code component correctly but the preview for that component is broken with an error:-
Failed to resolve module specifier "lucide-react". Relative references must start with either "/", "./", or "../".Understand this errorI don't think this form should be editable for now or else if it's editable then we should ensure that the required packages are imported at correct place by the user.
Comment #19
utkarsh_33 commentedAlso once we have included the libraries in a form then we should remove the code related to libraries in the agent instructions for ex: we have included examples of code for tailwind and cva in the component agent.
Comment #20
kunal.sachdev commentedThe only instruction I can currently identify that contains CVA and Tailwind-related code is the following:
We cannot remove this instruction because it is not an example of how to use the libraries, but rather an essential instruction defining the props structure and it's related jsx code.
Comment #21
kunal.sachdev commentedComment #22
utkarsh_33 commentedThis is a much better approach than the form one earlier as we are anyways not adding the support for any libraries using canvas ai until canvas supports the libraries.
Comment #23
utkarsh_33 commentedJust a small nit for a better message else everything looks good.
Comment #25
utkarsh_33 commentedRemoving tags as there are test coverages and also code looks good to me so moving it to RTBC.
Comment #28
tim.plunkettMerged, thanks!
Comment #30
penyaskitoA very timely coincidence: we just merged some fixes for wrong links in #3563788: Incorrect documentation link for code components data fetching, which made tests introduced here to fail!
We need to avoid this to happen again, see #3564164: `\Drupal\Tests\canvas_ai\Kernel\CanvasPackagesDocsFileHashTest` depends on file hash for a) repurposing the test for actually testing whatever it's expecting (which I guess is libraries listed), or b) at least ensure the test runs when we ONLY update these docs in an MR (phpunit are not running right now if only docs are updated).