--- 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

Issue fork canvas-3548637

Command icon 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:

Comments

utkarsh_33 created an issue. See original summary.

utkarsh_33’s picture

Issue summary: View changes
utkarsh_33’s picture

Issue summary: View changes

utkarsh_33’s picture

Status: Active » Needs review

The prompts that i used for testing are:-

  1. Create a component that has a formatted text area and gives me an option to change the background colour using a list of colour options
  2. Can you please create a CTA component named test1 that allows me to use images with a bit of text and to include a CTA to link to other pages and some background colour.

The output must contain the imports for cn and FormattedText.

utkarsh_33’s picture

Assigned: utkarsh_33 » Unassigned
utkarsh_33’s picture

As 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.

narendrar’s picture

Status: Needs review » Reviewed & tested by the community

Tested it with below prompts and LLM is using packages from custom library:

Create a reusable button component. Define variants for:
intent: 'primary', 'secondary', 'danger', 'ghost'
size: 'xs', 'sm', 'md', 'lg', 'xl'
fullWidth: true/false
Set defaults: intent='primary', size='md', fullWidth=false
Apply appropriate Tailwind classes for each variant combination.
Create a component that displays a blog post excerpt. The component should accept props for title and htmlContent. Style it as a card with padding and shadow.
Create an Alert component with multiple variants (info, success, warning, error) and sizes (sm, md, lg). When the alert is an error AND large, make the text bold with a thicker border. When it's a success AND small, make the text italic. Include areas for icon, title, and description.
Build a card component that animates into view with fade and slide effects when it appears. Add hover effects that scale or transform the card.
utkarsh_33’s picture

So #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-components and 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:-

  1. This will temporary solve the problem of previews being broken.
  2. This approach is also better than the current approach as it removes the duplication of the instructions and it will also get the latest changes in the documentation.
  3. This might also be helpful in handling issues such as #3549558: AI may generate Tailwind classes only compatible with older Tailwind versions which might otherwise need separate instructions in the prompt thus increasing the instructions.
wim leers’s picture

Status: Reviewed & tested by the community » Needs work

Stale; conflicting on many files.

kunal.sachdev made their first commit to this issue’s fork.

kunal.sachdev’s picture

Status: Needs work » Needs review

I 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.

narendrar’s picture

Status: Needs review » Needs work
Issue tags: +Needs tests
StatusFileSize
new326.79 KB

Code for tailwind and description for importing packages is not complete. See:
Issue

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

kunal.sachdev’s picture

Status: Needs work » Needs review
narendrar’s picture

Status: Needs review » Needs work

Left some feedback and this also requires test coverage.

kunal.sachdev’s picture

Status: Needs work » Needs review
StatusFileSize
new255.74 KB
new257.59 KB

The 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.

utkarsh_33’s picture

Status: Needs review » Needs work

One 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:-

[
    "name" => "lucide-react",
    "type" => "UI / Icons",
    "description" => "A lightweight, clean, and consistent icon set that is highly tree-shakeable and customizable via props.",
    "code" => "```jsx
import { Bell, User } from 'lucide-react';

export default function NavBar() {
  return (
    <nav className=\"flex items-center justify-between p-4 bg-white shadow-sm\">
      <span className=\"font-bold text-lg\">MyApp</span>
      <div className=\"flex gap-4\">
        {/* Pass standard props like size, color, or strokeWidth */}
        <Bell size={24} className=\"text-gray-600 hover:text-blue-500\" />
        <User size={24} strokeWidth={1.5} />
      </div>
    </nav>
  );
}
```",
  ],

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 error

I 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.

utkarsh_33’s picture

Also 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.

kunal.sachdev’s picture

The only instruction I can currently identify that contains CVA and Tailwind-related code is the following:

The components are built using javascript having props, with the following output (Astro):

  JSX:
  import { cva } from 'class-variance-authority';
    export default function MyComponent({ mainHeading = "Hello", isEnabled = true, intent = 'primary'}) {
    const containerStyles = cva('p-4 rounded', {
    variants: {
      intent: {
        primary: 'bg-blue-500 text-white',
        secondary: 'bg-gray-200 text-gray-800',
      },
    },
    defaultVariants: {
      intent: 'primary',
    },
  });

    return (
      <div className={containerStyles({ intent })}>
        {isEnabled && <h1 className="text-2xl font-bold">{mainHeading}</h1>}
      </div>
    );
  }
  Props JSON:
  [
    {
      "id": "mainHeading",
      "name": "Main Heading",
      "type": "string",
      "example": "Hello",
      "format": null,
      "$ref": null,
      "derivedType": "text",
      "required": true
    },
    {
      "id": "isEnabled",
      "name": "Enabled",
      "type": "boolean",
      "example": true,
      "format": null,
      "$ref": null,
      "derivedType": "boolean"
    },
    {
      "id": "intent",
      "name": "Intent",
      "type": "string",
      "example": "",
      "enum": ["primary", "secondary"],
      "format": null,
      "$ref": null,
      "derivedType": "listText",
      "meta:enum": {
        "primary": "bg-blue-500 text-white",
        "secondary": "bg-gray-200 text-gray-800",
      },
    }
  ]

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.

kunal.sachdev’s picture

Status: Needs work » Needs review
utkarsh_33’s picture

This 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.

utkarsh_33’s picture

Just a small nit for a better message else everything looks good.

utkarsh_33 changed the visibility of the branch 3548637-canvas-ai-give to hidden.

utkarsh_33’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs tests

Removing tags as there are test coverages and also code looks good to me so moving it to RTBC.

tim.plunkett made their first commit to this issue’s fork.

tim.plunkett’s picture

Status: Reviewed & tested by the community » Fixed

Merged, thanks!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

penyaskito’s picture

A 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).

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.