Creating components with AI

Creating components with AI

Acquia Source customers can use external AI-powered code editors such as Cursor, Claude Code, Replit, or Lovable to quickly create components of a page in Drupal Canvas.

Use the following checklist to create components of a page with AI:

Configuring an API client in Acquia Source

1. In a terminal window, run the following command to install the CLI tool:

   copy

   npm install @drupal-canvas/cli -g

2. Access your site.
3. In the left sidebar, click API > API clients.

4. Click Add API client to start creating a new client.

   If you do not want to create a new client, you can edit an existing client.

5. In the Label field, enter a label.

6. In the Client ID field, enter a client ID.

   Make a note of the client ID and save it to a secure location.

7. Select the Client Credentials checkbox and add canvas:asset_library and canvas:js_component as scopes.

8. In the User field, configure a user to serve as the author of actions made by this client.

   Important

   • Do not use the anonymous user.
   • The permissions associated with the roles of the user that you configure in this field are ignored for authorization.
9. Save the client to generate credentials.

Creating a local codebase

1. In a terminal window, run the following command to invoke the latest version of the Drupal Canvas create tool published on npm:

   copy

   npx @drupal-canvas/create@latest

2. Scaffold a template repository called Nebula.

   This repository contains the default UI components for Acquia Source and is located at [email protected]:acquia/nebula.git.

3. Verify that the scaffolded repository contains all the folders from the template repository.

   The repository includes the ruler/rules folder, which contains AI instructions written to build code components and provide context and prompts for AI coding agents.

Creating components with an AI agent

1. From the scaffolded repository, run the following command to apply the Ruler tool with Cursor as the preferred AI coding agent:

   copy

   npx ruler apply --agents=cursor

   The command creates an agents.md file compatible with Cursor.

2. Run the following command to open Cursor.

   copy

   cursor .

   Cursor displays all files and folders of the local codebase, which include:

   • Storybook setup that serves as the local development environment
   • Example component
   • The env file that connects the new site to the Drupal Canvas CLI tool
   • The Drupal Canvas CLI tool to synchronize components between the local environment, the Drupal environment, and the Source environment
   • A Vite plugin to automatically configure the JSON API client for executing requests against the Drupal website, mirroring the in-browser code editor in Drupal Canvas
   • A Drupal Canvas recommended eslint.config file to validate code against standards required for it to work in Drupal Canvas

3. In the AI Sidebar of Cursor, type Build this page: <page URL>.

   <page URL> is the URL of the page whose components are to be created in Drupal Canvas.

4. Press Enter.

   The AI agent builds the components, validates them against the rules defined in the eslint.config file, and fixes any linting errors. 

5. Open the Storybook build in a standalone browser and verify the components.
6. Switch back to Cursor.

7. In the AI Sidebar of Cursor, type Upload all these components to Drupal Canvas.

   The components are created in the new Acquia Source site and are displayed in the Components panel.

8. Do the required changes in the components of the page.

Make a note of the client ID and save it to a secure location.

Creating a local codebase

1. In a terminal window, run the following command to invoke the latest version of the Drupal Canvas create tool published on npm:

   copy

   npx @drupal-canvas/create@latest

2. Scaffold a template repository called Nebula.

   This repository contains the default UI components for Acquia Source and is located at [email protected]:acquia/nebula.git.

3. Verify that the scaffolded repository contains all the folders from the template repository.

   The repository includes the ruler/rules folder, which contains AI instructions written to build code components and provide context and prompts for AI coding agents.

Creating components with an AI agent

1. From the scaffolded repository, run the following command to apply the Ruler tool with Cursor as the preferred AI coding agent:

   copy

   npx ruler apply --agents=cursor

   The command creates an agents.md file compatible with Cursor.

2. Run the following command to open Cursor.

   copy

   cursor .

   Cursor displays all files and folders of the local codebase, which include:

   • Storybook setup that serves as the local development environment
   • Example component
   • The env file that connects the new site to the Drupal Canvas CLI tool
   • The Drupal Canvas CLI tool to synchronize components between the local environment, the Drupal environment, and the Source environment
   • A Vite plugin to automatically configure the JSON API client for executing requests against the Drupal website, mirroring the in-browser code editor in Drupal Canvas
   • A Drupal Canvas recommended eslint.config file to validate code against standards required for it to work in Drupal Canvas

3. In the AI Sidebar of Cursor, type Build this page: <page URL>.

   <page URL> is the URL of the page whose components are to be created in Drupal Canvas.

4. Press Enter.

   The AI agent builds the components, validates them against the rules defined in the eslint.config file, and fixes any linting errors. 

5. Open the Storybook build in a standalone browser and verify the components.
6. Switch back to Cursor.

7. In the AI Sidebar of Cursor, type Upload all these components to Drupal Canvas.

   The components are created in the new Acquia Source site and are displayed in the Components panel.

8. Do the required changes in the components of the page.